Resize columns and remember the changed size

[Eddie Willcox]

Hi,

Is it possible to save the grid column sizes once a user has resized the columns?

[Balaji Sekar]

Hi Eddie, 

 

Greetings from the Syncfusion support. 

 

Query: Is it possible to save the grid column sizes once a user has resized the columns? 

 

Yes, we can store the resized columns and also rebind the that changes columns properties. In below code example, we have store the columns properties in localStorage it will save the column.width values. When we rebind that changes to Grid’s column you need to access that changes from localStorage and apply to columns in the setProperties method. 

 

Please refer the below code example and sample for more information. 

[Index.cshtml] 

document.getElementById("savebtn").addEventListener("click", function() { 

  var grid = document.getElementById("Grid").ej2_instances[0]; 

  var gridColumns = JSON.parse(grid.getPersistData()).columns; 

  localStorage.setItem("gcolumns", JSON.stringify(gridColumns)); 

}); 

document.getElementById("resetbtn").addEventListener("click", function() { 

  var grid = document.getElementById("Grid").ej2_instances[0]; 

  var gcols = JSON.parse(localStorage.getItem("gcolumns")); 

  grid.setProperties({ columns: gcols }); 

}); 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar 

[Eddie Willcox]

Thanks for your reply.

Does the save and reset have to happen on button click, or is there another event that can be triggered to save this data?

I want to save the changed column data per user and I will attempt to save it in a database per user record.

[Balaji Sekar]

Hi Eddie, 

 

Based on your query we suspect that you need to get the Grid columns changes after resized the column width and we suggest you to use ResizeStop event it will trigger when column resized so, you can save the columns changes to server based on user login. 

 

Please refer the below code example for more information. 

 

[Index.cshtml] 

   

function ResizeStop (args) { 

        var resizeColumns=JSON.parse(grid.getPersistData()).columns; 

// You can store the resizedColumns value to server based on user 

  }, 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar 

[Eddie Willcox]

Thank you. And is there a similar event trigger for reordering columns?

[Balaji Sekar]

Hi Eddie, 

 

Thanks for your update. 

 

Based on your query, we suggest you to use ActionBegin event of DataGrid it will trigger while column reordering and we can find the reordering action in ActionBegin event using reorder requestType. 

 

Please refer the below code example for more information. 

[Index.cshtml] 

 

function ActionBegin(args){ 

if(args.requestType == “reorder”){ 

 // You can write your own code here while column reordering 

} 

} 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar