My goal is to load grid with a custom column order, in razor the grid is defined with a default column order:
<TelerikGrid @ref="Grid" Data="Data"> <GridColumns> <GridColumn Field="UserName" /> <GridColumn Field="Name" /> <GridColumn Field="Surname" /> </GridColumns> </TelerikGrid>
but user can change it, and the change persist, so the next time it show the grid, it need to have the custom grid order saved from the user.
I don't want to persist all the grid state, only the column order, so i solved this task allow grid to be Reorderable and saving to db the column order.
To load the custom order i tried using the OnStateInit event, get the column state from GridState.ColumnStates and setting the Index property.
This approach is described in documentation:
Unfortunally, in the OnStateInit event the property GridState.ColumnStates has no columns, so my solution is to change the column state in the OnAfterRenderAsync event, reading GridState.ColumnStates (this time column states are loaded) and setting the Index property.
This workaround work well but cause a graphic flicker, as when the event is fired, the grid is rendered with the original column order, then is changed based on code settings to ColumnState.Index property.
This is a sample code of this problem:
Now, how can i avoid this behaviour allow the grid to render directly with the custom column order? There is another event when i can change the ColumnState.Index property allow to render correctly?