Toolbar

The Grid View control can display toolbars aggregating commands related to the Grid View and its data.

All grid toolbars are available through the Toolbars collection property, in which each toolbar is a BootstrapGridViewToolbar object. Each item on the toolbar is represented by a BootstrapGridViewToolbarItem object available through the toolbar’s BootstrapGridViewToolbar.Items collection property.

The BootstrapGridViewToolbarItemBase.Command property allows you to associate a toolbar item with one of the built-in commands or custom logic implemented in the Grid View’s server-side or client-side ToolbarItemClick event handler.

Refer to the BootstrapGridViewToolbarCommand documentation topic to view the full list of available commands.

Drag a column header here to group by that column
Company Name Contact Name Country City Phone
Alfreds FutterkisteMaria AndersGermanyBerlin030-0074321
Ana Trujillo Emparedados y heladosAna TrujilloMexicoMéxico D.F.(5) 555-4729
Antonio Moreno TaqueríaAntonio MorenoMexicoMéxico D.F.(5) 555-3932
Around the HornThomas HardyUKLondon(171) 555-7788
Berglunds snabbköpChristina BerglundSwedenLuleå0921-12 34 65
Blauer See DelikatessenHanna MoosGermanyMannheim0621-08460
Blondesddsl père et filsFrédérique CiteauxFranceStrasbourg88.60.15.31
Bólido Comidas preparadasMartín SommerSpainMadrid(91) 555 22 82
Bon app'Laurence LebihanFranceMarseille91.24.45.40
Bottom-Dollar MarketsElizabeth LincolnCanadaTsawassen(604) 555-4729
<dx:BootstrapGridView ID="GridViewToolbar" runat="server" DataSourceID="GridViewToolbarDataSource" KeyFieldName="CustomerID">
    <Toolbars>
        <dx:BootstrapGridViewToolbar>
            <Items>
                <dx:BootstrapGridViewToolbarItem Command="New" />
                <dx:BootstrapGridViewToolbarItem Command="Edit" />
                <dx:BootstrapGridViewToolbarItem Command="Delete" />
                <dx:BootstrapGridViewToolbarItem Command="Refresh" BeginGroup="true" />
                <dx:BootstrapGridViewToolbarItem Command="ClearGrouping" />
                <dx:BootstrapGridViewToolbarItem Command="ClearSorting" />
                <dx:BootstrapGridViewToolbarItem Command="ShowGroupPanel" BeginGroup="true" />
                <dx:BootstrapGridViewToolbarItem Command="ShowSearchPanel" />
            </Items>
        </dx:BootstrapGridViewToolbar>
    </Toolbars>
    <SettingsBehavior AllowFocusedRow="true" />
    <Settings ShowGroupPanel="true" />
    <SettingsDataSecurity AllowEdit="true" AllowInsert="true" AllowDelete="true" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Phone" />
    </Columns>
</dx:BootstrapGridView>

Custom Toolbar Items

You can provide custom logic for a toolbar item by setting the BootstrapGridViewToolbarItemBase.Command property to Custom. Handle the client-side ToolbatItemClick event to process a toolbar item click.

If you also want to perform server-side processing, set the processOnServer client event argument to true, which forces a callback after the client-side processing is finished.

You can specify that the server-side processing should be initiated by a postback rather than a callback by setting the usePostBack client event argument to true.

Company Name Contact Name City Phone
Country: Argentina
Country: Austria
 Ernst HandelRoland MendelGraz7675-3425
 Piccolo und mehrGeorg PippsSalzburg6562-9722
Country: Belgium
Country: Brazil
Country: Canada
Country: Denmark
Country: Finland
Country: France
<dx:BootstrapGridView ID="GridViewCustomToolbar" runat="server" DataSourceID="CustomersDataSource" OnToolbarItemClick="GridViewCustomToolbar_ToolbarItemClick">
    <ClientSideEvents ToolbarItemClick="onToolbarItemClick" />
    <Toolbars>
        <dx:BootstrapGridViewToolbar>
            <Items>
                <dx:BootstrapGridViewToolbarItem Command="ExportToPdf" />
                <dx:BootstrapGridViewToolbarItem Command="ExportToDocx" />
                <dx:BootstrapGridViewToolbarItem Command="ExportToXls" />
                <dx:BootstrapGridViewToolbarItem BeginGroup="true" Name="CustomExportToXLS" Text="Custom Export to XLS(WYSIWYG)" />
            </Items>
        </dx:BootstrapGridViewToolbar>
    </Toolbars>
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" GroupIndex="0" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Phone" />
    </Columns>
    <SettingsExport EnableClientSideExportAPI="true" ExcelExportMode="DataAware" />
</dx:BootstrapGridView>
protected void GridViewCustomToolbar_ToolbarItemClick(object source, BootstrapGridViewToolbarItemClickEventArgs e) {
    switch(e.Item.Name) {
        case "CustomExportToXLS":
            GridViewCustomToolbar.ExportXlsToResponse(new XlsExportOptionsEx { ExportType = ExportType.WYSIWYG });
            break;
        default:
            break;
    }
}
function onToolbarItemClick(s, e) {
    switch (e.item.name) {
        case "CustomExportToXLS":
            e.processOnServer = true;
            e.usePostBack = true;
            break;
    }
}

