Master/Detail: Operations across all detail grids. (filter, expand, collapse, save state, quick filter)

Persisting state across all detail grids.

The example below shows how to maintain a column's state between detail grids.

You can observe this by: 

1. Expand one detail grid.
2. Modify any of the column state by sorting or changing a column width.
3. Press the save button.

The next detail grid opened will look and behave the same.

https://next.plnkr.co/edit/XrPSPWWzyPBmGbJK

 

Expand/Collapse all detail grids

The example below shows how to expand or collapse all details grids using setExpanded.

https://next.plnkr.co/edit/Cr7eSn8b0MqDndia

Filtering across detail grids

This example applies the criteria in the search field across both master and detail grids such that a match will only be returned if the value exists in both the master and detail grid. 

For example, search for '000'. 

https://next.plnkr.co/edit/LTTGdyQKKOAGLmmb

Apply Quick Filter through all the detail grids

Using the quick filter the example below uses our Master/Detail feature to show how the quick filter can be applied to search child grids too.

https://plnkr.co/edit/2qwKis7aBZcRraIAR1RX?p=preview

 

Apply Quick Filter to Master and Detail row when either one matches search

This examples searches for matching criteria in both master and detail grids such that if the match exists in master OR detail, it will count as a match. 

Vanilla JS: https://plnkr.co/edit/Ab0WS2yAaxfD4EyC

Angular: https://plnkr.co/edit/IRkNRgbejf60muID

Apply Quick Filter to Master First and then Detail - if master does not match

This example searches for matching criteria in both master and detail grids.

It will first check if the criteria match with anything in the master grid, and return the whole detail grid.

If the above is not met, it will check for matches in the detail grid and return specific detail rows. 

https://next.plnkr.co/edit/8vjLuwRxjumwT7IV

Synchronize column visibility across master and all detail grids

This example synchronizes the hiding/showing of columns. It relies on the onColumnVisible event to figure out what columns need to be toggled across all details.

https://plnkr.co/edit/z8MXfC7RZt1IFe2T