Rank 1
I'm trying to figure out how I can persist column widths and ordering such that I can restore them.
My grid consists of a semi-dynamic set of columns defined with <GridColumn ... /> objects, with a variety of different settings in each column.
I can access the width/ordering on the onColumnReorder and onColumnResize events, and it's easy enough to extract and save this to localStorage, but how do I apply those values to the grid before it renders?
I've seen the example which creates columns using the array map() function, and this means defining the columns in code rather than declaratively in the JSX. I'd really like to avoid doing this if I can, especially considering my column set changes from one (application-level) mode to another.
If I can get the width/order from localStorage and then iteratively restore width/order in the existing grid columns, this would be significantly cleaner to effect.
Suggestions?
1 Answer, 1 is accepted
Hi Steven,
The width and orderIndex properties are part of the Column, so if you want to set them without using the map function (which would be the recommended approach), you can set them explicitly to a state variable. Here is a possible approach:
const [columnsState, setColumnsState] = React.useState([]);
React.useEffect(() => {
//simulating loading of the state
setColumnsState([{ field: 'ProductID', orderIndex: 1 }]);
}, []);
return (
<Grid
....
>
<Column
field="ProductID"
title="ID"
width="80px"
filterable={false}
orderIndex={
columnsState.find((c) => c.field == 'ProductID')?.orderIndex
}
/>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!
Rank 1