Solved

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

  • 12 June 2022
  • 9 replies
  • 213 views

Userlevel 7
Badge +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

icon

Best answer by aaghaei 4 July 2022, 22:54

View original

9 replies

Userlevel 6
Badge +5

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.

Userlevel 7
Badge +9

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?

Userlevel 6
Badge +5

@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...

Userlevel 7
Badge +9

@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.

Userlevel 6
Badge +5

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.

Userlevel 7
Badge +9

@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.

Userlevel 7
Badge +9

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:

Userlevel 7
Badge +18

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

Userlevel 7
Badge

Thank you @aaghaei!

Reply


About Acumatica ERP system
Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
© 2008 — 2024  Acumatica, Inc. All rights reserved