Focused Row

When the SettingsBehavior.AllowFocusedRow is set to true, one of the rows in the Grid View control is focused. You can use this feature in multiple ways, for example, to display additional information for the focused row.

An end-user can move focus to another row by clicking it. Handle the FocusedRowChanged event to respond to changing row focus.

You can programmatically change row focus using the following API:

Set the focused row index to -1 on the client or server-side to reset a focused row.

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="CustomersDataSource" KeyFieldName="CustomerID">
    <SettingsBehavior AllowFocusedRow="true" />
    <ClientSideEvents FocusedRowChanged="onFocusedRowChanged" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
</dx:BootstrapGridView>

Selection

The Grid View control allows end-users to select rows using check boxes or a row click if this functionality is enabled.

To show selection checkboxes, add a command column to the grid and set its ShowSelectCheckBox property to true.

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

Set the SettingsBehavior.AllowSelectByRowClick property to true to enable row selection via mouse click. 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="CustomersDataSource" KeyFieldName="CustomerID">
    <SettingsBehavior AllowSelectByRowClick="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowSelectCheckbox="True" SelectAllCheckboxMode="AllPages" />
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
    </Columns>
    <ClientSideEvents Init="onSelectionGridViewAction" SelectionChanged="onSelectionGridViewAction" EndCallback="onSelectionGridViewAction" />
</dx:BootstrapGridView>

Single Row Selection

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.

Select checkboxes in this mode will be rendered as radio buttons. The Shift and Ctrl keys do not have an effect.

#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="CustomersDataSource" 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 the currently selected rows.

The GridView.Selection object represents an API to manipulate selection on the server-side.

#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="GridViewSelectionAPI" ClientInstanceName="grid" runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID"
    OnCustomJSProperties="GridViewSelectionAPI_CustomJSProperties">
    <ClientSideEvents Init="onUpdateSelection" SelectionChanged="onUpdateSelection" EndCallback="onUpdateSelection" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowSelectCheckbox="True" />
        ...
    </Columns>
</dx:BootstrapGridView>
Screen Size
Color Themes
Demo QR Code