• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Implement Custom Expand/Collapse Columns


ProductProgress® KendoReact


How can I have control over the expand/collapse column of the KendoReact Grid and be able to change or hide the Grid columns?


To modify the expand/collapse column of the Grid:

  1. Remove the onExpandChange event handler from the Grid
  2. Create a custom column that is bound to a custom expand field (different from the expandField set to the Grid).
  3. Show the icons conditionally within the custom cell.
  4. On click of the icons, trigger the onChange from the cell props, which will trigger the onItemChange event of the Grid
  5. Within the onItemChange of the Grid, when the field is the custom expand field, change the expanded field state

Following is an example demonstrating this approach:

View Source
Change Theme:

In this article

Not finding the help you need?