Data-Toggle Attribute

• Nov 14, 2018
• 3 minutes to read

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.

In Header Filter Popup

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.

ASPX

<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.