Selection

• Jul 13, 2021
• 4 minutes to read

You can select grid rows by the user interface, or in code on client and server side.

Note

Row selection is not supported when cell merging is permitted.

Select Rows by UI

The ASPxGridView control provides the following user interface for row selection.

• Row click

  End-users can click rows to select them.

  

  How to enable: set the ASPxGridViewBehaviorSettings.AllowSelectByRowClick property to true.

  ASPX

  <dx:ASPxGridView ID="grid" runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID" ... >
       <SettingsBehavior AllowSelectByRowClick="true" />
       <Columns> 
              <dx:GridViewDataColumn FieldName="ContactName" />
              <dx:GridViewDataColumn FieldName="CompanyName" />
              <dx:GridViewDataColumn FieldName="City" />
              <dx:GridViewDataColumn FieldName="Country" />
       </Columns>
  </dx:ASPxGridView>
  

   

• Check box

  End-users can select check boxes to select the rows.

  

  How to enable: add a command column to the grid and set the column’s GridViewCommandColumn.ShowSelectCheckbox property to true.

  ASPX

  <dx:ASPxGridView ID="grid" runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID" ... >
       <Columns>
            <dx:GridViewCommandColumn ShowSelectCheckbox="True" />
            <dx:GridViewDataColumn FieldName="ContactName" />
            <dx:GridViewDataColumn FieldName="CompanyName" />
            <dx:GridViewDataColumn FieldName="City" />
            <dx:GridViewDataColumn FieldName="Country" />
       </Columns>
  </dx:ASPxGridView>
  

   

• Select All check box

  The Select All check box is displayed in a grid command column’s header and allows end-users to select all rows on the page (or all rows in the grid).

  

  How to enable: use the GridViewCommandColumn.SelectAllCheckboxMode property to define the Select All check box visibility and selection mode. You can set the property to the following values.

  • None – the Select All check box is not displayed.
  • Page – the Select All check box selects and deselects all rows on the current grid page.
  • AllPages – the Select All check box selects and deselects all grid rows (on all grid pages).
  ASPX

  <dx:ASPxGridView ID="grid" runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID" ... >
       <Columns>
            <dx:GridViewCommandColumn ShowSelectCheckbox="True" SelectAllCheckboxMode="Page" />
            ...
       </Columns>
  </dx:ASPxGridView>
  

   

• Select command

  End-users can click Select commands to select rows.

  

  How to enable: add a command column to the grid and set the column’s GridViewCommandColumn.ShowSelectButton property to true.

  ASPX

  <dx:ASPxGridView ID="grid" runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID" ... >
       <Columns>
            <dx:GridViewCommandColumn ShowSelectButton="True" />
            <dx:GridViewDataColumn FieldName="ContactName" />
            <dx:GridViewDataColumn FieldName="CompanyName" />
            <dx:GridViewDataColumn FieldName="City" />
            <dx:GridViewDataColumn FieldName="Country" />
       </Columns>
  </dx:ASPxGridView>
  

Single Row Selection

Set the ASPxGridViewBehaviorSettings.AllowSelectSingleRowOnly property to true to allow end-users to select a single row at a time.

ASPX

<dx:ASPxGridView ID="grid" runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID" ... >
     <SettingsBehavior AllowSelectSingleRowOnly="True" />
     ...
</dx:ASPxGridView>

If the ASPxGridViewBehaviorSettings.AllowSelectSingleRowOnly and GridViewCommandColumn.ShowSelectCheckbox properties are set to true, the grid displays radio buttons for selection.

Selection API

Server Member	Description
ASPxGridView.Selection	Gets the ASPxGridView’s selection.
ASPxGridBase.GetFilteredSelectedValues	Returns the values displayed in selected rows that match the filter criteria.
ASPxGridBase.GetSelectedFieldValues	Returns the values displayed in all selected rows.
ASPxGridBase.SelectionChanged	Fires after the selection has been changed.
GridViewStyles.SelectedRow	Gets the selected data rows style settings.

Client Member	Description
ASPxClientGridView.GetSelectedFieldValues	Returns the row values displayed within all selected rows.
ASPxClientGridView.GetSelectedKeysOnPage	Returns key values of selected rows displayed within the current page.
ASPxClientGridView.GetSelectedRowCount	Returns the number of selected rows.
ASPxClientGridView.IsRowSelectedOnPage	Indicates whether or not the specified row is selected within the current page.
ASPxClientGridView.SelectAllRowsOnPage	Allows you to select or deselect all rows displayed on the current page based on the parameter passed.
ASPxClientGridView.SelectRowOnPage	Selects or deselects the specified row displayed on the current page.
ASPxClientGridView.SelectRows	Selects or deselects the specified rows within the grid.
ASPxClientGridView.SelectRowsByKey	Selects or deselects the specified row in the grid.
ASPxClientGridView.SelectionChanged	Fires when a user selects a row.
ASPxClientGridView.UnselectAllRowsOnPage	Deselects all selected rows displayed on the current page.
ASPxClientGridView.UnselectFilteredRows	Deselects all grid rows that match the filter criteria currently applied to the grid.
ASPxClientGridView.UnselectRowOnPage	Deselects the specified row (if selected) displayed on the current page.
ASPxClientGridView.UnselectRows	Deselects the specified row (if selected) within the grid.
ASPxClientGridView.UnselectRowsByKey	Deselects the specified row displayed within the grid.

Example

This example demonstrates how to display a list of contact names selected in the grid.

ASPX

Selected values:
<dx:ASPxListBox ID="ASPxListBox1" ClientInstanceName="selList" runat="server" Height="250px" Width="100%" />
Selected count: <span id="selCount" style="font-weight: bold">0</span>
...
<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID" Width="100%">
     <Columns>
          <dx:GridViewCommandColumn ShowSelectCheckbox="true" />
          <dx:GridViewDataColumn FieldName="ContactName" />     
          <dx:GridViewDataColumn FieldName="CompanyName" />
          <dx:GridViewDataColumn FieldName="City" />
          <dx:GridViewDataColumn FieldName="Country" />
     </Columns>
     <ClientSideEvents SelectionChanged="grid_SelectionChanged" />
</dx:ASPxGridView>

JS

// The SelectionChanged event fires after the selection has been changed
function grid_SelectionChanged(s,e) {
     // The GetSelectedFieldValues method returns the row values displayed within all selected rows.
     s.GetSelectedFieldValues("ContactName",GetSelectedFieldValuesCallback);
}
function GetSelectedFieldValuesCallback(values) {
     selList.BeginUpdate();
     try {
          selList.ClearItems();
          for(var i=0;i<values.length;i++) {
               selList.AddItem(values[i]);
          }
     } finally {
          selList.EndUpdate();
     }
     // The client GetSelectedRowCount function returns the number of selected rows.
     document.getElementById("selCount").innerHTML=grid.GetSelectedRowCount();
}

Online Demos

• Using Checkboxes
• Using Row Clicks
• Select All Rows

Task-Based Help

• How to: Delete Selected Rows
• How to: Select Rows That Contain the Specified Value

Online Knowledge Base

Code Example: Disable check boxes used to multi-select records