Expand All functionality for viewing detailed rows of KendoReact Grid

[Darshan]

I am using Kendo React grid along with detail rows (expand functionality)  which works well as per the example stated.

However i need to specify another explicit "Expand ALL" button that should open the detail view of all the rows in the result page.

I  tried few attempts but facing issues while binding  this new button state behavior with the "onExpandChange" and "onDataStatechange".

 

I am using pagination and filtering also in this grid. Can you please provide working example for this.

[Wissam]

Hello, Darshan,

You can expand all the rows by setting the `expanded` property of each data item to `true`. However, it is not possible to bind the button behavior to the onExpandChange as well as the onDataStateChange event which only handles the filter, group, sort, and page events.

On the other hand, you can call the `expandChange` function (which is the onExpandChange event handler) inside the Button's onClick handler if this is what you need. I applied this in the below demo and also added pagination and filtering to the Grid:

• https://stackblitz.com/edit/react-pgjcxy?file=app%2Fmain.jsx
  

If the above example does not match your use case scenario, could you please provide me more information on why you need to bind the expandAll behavior to the Grid expand and dataState change events so that I can assist you further?

Regards,
Wissam
Progress Telerik

[Darshan]

Thanks for the answer but i think i didnt state my requirements clearly.

I need a single button that will toggle (expand/collapse) based on either clicking the button and expanding/collapsing all rows.

Also if my page size for example is 5... and if i individually expand each row on the page..the button should intelligently switch to collapse all and vice a versa.

Can you ps provide a solution for this

 

[Wissam]

Hi, Darshan,

Basically, in order to make the button expand/collapse all the items, you can create a state variable and based on it set the `expanded` values to true or false in the `expandAll` function.

On the other hand, in order to expand/collapse all the items when the items of the current page are either all expanded or collapsed, you can set the expanded state based on the expanded values of the current page data (displayed data).

In the below example, I am getting the `displayedData` in the `dataStateChange` handler. Moreover, in the `expandAll` function, I am setting `allExpanded` to true when all items are expanded and `allCollapsed` to true in the opposite scenario. Based on their values, and only when one of them equals true, I am either setting all the items expanded state to true or false. When the items are not all expanded or collapsed, the button will toggle between expanding and collapsing based on the `toggle` state variable:

• https://stackblitz.com/edit/react-pgjcxy-bbcuac?file=app%2Fmain.jsx

I hope the above example will help you achieve what you need.

Regards,
Wissam
Progress Telerik

[Darshan]

thanks wissam

[Wissam]

You are welcome, Darshan!