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