Expand only one detail row at a time

Updated on Dec 19, 2025

Environment

Product Version	8.1.1
Product	Progress® KendoReact Grid

Description

How can I expand only one detail row at a time?

Solution

This can be achieved by setting the expanded field to false for all other rows when one row is expanded in the onExpandChage event handler:

jsx

const expandChange = (event) => {
    const updatedData = data.map((item) => ({
        ...item,
        expanded: item.ProductID === event.dataItem.ProductID ? !event.dataItem.expanded : false
    }));
    setData(updatedData);
};

The following example showcases this approach in action:

Change Theme

Theme

Loading ...