Selection via Row Click

In addition to using check boxes to select individual rows, the Grid View control allows end-users to select rows with a simple mouse click. To enable this selection mode, set the SettingsBehavior.AllowSelectByRowClick property to true. Once set, clicking any row clears the previous selection and selects this row.

To select multiple rows, click the desired rows while holding down the Ctrl key. Clicking a row in this manner toggles its selected state and preserves the selection. To select contiguous rows, click the first row you wish to select, hold down the Shift key, and click the last row. You can continue to customize the selection by clicking individual rows while holding down the Ctrl key.



Contact NameCompany NameCityCountry
Maria AndersAlfreds FutterkisteBerlinGermany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
<dx:BootstrapGridView runat="server" DataSourceID="DataSource1" KeyFieldName="CustomerID">
    <SettingsBehavior AllowSelectByRowClick="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowSelectCheckbox="True" SelectAllCheckboxMode="Page" />
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
</dx:BootstrapGridView>

Selection via CheckBoxes

The Grid View control provides the capability to allow end-users to select rows using check boxes. To do this, add a command column to the grid and set its ShowSelectCheckBox property to true. The column will display check boxes within its cells. End-users can check or uncheck these check boxes to select or de-select the corresponding data rows.

The command column’s SelectAllCheckboxMode property allows you to specify the behavior of the Select All check box. This check box can either select all rows in the grid, or only on the current page. If the SelectAllCheckboxMode property is set to None, the Select All check box is not displayed.



Contact NameCompany NameCityCountry
Maria AndersAlfreds FutterkisteBerlinGermany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
<dx:BootstrapGridView runat="server" DataSourceID="DataSource2" KeyFieldName="CustomerID">
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowSelectCheckbox="True" SelectAllCheckboxMode="AllPages" />
        ...
    </Columns>
</dx:BootstrapGridView>

Single Row Only Mode

In the Single Row Only selection mode, the Grid View only allows one row to be selected at a time. To activate this mode, set the SettingsBehavior.AllowSelectSingleRowOnly property to true.

#Contact NameCompany NameCityCountry
Maria AndersAlfreds FutterkisteBerlinGermany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
<dx:BootstrapGridView runat="server" DataSourceID="DataSource3" KeyFieldName="CustomerID">
    <SettingsBehavior AllowSelectSingleRowOnly="true" AllowSelectByRowClick="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowSelectCheckbox="True" />
        ...
    </Columns>
</dx:BootstrapGridView>

Selection API

The Grid View control provides a client-side API allowing you to programmatically manipulate row selection and obtain information about currently selected rows. Use the following methods to manipulate row selection on the client.

  • SelectRows - allows you to select and deselect specified rows, or select all rows within the grid.
  • SelectRowsByKey - allows you to select and deselect row by their keys.
  • SelectAllRowsOnPage - allows you to select or deselect all rows displayed on the current page.
  • UnselectRows - deselects all rows, or the specified rows within the grid.

To respond to selection changes, handle the SelectionChanged event.



#Contact NameCompany NameCityCountry
Maria AndersAlfreds FutterkisteBerlinGermany
Ana TrujilloAna Trujillo Emparedados y heladosMéxico D.F.Mexico
Antonio MorenoAntonio Moreno TaqueríaMéxico D.F.Mexico
Thomas HardyAround the HornLondonUK
Christina BerglundBerglunds snabbköpLuleåSweden
Hanna MoosBlauer See DelikatessenMannheimGermany
Frédérique CiteauxBlondesddsl père et filsStrasbourgFrance
Martín SommerBólido Comidas preparadasMadridSpain
Laurence LebihanBon app'MarseilleFrance
Elizabeth LincolnBottom-Dollar MarketsTsawassenCanada
<dx:BootstrapGridView ID="GridView4" ClientInstanceName="gridView4" runat="server" DataSourceID="DataSource4" KeyFieldName="CustomerID"
    OnCustomJSProperties="GridView4_CustomJSProperties">
    <ClientSideEvents Init="onUpdateSelection" SelectionChanged="onUpdateSelection" EndCallback="onUpdateSelection" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowSelectCheckbox="True" />
        ...
    </Columns>
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code