Posted 30 April 2024, 4:01 pm EST - Updated 30 April 2024, 4:07 pm EST
I have a FlexGrid that I render a bunch of columns inside using code like this:
{gridColumns.map(col =>
<FlexGridColumn
key={col.uid}
header={col.headerText}
binding={col.field}
width={col.width}
format={col.format}
align={col.textAlign ?? "Left"}
visible={defaultBool(col.visible, true)}
minWidth={col.minWidth}
allowSorting={defaultBool(col.allowSorting, true)}
dataType={mapToWijmoDataType(col.type)}
>
{col.template &&
<FlexGridCellTemplate
cellType="Cell"
template={(context: any) => col.template?.(context.item)}
/>
}
{!col.template
&& col.field
&& col.type === "boolean" &&
<FlexGridCellTemplate
cellType="Cell"
template={(context: any) =>
Boolean(context.item[col.field!])
? "Yes"
: "No"
}
/>
}
</FlexGridColumn>
)}As you can see, if the column is a boolean (and the dev has not specified a template function in the column input), I render a FlexGridCellTemplate and the template is to render “Yes” or “No” in the column.
This works perfectly.
However, if I persist the grid and then restore the persisted state, I lose this template and the UI reverts back to the original display for a boolean (a checkbox).
Here is how I am retrieving and persisting the grid state:
const gridJson = JSON.stringify({
columns: gridRef.current.columnLayout,
filterDefinition: filterObj?.filterDefinition,
sortDescriptions: gridRef.current.collectionView.sortDescriptions.map(function (sortDesc) {
return { property: sortDesc.property, ascending: sortDesc.ascending };
}),
});
localStorage[`wijmoGridState_${id}`] = gridJson;Then, when it is time to restore the persisted state, I do this:
var json = localStorage[`wijmoGridState_${id}`];
if (json) {
var state = JSON.parse(json);
gridRef.current.columnLayout = state.columns;
if (filterObj) {
filterObj.filterDefinition = state.filterDefinition;
}
// Get the grid's current collectionView and restore the sort order info.
var view = gridRef.current.collectionView;
view.deferUpdate(function () {
view.sortDescriptions.clear();
for (var i = 0; i < state.sortDescriptions.length; i++) {
var sortDesc = state.sortDescriptions[i];
view.sortDescriptions.push(new SortDescription(sortDesc.property, sortDesc.ascending));
}
});
}After restoring, I lose my templates for all columns (even my other, custom ones).
Help! I want to be able to persist the column widths and their orders and then restore them later. However, I cannot lose the templates!
