Grid View for ASP.NET Web Forms - How to select/deselect all rows in a group when data is grouped by one column

This example demonstrates how to allow users to add/remove all rows in a group to/from selection. Note that this technique works only when Grid View data is grouped by one column.

Overview

Follow the steps below to allow users to select or deselect all rows in a group:

1. Create the Grid View control, populate it with columns, and bind the control to a data source. To group data by a column, specify the column's GroupIndex property. The Grid View's GroupSummary property allows you to display summary items in group rows:

   <dx:ASPxGridView ID="Grid" runat="server" DataSourceID="GridDataSource" KeyFieldName="ProductID"
   ClientInstanceName="Grid" OnCustomCallback="Grid_CustomCallback" OnHtmlRowPrepared="Grid_HtmlRowPrepared">
       <Columns>
           <dx:GridViewDataComboBoxColumn Caption="Category Name" FieldName="CategoryID" GroupIndex="0">
               <PropertiesComboBox ValueField="CategoryID" TextField="CategoryName" 
                   DataSourceID="CategoryDataSource" ValueType="System.Int32" />
           </dx:GridViewDataComboBoxColumn>
           <!-- ... -->
       </Columns>
       <GroupSummary>
           <dx:ASPxSummaryItem FieldName="CategoryName" SummaryType="Count" />
       </GroupSummary>
       <!-- ... -->
   </dx:ASPxGridView>
   <asp:AccessDataSource ID="GridDataSource" runat="server" DataFile="~/App_Data/nwind.mdb"
       SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued] FROM [Products]" />
   <asp:AccessDataSource ID="CategoryDataSource" runat="server" DataFile="~/App_Data/nwind.mdb"
       SelectCommand="SELECT * FROM [Categories]" />

2. Place the Check Box and Label controls in the Grid View's GroupRowContent template. Implement two-way data binding between the label's Text property and group row markup:

   <dx:ASPxGridView ID="Grid" runat="server" DataSourceID="GridDataSource" ClientInstanceName="Grid">
       <!-- ... -->
       <Templates>
           <GroupRowContent>
               <dx:ASPxCheckBox ID="checkBox" runat="server" />
               <dx:ASPxLabel ID="CaptionText" runat="server" Text='<%# GetCaptionText(Container) %>' />
           </GroupRowContent>
       </Templates>
   </dx:ASPxGridView>

   protected string GetCaptionText(GridViewGroupRowTemplateContainer container) {
       string captionText = !string.IsNullOrEmpty(container.Column.Caption) ? container.Column.Caption : container.Column.FieldName;
       return string.Format("{0} : {1} {2}", captionText, container.GroupText, container.SummaryText);
   }

3. Handle the Grid View control's HtmlRowPrepared event. In the event handler, access the current group row's check box and specify its Checked property. Set the CheckedChanged event of the check box to a function that sends the visible index of the group row and the check state of the check box as callback parameters to the server:

   protected void Grid_HtmlRowPrepared(object sender, ASPxGridViewTableRowEventArgs e) {
       if(e.RowType == GridViewRowType.Group) {
           ASPxCheckBox checkBox = Grid.FindGroupRowTemplateControl(e.VisibleIndex, "checkBox") as ASPxCheckBox;
           if(checkBox != null) {
               checkBox.ClientSideEvents.CheckedChanged = string.Format("function(s, e){{ Grid.PerformCallback('{0};' + s.GetChecked()); }}", e.VisibleIndex);
               checkBox.Checked = GetChecked(e.VisibleIndex);
           }
       }
   }
   
   protected bool GetChecked(int visibleIndex) {
       for(int i = 0; i < Grid.GetChildRowCount(visibleIndex); i++) {
           bool isRowSelected = Grid.Selection.IsRowSelectedByKey(Grid.GetChildDataRow(visibleIndex, i)["ProductID"]); 
           if(!isRowSelected)
               return false;
       }
       return true;
   }

4. Handle the Grid View's CustomCallback event to process the callback. Call the Grid View's GetChildDataRow method to get a data row that belongs to the current group. Pass the data row's key and the check state of the checkbox to the SetSelectionByKey method to select or deselect this row:

   protected void Grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) {
       string[] parameters = e.Parameters.Split(';');
       int index = int.Parse(parameters[0]);
       bool isGroupRowSelected = bool.Parse(parameters[1]);
       for(int i = 0; i < Grid.GetChildRowCount(index); i++) {
           DataRow row = Grid.GetChildDataRow(index, i);
           Grid.Selection.SetSelectionByKey(row["ProductID"], isGroupRowSelected);
       }
   }

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Group Data
• Callbacks

More Examples

• Grid View for ASP.NET MVC - How to select/deselect all rows in a group
• Grid Lookup for ASP.NET Web Forms - How to select/deselect all rows in a group