The DevExpress Bootstrap Controls Suite uses the data-toggle attribute to assign actions to DOM elements displayed within complex controls declaratively. In your applications, you can use the data-toggle attribute to assign one of the predefined actions to a control displayed within a template.
This document provides information on possible values of the data-toggle attribute used by editors displayed within various visual elements of the Grid View control. All described values are grouped by a Grid View control’s visual element in which they have an effect.
In Column Headers
Attribute Value |
Description |
gridview-column-sort |
Clicking the control sorts the grid by values of the current column. |
gridview-column-filterpopup |
Clicking the control invokes the Header Filter popup. |
In Group Rows
Attribute Value |
Description |
gridview-grouprow-rows |
Clicking the control expands/collapses the current group. |
In Data Rows
Attribute Value |
Description |
gridview-datarow-details |
Clicking the control shows/hides the detail row. |
gridview-datarow-parentgroup |
Hovering the control invokes a popup with information about the parent group (if the group header is on a previous page). |
gridview-datarow-edit |
Initiates editing of the current row (similar to the Edit button). |
gridview-datarow-delete |
Deletes the current row (similar to the Delete button). |
gridview-datarow-recover |
In the batch edit mode, recovers a deleted row (similar to the Recover button). |
gridview-datarow-select |
Selects the current row (similar to the Select button). |
gridview-datarow-selecteditor |
The editor acts like a Select checkbox. The attribute should be set to the root element of a BootstrapCheckBox. |
Attribute Value |
Description |
gridview-filter-ok |
Clicking the control closes the popup and applies the specified filtering settings. |
gridview-filter-cancel |
Clicking the control closes the popup without applying the specified settings. |
In Any Grid View Part
Attribute Value |
Description |
gridview-savechanges |
In the batch editing mode saves changes to the server (similar to the Save button). |
gridview-cancelchanges |
In the batch edit mode cancels all changes made to grid date (similar to the Cancel button). |
gridview-newrow |
Adds a new row and initiates its editing. |
Example
This example demonstrates how to use the data-toggle attribute to declaratively assign actions to controls displayed within the Grid View’s templates.
<dx:BootstrapGridView runat="server" KeyFieldName="CustomerID" DataSourceID="DataSource3">
<Columns>
<dx:BootstrapGridViewDataColumn FieldName="CompanyName">
<DataItemTemplate>
<%# Eval("CompanyName") %>
<button type="button" class="btn btn-link" data-toggle="gridview-datarow-edit">
<span class="fa fa-pencil"></span>
</button>
<button type="button" class="btn btn-link" data-toggle="gridview-datarow-delete">
<span class="fa fa-trash"></span>
</button>
</DataItemTemplate>
</dx:BootstrapGridViewDataColumn>
...
</Columns>
<Settings ShowTitlePanel="true" />
<Templates>
<TitlePanel>
Customers
<button type="button" class="btn btn-link" data-toggle="gridview-newrow">
<span class="fa fa-plus"></span>
</button>
</TitlePanel>
</Templates>
</dx:BootstrapGridView>
An image below demonstrates the result.
See Also