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.
| Maria Anders | Alfreds Futterkiste | Berlin | Germany |
| Ana Trujillo | Ana Trujillo Emparedados y helados | México D.F. | Mexico |
| Antonio Moreno | Antonio Moreno Taquería | México D.F. | Mexico |
| Thomas Hardy | Around the Horn | London | UK |
| Christina Berglund | Berglunds snabbköp | Luleå | Sweden |
| Hanna Moos | Blauer See Delikatessen | Mannheim | Germany |
| Frédérique Citeaux | Blondesddsl père et fils | Strasbourg | France |
| Martín Sommer | Bólido Comidas preparadas | Madrid | Spain |
| Laurence Lebihan | Bon app' | Marseille | France |
| Elizabeth Lincoln | Bottom-Dollar Markets | Tsawassen | Canada |
<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>
<SettingsPager NumericButtonCount="6"></SettingsPager>
</dx:BootstrapGridView>
function onFocusedRowChanged(s, e) {
$("#focusedRowLabel").html("Focused row index: " + s.GetFocusedRowIndex());
}
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.
<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" />
<SettingsPager NumericButtonCount="6"></SettingsPager>
</dx:BootstrapGridView>
function onSelectionGridViewAction(s, e) {
$("#selectionLabel").html("Total rows selected: " + s.GetSelectedRowCount());
}
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.
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
<SettingsBehavior AllowSelectSingleRowOnly="true" AllowSelectByRowClick="true" />
<Columns>
<dx:BootstrapGridViewCommandColumn ShowSelectCheckbox="True" />
<dx:BootstrapGridViewDataColumn FieldName="ContactName" />
<dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
<dx:BootstrapGridViewDataColumn FieldName="City" />
<dx:BootstrapGridViewDataColumn FieldName="Country" />
</Columns>
<SettingsPager NumericButtonCount="6"></SettingsPager>
</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.
<div class="mb-3">
<dx:BootstrapButton ClientInstanceName="btnSelectAllRows" Text="Select all rows" runat="server" ClientSideEvents-Click="onSelectAllRowsClick" AutoPostBack="false" />
<dx:BootstrapButton ClientInstanceName="btnSelectAllRowsOnPage" Text="Select all rows on page" runat="server" ClientSideEvents-Click="onSelectAllRowsOnPageClick" AutoPostBack="false" />
<dx:BootstrapButton ClientInstanceName="btnClearSelection" Text="Clear selection" runat="server" ClientSideEvents-Click="onClearSelectionClick" AutoPostBack="false" />
</div>
<span id="info4" class="badge bg-secondary demo-label"></span>
<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" />
<dx:BootstrapGridViewDataColumn FieldName="ContactName" />
<dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
<dx:BootstrapGridViewDataColumn FieldName="City" />
<dx:BootstrapGridViewDataColumn FieldName="Country" />
</Columns>
<SettingsPager NumericButtonCount="6"></SettingsPager>
</dx:BootstrapGridView>
protected void GridViewSelectionAPI_CustomJSProperties(object sender, ASPxGridViewClientJSPropertiesEventArgs e) {
e.Properties["cpVisibleRowCount"] = GridViewSelectionAPI.VisibleRowCount;
}
function onSelectAllRowsClick() {
grid.SelectRows();
}
function onSelectAllRowsOnPageClick() {
grid.SelectAllRowsOnPage();
}
function onClearSelectionClick() {
grid.UnselectRows();
}
function onUpdateSelection(s, e) {
btnSelectAllRows.SetEnabled(s.GetSelectedRowCount() < s.cpVisibleRowCount);
btnClearSelection.SetEnabled(s.GetSelectedRowCount() > 0);
btnSelectAllRowsOnPage.SetEnabled(s.GetSelectedKeysOnPage().length < s.GetVisibleRowsOnPage());
$("#info4").html("Total rows selected: " + s.GetSelectedRowCount());
}