Skip to main content
Solved

How we can freeze some of the DATA ENTRY grid columns?


aaghaei
Captain II
Forum|alt.badge.img+9

Hello Gang,

 

I was wondering is there any way to freeze a few columns of the DATA ENTRY grids on the left to always have them visible to the user when scrolling to right/left and we have many columns? I tried through Css but couldnlt find “Frozen” or similar property for it.Something like as Excel freez pane I’m looking to simulate in Acumatica

Best answer by aaghaei

SOLUTION:

@rosenjon @Naveen Boga @Chris Hackett

A good friend of mine, Hamed Oveisi, helped me to fix this issue and all credits goes to him. Here I’m sharing the solution and a little video of final product. This customization is developed on Cost Projection Screen:

1-Grid Client Events Property Setting:
 <ClientEvents AfterRefresh="freezeColumnForce" />
  <ClientEvents AfterColResize="freezeColumnForce" />
  <ClientEvents AfterColMove="freezeColumnForce" />

  <ClientEvents HorizontalScroll="freezeColumnIfNot" />
  <ClientEvents RowSelectorClick="freezeColumnIfNot" />
  <ClientEvents Initialize="freezeColumnIfNot" />

 

2-Java Script:

function freezeColumn(force)
{
    let totalWidth=0;
    let columnToFreeze=7;
    
    for (let i = 0; i < columnToFreeze; i++)
    {
        let x = document.getElementById("ctl00_phG_tab_t0_grid_headerT").rows[0].cells[i];
        
        if (x.style.position==='sticky' && !force) break;
        if (x.style.display==='none')
        {
            columnToFreeze++;
            continue;
        }
        
        let style = position: sticky;left: ${totalWidth}px ;z-index: 2;;
        totalWidth += x.offsetWidth;
        x.setAttribute('style',style);
        let j=0;
        while (true)
        {
            console.log("ctl00_phG_tab_t0_grid_row_"+j);
            let r=document.getElementById("ctl00_phG_tab_t0_grid_row_"+j);
            if (r==undefined) break;
            j++;
            r.cells[i].setAttribute('style',style);
        }
    }
}


function freezeColumnForce()
{
    freezeColumn(true);
}

 

function freezeColumnIfNot()
{
    setTimeout(freezeColumn(false),1000);
}

 

3-Final Result video in the zip file attached:

View original
Did this topic help you find an answer to your question?

9 replies

Forum|alt.badge.img+5
  • Semi-Pro III
  • 293 replies
  • June 12, 2022

You want css sticky.

https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b

 

Here is the example from that post: https://www.codeply.com/p/oZ4NjpvwbO

Keep in mind, Acumatica won’t necessarily play nice with this css. It will probably be more complicated than just using this css feature.


aaghaei
Captain II
Forum|alt.badge.img+9
  • Author
  • Captain II
  • 1176 replies
  • June 13, 2022

Thank you @rosenjon 

when I was researching before I post my question on the community, I saw this and tried to make it work but I didn’t have any luck. Have you done any sample in Acumatica to share?


Forum|alt.badge.img+5
  • Semi-Pro III
  • 293 replies
  • June 13, 2022

@aaghaei Sorry, it would take a while to modify the appropriate assets and test the config. I was just throwing this out as a potential starting point, and I’m skeptical it will work with Acumatica’s grid (but hey….you never know!).

Can you give us some more background on what you’re trying to use this for? Maybe there is a substitute...


aaghaei
Captain II
Forum|alt.badge.img+9
  • Author
  • Captain II
  • 1176 replies
  • June 13, 2022

@rosenjon thank you for clarification. In many of Acumatica screens for example project cost budget or specifically we have customized “Cost Projection” screen (we have added 36 columns to the Lines) we have many columns that when we scroll to right we need to know the associated Task, Cost Code, Account Group and Inventory Item. Currently when we scroll to right these key columns move out of the user sight and makes it very difficult to work. We need to freeze these 4 columns in the grid to have them always visible to the user whether they are looking at 6th column or 36th column. This definitely will insanely increase user usability and make it more friendly. There had been this need around that excel supports this for many years. Also I have seen Microsoft DataGridView columns has a property that can be set to Frozen.


Forum|alt.badge.img+5
  • Semi-Pro III
  • 293 replies
  • June 13, 2022

You should add it as a feature request. In the meantime, you might also want to give a look at @Gabriel Michaud’s Velixo product. It allows for viewing/editing of Acumatica data in Excel, and so then you can use the native Excel freeze columns. For your use case, your users may actually like it better than working inside Acumatica.


aaghaei
Captain II
Forum|alt.badge.img+9
  • Author
  • Captain II
  • 1176 replies
  • June 13, 2022

@rosenjon we have Velixo in our package. Considering there are some recursive and circular calculations depending on what column is modified by the user, excel can not handle this.

if you are familiar with Acumatica cost projection, you possibly know there are multiple columns that can be modified and depending on the row setting, (Auto, Manual, Quantity and Dollar) the other columns value changes accordingly. Our customization has made this more complex. Excel can not handle this using formula considering the circular reference or we have to write the same Acumatica codes in excel subs or functions which is not reasonable.


aaghaei
Captain II
Forum|alt.badge.img+9
  • Author
  • Captain II
  • 1176 replies
  • Answer
  • July 4, 2022

SOLUTION:

@rosenjon @Naveen Boga @Chris Hackett

A good friend of mine, Hamed Oveisi, helped me to fix this issue and all credits goes to him. Here I’m sharing the solution and a little video of final product. This customization is developed on Cost Projection Screen:

1-Grid Client Events Property Setting:
 <ClientEvents AfterRefresh="freezeColumnForce" />
  <ClientEvents AfterColResize="freezeColumnForce" />
  <ClientEvents AfterColMove="freezeColumnForce" />

  <ClientEvents HorizontalScroll="freezeColumnIfNot" />
  <ClientEvents RowSelectorClick="freezeColumnIfNot" />
  <ClientEvents Initialize="freezeColumnIfNot" />

 

2-Java Script:

function freezeColumn(force)
{
    let totalWidth=0;
    let columnToFreeze=7;
    
    for (let i = 0; i < columnToFreeze; i++)
    {
        let x = document.getElementById("ctl00_phG_tab_t0_grid_headerT").rows[0].cells[i];
        
        if (x.style.position==='sticky' && !force) break;
        if (x.style.display==='none')
        {
            columnToFreeze++;
            continue;
        }
        
        let style = position: sticky;left: ${totalWidth}px ;z-index: 2;;
        totalWidth += x.offsetWidth;
        x.setAttribute('style',style);
        let j=0;
        while (true)
        {
            console.log("ctl00_phG_tab_t0_grid_row_"+j);
            let r=document.getElementById("ctl00_phG_tab_t0_grid_row_"+j);
            if (r==undefined) break;
            j++;
            r.cells[i].setAttribute('style',style);
        }
    }
}


function freezeColumnForce()
{
    freezeColumn(true);
}

 

function freezeColumnIfNot()
{
    setTimeout(freezeColumn(false),1000);
}

 

3-Final Result video in the zip file attached:


Naveen Boga
Captain II
Forum|alt.badge.img+19
  • Captain II
  • 3377 replies
  • July 5, 2022

@aaghaei  Great. Thanks a lot for sharing the solution here.


Chris Hackett
Community Manager
Forum|alt.badge.img
  • Acumatica Community Manager
  • 2621 replies
  • July 5, 2022

Thank you @aaghaei!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings