Using Column Chooser with Initially Hidden Columns in KendoReact Data Grid

Updated on Dec 19, 2025

Environment

Product Version	12.2.0
Product	Progress® KendoReact Grid

Description

I want to use the GridColumnMenuColumnsChooser component to manage the visibility of columns in the KendoReact Data Grid. My grid has columns that are initially hidden by setting the GridColumn.hidden prop to true. However, the column chooser does not update the visible state of these columns, and the columnsState prop incorrectly shows the column as visible.

This knowledge base article also answers the following questions:

• How can I use the column chooser with initially hidden columns?
• Why is the column chooser not respecting the hidden state of columns?
• How to set the initial state of columns with GridColumnMenuColumnsChooser?

Solution

To manage the visibility of columns that are initially hidden using the GridColumnMenuColumnsChooser component, use the defaultColumnsState property of the KendoReact Data Grid. This property allows the built-in state management to recognize the initial visibility of columns.

Follow these steps:

1. Set the id property for each column in the grid to ensure proper identification of columns.
2. Use the defaultColumnsState property to define the initial state of the columns, including their visibility.

Change Theme

Theme

Loading ...

See Also

• Grid Overview