Customization Dialog

The Grid View’s customization dialog provides a UI aggregating all essential data shaping options in one place. The dialog is adaptive out of the box and is best suited for touch devices. The customization dialog includes the following tabs: Sorting, Grouping, Filtering and Column Chooser.

The SettingsCustomizationDialog property provides access to the customization dialog’s settings. Note that the customization dialog is disabled by default. To enable it, set the SettingsCustomizationDialog.Enabled property to true. Use the ShowSortingPage, ShowGroupingPage, ShowFilteringPage and ShowColumnChooserPage properties to disable or enable specific tabs.

You can display the customization dialog using one of the following approaches:

  • Call the ShowCustomizationDialog client method.
  • Create a toolbar item with the Command property set to ShowCustomizationDialog. An end-user can invoke the customization dialog by clicking this item.
Drag a column header here to group by that column
Order Date
Company Name
Country
City
Unit Price Discount
    
8/25/2015Alfreds FutterkisteGermanyBerlin$46.0025 %
8/25/2015Alfreds FutterkisteGermanyBerlin$18.0025 %
8/25/2015Alfreds FutterkisteGermanyBerlin$12.0025 %
10/3/2015Alfreds FutterkisteGermanyBerlin$44.000 %
10/13/2015Alfreds FutterkisteGermanyBerlin$10.000 %
10/13/2015Alfreds FutterkisteGermanyBerlin$18.000 %
1/15/2016Alfreds FutterkisteGermanyBerlin$55.000 %
1/15/2016Alfreds FutterkisteGermanyBerlin$13.0020 %
3/16/2016Alfreds FutterkisteGermanyBerlin$25.005 %
3/16/2016Alfreds FutterkisteGermanyBerlin$46.000 %
<dx:BootstrapGridView runat="server" KeyFieldName="OrderID" DataSourceID="CompaniesOrdersDataSource">
    <Settings ShowGroupPanel="true" ShowHeaderFilterButton="true" ShowFilterRow="true" ShowFilterRowMenu="true" />
    <SettingsCustomizationDialog Enabled="true" />
    <Columns>
        <dx:BootstrapGridViewDateColumn FieldName="OrderDate">
            <Settings AllowAutoFilter="False" />
        </dx:BootstrapGridViewDateColumn>
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName">
            <Settings AllowAutoFilter="False" />
        </dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="Country">
            <Settings AllowAutoFilter="False" />
            <SettingsHeaderFilter Mode="CheckedList"></SettingsHeaderFilter>
        </dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewDataColumn FieldName="City">
            <Settings AllowAutoFilter="False" />
            <SettingsHeaderFilter Mode="CheckedList"></SettingsHeaderFilter>
        </dx:BootstrapGridViewDataColumn>
        <dx:BootstrapGridViewTextColumn FieldName="UnitPrice" Width="100px">
            <PropertiesTextEdit DisplayFormatString="c" />
            <Settings AllowHeaderFilter="False" />
        </dx:BootstrapGridViewTextColumn>
        <dx:BootstrapGridViewTextColumn FieldName="Discount" Width="100px">
            <PropertiesTextEdit DisplayFormatString="p0" />
            <Settings AllowHeaderFilter="False" />
        </dx:BootstrapGridViewTextColumn>
    </Columns>
    <Toolbars>
        <dx:BootstrapGridViewToolbar Position="Top">
            <Items>
                <dx:BootstrapGridViewToolbarItem Command="ShowCustomizationDialog">
                </dx:BootstrapGridViewToolbarItem>
            </Items>
        </dx:BootstrapGridViewToolbar>
    </Toolbars>
</dx:BootstrapGridView>

Context Menu

The Grid View context menu is a popup menu displayed when an end-user right-clicks a grid element. The control provides different context menu types for the following elements: row, column header, footer, group footer, and group panel.

The SettingsContextMenu property provides access to the Grid View’s context menu settings. The SettingsContextMenu.Enabled property specifies the availability of all context menu types.

The following properties available through SettingsContextMenu control the menu availability of particular Grid View elements:

Server-Side Events:

Client-Side events:

  • ContextMenu – Fires after an end-user right clicks in the grid view. Handle this event to provide a custom context menu.
  • ContextMenuItemClick – Fires on the client when a context menu item has been clicked.
Product Name Quantity Per Unit Unit Price Units In Stock Discontinued
Category Name: Seafood (Min=$6.00, Max=$63.00)
Category Name: Produce (Min=$10.00, Max=$53.00)
 Longlife Tofu5 kg pkg.$10.004 
 Manjimup Dried Apples50 - 300 g pkgs.$53.0020 
 Rössle Sauerkraut25 - 825 g cans$46.0026
 Tofu40 - 100 g pkgs.$23.0035 
 Uncle Bob's Organic Dried Pears12 - 1 lb pkgs.$30.0015 
   Sum=$162.00  
