Adding a Mass Expand Header in a Master-Detail Grid
Environment
| Product Version | 8.2.0 |
| Product | Progress® KendoReact Grid |
Description
In a master-detail grid setup, there might be a need to add a header cell that allows users to expand or collapse all detail rows at once. This feature enhances user interaction by providing a quick way to view or hide detailed information related to each master row.
This KB article also answers the following questions:
- How do you add a header for mass expanding in a master-detail grid?
- What is the method to collapse all details in a KendoReact Grid?
- Can you toggle expansion of all detail rows from a single header in a React data grid?
Solution
To add a header cell with mass expand/collapse functionality in a KendoReact Grid, utilize the headerCellRender prop. This prop allows for custom content rendering in header cells. By identifying the expand column using its field value, you can implement a control to expand or collapse all detail rows.
Implement a state variable to keep track of the expansion state. Use this variable to toggle the expansion of all detail rows dynamically:
- Initialize a state variable to track the mass expansion state.
const [massExpanded, setMassExpanded] = React.useState(false);- Create a function to toggle the expansion state of all detail rows.
const expand = () => {
categories.map((item) => {
const expandEvent = {
value: !massExpanded,
dataItem: item
};
expandChange(expandEvent);
});
setMassExpanded(!massExpanded);
};- In the
headerCellRenderprop, add the custom content for the expand column and use theexpandfunction to control the expansion state.
Below is a demonstration of implementing the mass expand header cell in a master-detail grid setup:
This approach allows users to easily expand or collapse all detail rows in the grid, improving the interaction and data visibility within the application.