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 cells and its headerCell 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 [detailExpand, setDetailExpand] = React.useState({});- Create a function to toggle the expansion state of all detail rows.
<Grid
style={{
height: '550px'
}}
data={categories}
dataItemKey="CategoryID"
detail={DetailComponent}
detailExpand={detailExpand}
onDetailExpandChange={expand}
cells={{ headerCell: headerCellRender }}
>- In the
cellsand itsheaderCellprop, add the custom content for the expand column and use theexpandfunction to control the expansion state.
Below is a demonstration of implementing the 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.