How to add selection to data rows of each group while expanding its CaptionSummaryRow in WinRT Grid?

2 mins read

SfDataGrid allows you to enable Grouping, by setting the AllowGrouping property at SfDataGrid or Column level. Each group contains its own GroupCaptionRow and you can get the underlying records by expanding it.

The following screenshot displays two levels of grouped columns in SfDataGrid.

Figure 1 : Default structure of Grouping and its elements

By default, the selection is maintained in CaptionSummaryRow when the group is expanded or collapsed. You can customize and maintain the selection in its underlying records also, while expanding the corresponding group.

Using the GroupExpanded event, you can process the selection to its underlying records of each group. The following code example illustrates, how to wire the GroupExpanded event in SfDataGrid.

public MainPage()
{
this.InitializeComponent();
//GroupExpanded event is wired here.
this.sfdatagrid.GroupExpanded += sfdatagrid_GroupExpanded;
}

In the above code, GroupExpanded event is fired when the group is expanded and you can get the corresponding group and its underlying records from the GroupExpanded event argument as illustrated in the following code example.

void sfdatagrid_GroupExpanded(object sender, Syncfusion.UI.Xaml.Grid.GroupChangedEventArgs e)
{
var group = e.Group as Group;
//Check whether the group is null or not
if (group != null)
{
//Process selection by checking group and its record
CheckGroup(group);
}
}

The GroupExpanded contains the following argument,

Sender: The Sender is SfDataGrid.

GroupChangedEventArgs: GroupChangedEventArgs class contains Group property that provides the currently expanded group.

In the above code example, you can get the expanded group, from the GroupExpanded event argument. You can process the selection to CaptionSummaryRow of current group and its underlying records recursively by using CheckGroup() helper method as illustrated in the following code example.

private void CheckGroup(Group group)
{
//Check whether the group is null or not
if (group != null)
{
//Check whether the Group is null, means the next level contains records and it’s in expanded state
if (group.Groups == null && group.IsExpanded)
{
//Get the corresponding start index of record by getting its from DisplayElements .
var startindex = this.DataGrid.View.TopLevelGroup.DisplayElements.IndexOf(group as Group);
//Resolve the RowIndex of record
var startRowIndex = this.DataGrid.ResolveToRowIndex(startindex);
//Initialize end index of record
var endIndex=0;
//Process the selection to the total number of records in each group by getting its total record data
foreach (var rec in group.Records)
{
//Get the corresponding end index of record by getting it from DisplayElements .
endIndex = this.DataGrid.View.TopLevelGroup.DisplayElements.IndexOf(rec);
}
//Resolve the row index of end index
var endRowIndex = this.DataGrid.ResolveToRowIndex(endIndex);
//Select the rows from corresponding start and end row index
this.DataGrid.SelectionController.SelectRows(startRowIndex, endRowIndex);
}
//Check whether the group is expanded
else if (group.IsExpanded)
{
//if more than one group is achieved ,you need to check those level and get records
foreach (var gr in group.Groups)
{
//Called recursively , to traverse it inner level of group
CheckGroup(gr);
//Maintain the selection in Caption Summary Row while the group is in expanded state .
//Get the corresponding start index of caption summary row by getting it from DisplayElements .
var startindex = this.DataGrid.View.TopLevelGroup.DisplayElements.IndexOf(group as Group);
//Resolve the RowIndex of caption summary row
var startRowIndex = this.DataGrid.ResolveToRowIndex(startindex);
//Get the corresponding end index of caption summary row by getting it from DisplayElements .
var endindex = this.DataGrid.View.TopLevelGroup.DisplayElements.IndexOf(gr as Group);
//Resolve the RowIndex of caption summary row
var endRowIndex = this.DataGrid.ResolveToRowIndex(endindex);
//Select the rows from corresponding start and end row index
this.DataGrid.SelectionController.SelectRows(startRowIndex, endRowIndex);
}
}
}
}

In the above code example, check whether the next level of parent group contains records or sub groups. When the next level is records, the selection is added by using the SelectRows (int StartIndex, int EndIndex) method. Set the current CaptionSummaryRow index as startRowIndex and the end of record collection as endRowIndex. The startRowIndex and endRowIndex is resolved from record index of CaptionSummaryRow and records.

When the next level contains group ,the CheckGroup() method is called recursively until the records are found and the selection is processed by passing the parent group index as startRowIndex and end of sub groups as endRowIndex in SelectRows() method .

The following screenshot illustrates the customized selection of CaptionSummaryRow and Records when the group is expanded.