How to persist column order and column visibility with ColumnMenu and GridColumnProps?

1 Answer 57 Views
Grid
Thomas
Top achievements
Rank 1
Iron
Thomas asked on 26 Jun 2024, 07:15 PM | edited on 26 Jun 2024, 07:41 PM

Problem summary: When including the ability to reorder columns and toggle column visibility on a grid ColumnMenu, the column order gets corrupted despite the correct order being stored and retrieved from session storage.

Detailed description: We want our users to be able to persist their grid column order and visibility. We also want the column order to be updated in the column menu. The column menu context keeps track of the order with a list of GridColumnProps. We save the column menu filter context and the column order into session storage. 

Grid

ColumnMenuContext



Session storage


Because GridColumnProps doesn't contain an order index parameter, on our  'onColumnsReorder' event, I take the the GridColumnProps lists and order them based on the orderIndex of the columns passed to the events. This works as expected for when I only reorder the columns or I only toggle column visibility. However, if I reorder the columns and then toggle visibility without refreshing, I lose the original column order. I have verified multiple times in the console that the order being saved to session storage is correct. When I refresh after the column order is lost, it then loads the columns with the correct order. 

I've seen this same behavior on other Telerik demos where you set reorderable={true} on a grid with a column menu. Easy steps to reproduce are always to switch the first two columns in the grid, and then toggle the first column's visibility to off. I've included text files (originally tsx files) with our data-grid component implementation and its component dependencies for reference. 'data-grid.tsx' contains the logic for saving the filter order and column order/visibility in the 'onColumnsChange' and the 'onColumnsReorder' event handlers.

If this can't be done with GridColumnProps, is there a different object we could save to the ColumnMenu's lists that would enable direct index tracking?

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 28 Jun 2024, 03:17 PM

Hi Thomas,

You will have to set the orderIndex manually to the columns when adding them to the Grid. Additionally, within the onColumnReorder you will have to map the "show" property as well from the previous state. I modified the example so it can handle both functionalities:

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
Grid
Asked by
Thomas
Top achievements
Rank 1
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or