Kinetic grid groups expand all/collapse all

Hey all, long time reader, first-ish time posting. I came up with this solution while trying to make the Kinetic/browser based version of Epicor work more like classic for grouping in grids (specifically in Fulfillment workbench, but it should work anywhere) where, in classic, you use to be able to expand or collapse all of the grouped rows in a grid. It is based on the Kendo grid behavior here: Expand and Collapse All Detail Rows - Kendo UI for jQuery Data Grid - Kendo UI for jQuery.
Essentially, you can setup grouping on the data in the grid and then add custom action data or buttons and events for expand/collapse all. In the event related to the action data, you’ll need to set 2 properties on the grid object, gridModel.groupsInitiallyExpanded to true or false depending on if you want to expand or collapse and also set gridModel.expandedGroupRowsKey to null either way.

image
image

Thanks to Jose for inspiring me to post this at the EpiUsers event.

12 Likes

Bookmarked. Thank you!

Simple and works very well. Thank you for posting.

Love it! Will be doing this.

Thanks for sharing, I’ll give it whirl it may help with a few of the dashboards I need to uplift

EDIT: I had to post to find the answer right away. I used the wrong ID. I must use the panel card id (POSugg_pcgLandingPage) instead of the grid ID because it won’t recognize the gridModel otherwise. THANKS a lot for this solution

Anyone managed to make it work in a landing page for example the PO Suggestions grid ? I followed the tutorial on here and put the actions in a button click but it doesn’t work. Also tried to trigger the event on form load

Tried with either the grid ID or the guid