Implementing Single-Expand Mode for Detail Rows in KendoReact Grid

Updated on Mar 31, 2026

Environment

Product	KendoReact Grid
Version	Current

Description

The KendoReact Grid does not support a single-expand mode for detail rows out of the box. Single-expand mode ensures that expanding one row automatically collapses any previously expanded rows. Implementing this feature requires custom logic.

This knowledge base article also answers the following questions:

• How can I collapse all other rows when expanding one in the KendoReact Grid?
• How do I create single-expand functionality for Grid detail rows in KendoReact?
• Is it possible to manage detail row expansion programmatically in KendoReact Grid?

Solution

To implement single-expand mode for detail rows in the KendoReact Grid, follow these steps:

1. Track the expanded state of detail rows using a state hook.
2. Implement a method to identify and manage the expanded row.
3. Use the onExpandChange event of the Grid to update the expanded state.

tsx

  function getNewOrChangedEntries(
    oldObj: Record<string, any>,
    newObj: Record<string, any>
  ) {
    return Object.fromEntries(
      Object.entries(newObj).filter(([key, value]) => oldObj[key] !== value)
    );
  }

  const handleDetailExpandChange = (event: GridDetailExpandChangeEvent) => {
    const diff = getNewOrChangedEntries(detailExpand, event.detailExpand);

    setDetailExpand(diff);
  };

Change Theme

Theme

Loading ...

See Also

• KendoReact Grid Documentation
• Grid Detail Rows
• Grid Events
• StackBlitz Example