Persistance of Grid after reload not working
Hey Guys!
I wanted to ask you about the best way to save a grid state?
Currently I am using SfGrid.GetPersistDataAsync() to get the state of the grid after i reordered the columns (e.g. a columsn which is initially the 4th row is now the 1st) and save it in my database. I have a dropdown which shows me all my saved views so I can switch between them.
When I create a new view with the result of
SfGrid.GetPersistDataAsync() it works for me - if i do not reload the page. Selecting a dropdown item I applies the selected state with the correct order of columns via the SfGrid.SetPersistDataAsync(view) method.
Sadly after reloading the page this does not work anymore. I save all views with the view json in the database. After reload the grid stays in the initial state and the order does not change after switching the views.
Seems like the Get- and SetPersistDataAsync methods are not compatible after reloading the page and reinitializing the grid.
Any ideas
Hi
Patrick,
Based on your update, you want to maintain the grid state after a browser
refresh by handling the grid state manually. You are using the
GetPersistDataAsync() method to get the state of the grid after reordering the
columns, but you have faced issues after a browser page refresh. By default,
the grid state will not be maintained after a browser refresh when you are
handling the grid state manually. In this case, we suggest using the
SetPersistDataAsync method to assign the state value from your database in the
OnAfterRenderAsync method. This will maintain the grid state after a browser
refresh. Kindly refer to the code snippet below for your reference.
|
protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) {
Grid.SetPersistDataAsync(_state); //_
assign the state value from your database } |
Regards,
Prathap Senthil
Hey Prathap,
this is actually what we do, but it does not work regarding the order of the columns. I have a service fetching me my saved views from database. The
Grid.SetPersistDataAsync(_state) applies everything but the column order.
I created an exmaple project for you to check:
- You can find my example in the menu item "Grid example"
- You will see a grid and a button
- Have a look on the Temepratur (C) and Temperatur (F) columns.
- Temperatur (C) is initially on second place in the order
- Temperatur (F) is at the end of the grid
- The saved grid view in the json has the following state
- Temperatur (C) is visible=false now
- Temperatur (F) is now on 2rd place in the order
- Now click on the Apply button on the top
- As you can see the Temperatur (C) column is invisible now, as expected!
- The Temperatur (F) column did not move in the order, still at the end
Attachment: SfGridExamples_ed2c5c93.zip
Based on the reported problem, it seems that you saved JSON settings where the column index and original index are the same, even after column reordering. We suspect that you manually changed the index and column index properties. We would like to clarify that you should save the grid state value using the GetPersistedData method, and then apply the same data without any modification. This will ensure that the column order renders correctly.
Here, we have replaced the JSON code after using GetPersistedData to hide the "Temperature (C)" and "Temperature (F)" columns and reordered them to the second place using the column reordering feature. Or Alternatively in your previous json code, just change the index value without changing the original index value in the column settings. Kindly refer to the screenshot and sample below for your reference
|
"columns": [ { "allowEditing": true, "allowAdding": true, "allowFiltering": true, "allowGrouping": true, "allowReordering": true, "allowResizing": true, "allowSearching": true, "allowSorting": true, "autoFit": false, "clipMode": "Ellipsis", "disableHtmlEncode": true, "displayAsCheckBox": false, "editType": "DatePickerEdit", "enableGroupByFormat": true, "field": "Date", "headerText": "Date", "headerTextAlign": "Left", "hideAtMedia": "", "index": 0,
"originalIndex": 0, }, { "allowEditing": true, "allowAdding": true, "allowFiltering": true, "allowGrouping": true, "allowReordering": true, "allowResizing": true, "allowSearching": true, "allowSorting": true, "autoFit": false, "clipMode": "Ellipsis", "disableHtmlEncode": true, "displayAsCheckBox": false, "editType": "NumericEdit", "enableGroupByFormat": true, "field": "TemperatureC", "headerText": "Temp. (C)", "headerTextAlign": "Left", "hideAtMedia": "", "index": 1, "originalIndex": 1, -------------- }, { "allowEditing": true, "allowAdding": true, "allowFiltering": true, "allowGrouping": true, "allowReordering": true, "allowResizing": true, "allowSearching": true, "allowSorting": true, "autoFit": false, "clipMode": "Ellipsis", "disableHtmlEncode": true, "displayAsCheckBox": false, "editType": "NumericEdit", "enableGroupByFormat": true, "field": "TemperatureF", "headerText": "Temp. (F)", "headerTextAlign": "Left", "hideAtMedia": "", "index": 2, "originalIndex": 5, "isPersistAutoFit": false, "translateLeftRightValue": 0, "isFrozen": false, "isIdentity": false, "isPrimaryKey": false, "lockColumn": false, "maxWidth": "", "minWidth": "", "showColumnMenu": true, "showInColumnChooser": true, "textAlign": "Left", "freeze": "Left", "type": "Number", "uid": "grid-column5", "visible": true,
"width": ""
|
Attachment: SfGridExamples_ModifiedSample_77e4631b.zip
- 3 Replies
- 3 Participants
-
PW Patrick Wienzek
- Jul 15, 2024 08:00 AM UTC
- Aug 2, 2024 04:42 PM UTC
