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
Nancy | Davolio | Sales Representative | 12/8/1978 | Seattle | USA |
Andrew | Fuller | Vice President, Sales | 2/19/1965 | Tacoma | USA |
Janet | Leverling | Sales Representative | 8/30/1985 | Kirkland | USA |
Margaret | Peacock | Sales Representative | 9/19/1973 | Redmond | USA |
Steven | Buchanan | Sales Manager | 3/4/1955 | London | UK |
Michael | Suyama | Sales Representative | 7/2/1981 | London | UK |
Robert | King | Sales Representative | 5/29/1960 | London | UK |
Laura | Callahan | Inside Sales Coordinator | 1/9/1985 | Seattle | USA |
Anne | Dodsworth | Sales Representative | 1/27/1980 | London | UK |
<dx:BootstrapGridView ID="GridViewToolbar" runat="server" DataSourceID="GridViewToolbarDataSource" KeyFieldName="EmployeeID">
<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="FirstName" />
<dx:BootstrapGridViewDataColumn FieldName="LastName" />
<dx:BootstrapGridViewDataColumn FieldName="Title" />
<dx:BootstrapGridViewDataColumn FieldName="BirthDate" />
<dx:BootstrapGridViewDataColumn FieldName="City" />
<dx:BootstrapGridViewDataColumn FieldName="Country" />
</Columns>
</dx:BootstrapGridView>
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.
| Country: Argentina |
| Country: Austria |
| Ernst Handel | Roland Mendel | Graz | 7675-3425 |
| Piccolo und mehr | Georg Pipps | Salzburg | 6562-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 XlsExportOptions());
break;
default:
break;
}
}
function onToolbarItemClick(s, e) {
switch (e.item.name) {
case "CustomExportToXLS":
e.processOnServer = true;
e.usePostBack = true;
break;
}
}
The BootstrapGridViewToolbar object allows you to add adaptive toolbars to different Grid View parts (inside the grid's header/footer, outside the Panel element).
Toolbar Position
The following table lists the properties that control the toolbar's position:
|
Position = Top |
Position = Bottom |
ShowInsidePanel = true |
The toolbar is displayed in the PanelHeader (<div class="card-header">...</div> ) |
The toolbar is displayed in the PanelFooter (<div class="card-footer">...</div> ) |
ShowInsidePanel = false |
The toolbar is displayed above the Panel element (<div class="card">...</div> ) |
The toolbar is displayed below the Panel element (<div class="card">...</div> ) |
Note: If a Grid View has one or more toolbars in the the PanelHeader, the Grid View's title is displayed inside the first toolbar. Otherwise, the title is displayed above the Grid View.
Toolbar Adaptivity
The following properties control how the toolbar responds when the container's width changes:
Drag a column header here to group by that column
Nancy | Davolio | Sales Representative | 12/8/1978 | Seattle | USA |
Andrew | Fuller | Vice President, Sales | 2/19/1965 | Tacoma | USA |
Janet | Leverling | Sales Representative | 8/30/1985 | Kirkland | USA |
Margaret | Peacock | Sales Representative | 9/19/1973 | Redmond | USA |
Steven | Buchanan | Sales Manager | 3/4/1955 | London | UK |
Michael | Suyama | Sales Representative | 7/2/1981 | London | UK |
Robert | King | Sales Representative | 5/29/1960 | London | UK |
Laura | Callahan | Inside Sales Coordinator | 1/9/1985 | Seattle | USA |
Anne | Dodsworth | Sales Representative | 1/27/1980 | London | UK |
<dx:BootstrapGridView ID="GridViewAdaptiveToolbar" runat="server" DataSourceID="GridViewAdaptiveToolbarDataSource" KeyFieldName="EmployeeID">
<Toolbars>
<dx:BootstrapGridViewToolbar Position="Top" ShowInsidePanel="true">
<SettingsAdaptivity Enabled="true" EnableCollapseRootItemsToIcons="True" MinRootItemsCount="4" />
<Items>
<dx:BootstrapGridViewToolbarItem Command="New" />
<dx:BootstrapGridViewToolbarItem Command="Edit" />
<dx:BootstrapGridViewToolbarItem Command="Delete" />
<dx:BootstrapGridViewToolbarItem Command="Refresh" BeginGroup="true" />
<dx:BootstrapGridViewToolbarItem Command="ClearGrouping" BeginGroup="true" AdaptivePriority="2" />
<dx:BootstrapGridViewToolbarItem Command="ClearSorting" AdaptivePriority="1" />
<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" />
<SettingsText Title="Customers Info" />
<Columns>
<dx:BootstrapGridViewDataColumn FieldName="FirstName" />
<dx:BootstrapGridViewDataColumn FieldName="LastName" />
<dx:BootstrapGridViewDataColumn FieldName="Title" />
<dx:BootstrapGridViewDataColumn FieldName="BirthDate" />
<dx:BootstrapGridViewDataColumn FieldName="City" />
<dx:BootstrapGridViewDataColumn FieldName="Country" />
</Columns>
</dx:BootstrapGridView>
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.
<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>
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.
<dx:BootstrapGridView runat="server" ID="GridViewContextMenu" ClientInstanceName="Grid"
DataSourceID="DataSourceContextMenu" KeyFieldName="ProductID"
OnContextMenuInitialize="GridViewContextMenu_ContextMenuInitialize"
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_ContextMenuInitialize(object sender, BootstrapGridViewContextMenuInitializeEventArgs e) {
if(e.MenuType == GridViewContextMenuType.Rows) {
var item = e.CreateItem("Export", "Export");
item.BeginGroup = true;
e.ContextMenu.Items.Insert(e.ContextMenu.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 XlsExportOptions());
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;
}
}