GridColumnState.hidden can't override GridColumnProps.hidden

1 Answer 21 Views
Grid
Jie
Top achievements
Rank 3
Iron
Iron
Iron
Jie asked on 03 Oct 2025, 09:24 PM | edited on 03 Oct 2025, 09:26 PM

Hi,

 

If GridColumnProps has { hidden: true} in it, then GridColumnState won't be able to override the `hidden` property anymore.

Please see this example:

https://codesandbox.io/p/sandbox/stoic-wildflower-wn4lzn?file=%2Fapp%2Fapp.tsx%3A11%2C10-11%2C25

Line 15, customerID column's hidden is set to true. Clicking the "Hide" button won't show/hide that column. But if change customerID's `hidden` value to `false`, or just remove that hidden property at line 15. The "Hide" button will work.

 

Thanks,

Jie

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 08 Oct 2025, 11:47 AM

Hello, Jie,

Thanks for the example and the detailed observation.

The behavior you see is expected. When a column definition (GridColumnProps) includes hidden: true (or false), that prop becomes the single source of truth for visibility of that column. The Grid will not override an explicit prop value with GridColumnState. In React terms: the column becomes “controlled by props,” so internal/state-driven toggling won’t take effect unless you also update the prop.

How to achieve toggle behavior (two valid approaches)
 You still achieve the target hidden-column toggle behavior by managing the visibility only via column state In order to 

  • Remove hidden from the static column props.
  • Initialise column state with that column hidden.
  • Then toggle by updating your stored column state and feeding it back to the Grid.

For example:

const initialColumns = [ { field: 'customerID', title: 'Customer ID', hidden: true }, { field: 'contactName', title: 'Contact Name' } ];

const [columns, setColumns] = useState(initialColumns);

const toggleCustomer = () => setColumns(cols => cols.map(c => c.field === 'customerID' ? { ...c, hidden: !c.hidden } : c ) );

<Grid columns={columns} // if using a Grid API that emits column changes: onColumnChange={e => setColumns(cols => cols.map(c => c.field === e.field ? { ...c, ...e } : c ) ) } /> <button onClick={toggleCustomer}>Toggle Customer ID</button>

For convenience, I have updated the provided sample with the suggested approach so you can examine it at your end:

I hope the provided information will be helpul for you but let me know if I can help you any further on this.

Regards,
Vessy
Progress Telerik

Your perspective matters! Join other professionals in the State of Designer-Developer Collaboration 2025: Workflows, Trends and AI survey to share how AI and new workflows are impacting collaboration, and be among the first to see the key findings.
Start the 2025 Survey
Jie
Top achievements
Rank 3
Iron
Iron
Iron
commented on 08 Oct 2025, 01:24 PM

Hi Vessy,

We are trying to persist the GridColumnState. Based on your answer (if a field is set in GridColumnProps, then it can't be overridden by GridColumnState), we found a few inconsistencies:

- GridColumnState.hidden can override if GridColumnProps.hidden is set to false, .

- GridColumnState .title doesn't work, whether GridColumnProps.title is set or not.

- GridColumnState .width can always override GridColumnProps.width.

 

Thanks,

Jie

Vessy
Telerik team
commented on 10 Oct 2025, 11:27 AM

Hi, Jie,

Thank you for the detailed follow-up and for sharing your observations.

In general, if you’d like to update or persist the Grid’s column settings, it’s best to manage everything through the column state only. Mixing GridColumnProps and GridColumnState isn’t something we’ve tested very deeply, so the inconsistencies you’re seeing make sense. From a React standpoint, , having one “source of truth” (in this case, the column state) helps keep the behavior predictable and easier to maintain.

Could you please confirm whether your desired scenario would work if everything were handled purely through the column state?
That will help us better understand if there’s a gap we need to address or if your case requires both props and state together.

We’ll also review this on our side and check whether it’s something we should log for further improvement.

Jie
Top achievements
Rank 3
Iron
Iron
Iron
commented on 10 Oct 2025, 12:56 PM

The state's title field doesn't work. Please see the updated example:

https://codesandbox.io/p/sandbox/stoic-wildflower-wn4lzn

 

Vessy
Telerik team
commented on 14 Oct 2025, 09:00 AM

Hey, Jie,

This is expected, as the columns are defined through the columns object, but not the state. Updating the sample as follows will allow you to update successfully all props of the columns through their state:

      <Grid
        style={{ height: "700px" }}
        data={orders}
        columnsState={columnsState}
        onColumnsStateChange={onColumnsStateChange}
      >
        {columnsState.map((c) => {
          return <GridColumn {...c} key={c.field} />;
        })}
        <GridToolbar>
          <Button onClick={onHide}>Hide</Button>
        </GridToolbar>
      </Grid>

Tags
Grid
Asked by
Jie
Top achievements
Rank 3
Iron
Iron
Iron
Answers by
Vessy
Telerik team
Share this question
or