Implement Custom Expand/Collapse Columns

Environment

Description

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

Solution

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: