How to programatically expand/collapse grouped rows, one at a time

[Eric Nguyen]

I have a button click event that expand all groups and collapses all groups of a SfDataGrid. I am looking to update this method that controls grouped rows such that, when all groups are expanded (i.e. grouped columns), it collapses one grouping level at a time starting from the deepest level (bottom-up), and when all groups are collapsed, it expands one goruping level at a time starting from the top (top-down), instead of using the built-in ExpandAllGroup/CollapseAllGroup behavior. How do I go about implementing that?

[Senthilkumar Ranganathan]

Hi Eric Nguyen,

We have analyzed the reported scenario and understand your requirement to expand or collapse grouped rows one at a time.

To achieve this, we have implemented a customization using a TextBox and Button click. You can specify the group level in the TextBox and click the Expand Group At or Collapse Group At button. This customization uses the SfDataGrid.ExpandGroup and SfDataGrid.CollapseGroup methods, which expand or collapse the specific group provided. Based on this, we looped through the groups and applied the customization.

Additionally, the SfDataGrid.ExpandGroupsAtLevel and SfDataGrid.CollapseGroupsAtLevel methods are available to expand or collapse all groups at a specified level. Please note that these methods will affect all group rows at the mentioned level in the DataGrid.

UG Link: Programmatically Expand or Collapse the Group

Code Snippet for Expand/Collapse grouped row one at a time:

//Expanding the grouped row.

private static void ExpandGroupToChild(SfDataGrid grid, Group start)

{

    var current = start;

    while (current != null)

    {

        grid.ExpandGroup(current);

        if (current.Groups == null || current.Groups.Count == 0)

            break;

        current = current.Groups[0] as Group;

    }

}

//Collapsing the grouped row.

private static void CollapseGroupToChild(SfDataGrid grid, Group start)

{

    var current = start;

    var chain = new List<Group>();

    while (current != null)

    {

        if (current.Groups == null || current.Groups.Count == 0)

        {

            chain.Add(current);

            break;

        }

        chain.Add(current);

        current = current.Groups[0] as Group;

    }

    for (int i = chain.Count - 1; i >= 0; i--)

        grid.CollapseGroup(chain[i]);

}

GIF Illustration:

Note: The customization provided is based on our understanding. You can also customize the expand and collapse functionality of grouped rows using our methods. If your requirement differs, please share more details along with an image or video reference. We will be happy to assist you further.

Find the sample demo in the attachment.

Please let us know if you need any additional assistance.

Regards,
Senthilkumar Ranganathan.

Attachment: SfDataGridDemo_348751ac.zip