Category Name: Meat/Poultry (Min=$7.00, Max=$124.00)
Category Name: Grains/Cereals (Min=$7.00, Max=$38.00)
Category Name: Dairy Products (Min=$3.00, Max=$55.00)
<dx:BootstrapGridView runat="server" ID="GridViewContextMenu" ClientInstanceName="Grid"
    DataSourceID="DataSourceContextMenu" KeyFieldName="ProductID"
    OnFillContextMenuItems="GridViewContextMenu_FillContextMenuItems"
    OnAddSummaryItemViaContextMenu="GridViewContextMenu_AddSummaryItemViaContextMenu"
    OnContextMenuItemClick="GridViewContextMenu_ContextMenuItemClick">
    <SettingsContextMenu Enabled="true" />
    <ClientSideEvents ContextMenuItemClick="function(s,e) { OnContextMenuItemClick(s, e); }" />
    <Columns>
        <dx:BootstrapGridViewTextColumn FieldName="ProductName" />
        <dx:BootstrapGridViewComboBoxColumn FieldName="CategoryID" Caption="Category Name" GroupIndex="0" SortOrder="Descending">
            <PropertiesComboBox DataSourceID="CategoriesDataSource" ValueType="System.Int32"
                ValueField="CategoryID" TextField="CategoryName" />
        </dx:BootstrapGridViewComboBoxColumn>
        <dx:BootstrapGridViewTextColumn FieldName="QuantityPerUnit" />
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitPrice">
            <PropertiesSpinEdit DisplayFormatString="c" DisplayFormatInEditMode="true" MinValue="0" MaxValue="60000" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewSpinEditColumn FieldName="UnitsInStock">
            <PropertiesSpinEdit MinValue="0" MaxValue="10000" />
        </dx:BootstrapGridViewSpinEditColumn>
        <dx:BootstrapGridViewCheckColumn FieldName="Discontinued">
            <PropertiesCheckEdit AllowGrayed="true" AllowGrayedByClick="false" />
        </dx:BootstrapGridViewCheckColumn>
    </Columns>
    <SettingsBehavior ConfirmDelete="true" />
    <Settings ShowFooter="true" ShowGroupPanel="true" ShowGroupFooter="VisibleIfExpanded" />
    <SettingsExport EnableClientSideExportAPI="true" ExcelExportMode="DataAware" />
    <TotalSummary>
        <dx:ASPxSummaryItem FieldName="UnitPrice" SummaryType="Sum" />
    </TotalSummary>
    <GroupSummary>
        <dx:ASPxSummaryItem FieldName="UnitPrice" SummaryType="Sum" ShowInGroupFooterColumn="UnitPrice" />
        <dx:ASPxSummaryItem FieldName="UnitPrice" SummaryType="Min" />
        <dx:ASPxSummaryItem FieldName="UnitPrice" SummaryType="Max" />
        <dx:ASPxSummaryItem FieldName="UnitPrice" SummaryType="Count" Visible="false" />
        <dx:ASPxSummaryItem FieldName="UnitPrice" SummaryType="Average" Visible="false" />
        <dx:ASPxSummaryItem FieldName="UnitPrice" SummaryType="Sum" Visible="false" />
    </GroupSummary>
</dx:BootstrapGridView>
protected void GridViewContextMenu_FillContextMenuItems(object sender, BootstrapGridViewContextMenuEventArgs e) {
    if(e.MenuType == GridViewContextMenuType.Rows) {
        var item = e.CreateItem("Export", "Export");
        item.BeginGroup = true;
        e.Items.Insert(e.Items.IndexOfCommand(GridViewContextMenuCommand.Refresh), item);
        item.Items.Add(e.CreateItem(GridViewContextMenuCommand.ExportToPdf));
        item.Items.Add(e.CreateItem(GridViewContextMenuCommand.ExportToRtf));
        item.Items.Add(e.CreateItem(GridViewContextMenuCommand.ExportToXls));
        item.Items.Add("Custom Export to XLS(WYSIWYG)", "CustomExportToXLS");
    }
}
protected void GridViewContextMenu_ContextMenuItemClick(object sender, BootstrapGridViewContextMenuItemClickEventArgs e) {
    var gridView = (ASPxGridView)sender;
    switch(e.Item.Name) {
        case "CustomExportToXLS":
            gridView.ExportXlsToResponse(new XlsExportOptionsEx { ExportType = ExportType.WYSIWYG });
            break;
    }
}
protected void GridViewContextMenu_AddSummaryItemViaContextMenu(object sender, BootstrapGridViewAddSummaryItemViaContextMenuEventArgs e) {
    if(e.SummaryItem.FieldName == "UnitsInStock" && e.SummaryItem.SummaryType == DevExpress.Data.SummaryItemType.Average)
        e.SummaryItem.ValueDisplayFormat = "{0:0.00}";
}
function OnContextMenuItemClick(sender, args) {
    if(args.item.name == "CustomExportToXLS") {
        args.processOnServer = true;
        args.usePostBack = true;
    }
}
Screen Size
Color Themes
Demo QR Code