Hide Columns Initially and Reflect Changes from Column Menu in KendoReact Data Grid
Environment
| Product | KendoReact Data Grid |
| Version | Current |
Description
When using the KendoReact Data Grid with hidden columns on initial render, the column menu settings fail to update the visibility of the columns in the grid. Updating the column visibility using the column menu does not affect the grid display.
Cause
The id property of the GridColumn is required for column state management and synchronization with the column menu. If the id property is missing, the grid cannot properly update the column visibility based on the column menu settings.
Solution
To ensure the grid reflects the column visibility changes from the column menu, add the id property to each GridColumn, matching the id defined in the columnState.
Steps:
- Define the
idproperty for eachGridColumn. - Assign the
idvalues from thecolumnStateto the respective columns.
Example
Here, the id property is added to each GridColumn, ensuring proper synchronization between the grid and column menu.