Devextreme DataGrid Column Reordering and Saving Column State

| By Webner

Devextreme Datagrid comes with a variety of features to work with column appearance at runtime. One among these is Column Reordering.
The column reordering feature in Devextreme allows the user to change the position of columns on the fly on the screen by using drag-drop.


Columns can also be restricted if their positions can be modified by the User.

allowColumnReordering: true,
columns: [
{ dataField: "CompanyName", allowReordering: false },
{ dataField: "Address" },
{ dataField: "Website" },
] });

Columns can also be reordered through code. For this, we need to know the identification of the correct column to be reordered. To handle the column reordering, we first need to know about the column index and visible index of the column.
Column index is the position of the column in the column source of the Datagrid and it remains fixed until we do not modify the column source of the Datagrid at runtime.
Visible Index of column refers to the visible position of the column on the screen.
So a column with index 0, 1 in the column source can be made available at some other position by setting its visible index.

$("#<grid-id>").dxDataGrid("instance").columnOption(<column-index>, "visibleIndex", <new-visible-index>);

For example, A column with position 7 (or column index 7) can be shown in the first place by setting its visible index 0.

$("#myDataGrid").dxDataGrid("instance").columnOption(7, "visibleIndex", 0);
If we are manually updating the visibility of multiple columns through code on some criteria basis, we need to be careful while setting the visibility of columns ( i.e its visible index). The visible index of multiple columns should be changed according to the order of Visible Index (0,1,2,3 ) and not in the order of column index.

With the drag-drop column feature, every user can rearrange column positions on their screen irrespective of each other. But these changes will remain till the page is not refreshed. So we require some way to store these settings for each user so that they can keep column positions arranged as per their wish.
In that case, of course, we can store the column visible index of each column on some manual button click.
But we can also use another feature offered by Devextreme, which is the State Persistence concept and it is discussed here.

Devextreme Saving Column State :

The state persistence concept is designed for maintaining the state of columns after page reload. As discussed, we can reorder the positions of columns, and similarly, we can do some other changes regarding columns like resizing, etc. In all these scenarios, these changes need to be stored somewhere, so whenever the user comes back the settings are retained.
One of the simple examples to use the state storing concept is sessionStorage (state persists for the current browser session) or localStorage ( state persists across different browser sessions) –
stateStoring: {
enabled: true,
type: "localStorage",
storageKey: "storage"

For more custom approaches, like if you want to store the state in your database or some other location, then stateStoring property provides you with customLoad and customSave functions
Format for using stateStoring concept with custom logic is as follows :
stateStoring: {
enabled: true,
type: "custom",
customLoad: function(){
// fetch the stored state using your custom logic like using ajax get request
customSave: function (state) {
// store your settings (i.e. state which includes visible indexes of columns)
//using ajax post

Leave a Reply

Your email address will not be published. Required fields are marked *