aspnet-118569-components-tree-list-concepts-toolbars.md
The DevExpress ASPxTreeList control enables you to group the most important or frequently used grid commands, and expose them through customizable toolbars for efficient end-user access.
See Online Demo: Toolbar
The ASPxTreeList stores toolbars in its ASPxTreeList.Toolbars collection. Each toolbar is a TreeListToolbar class instance. You can add and remove toolbars in the collection and change the following characteristics of individual toolbars:
| Toolbar Characteristic | Property | Description |
|---|---|---|
| Adaptive Behavior | GridToolbar.SettingsAdaptivity.Enabled | Specifies whether an adaptive behavior is enabled for the toolbar. |
| Availability | GridToolbar.Enabled | Gets or sets a value that indicates whether the toolbar is enabled, allowing the toolbar to respond to end-user interactions. |
| Item Alignment | GridToolbar.ItemAlign | Gets or sets the toolbar item alignment. |
| Name | GridToolbar.Name | Gets or sets the toolbar’s unique identifier name. |
| Position | GridToolbar.Position | Gets or sets the toolbar position. |
| Visibility | GridToolbar.Visible | Gets or sets a value specifying the visibility of the toolbar. |
To populate a toolbar with toolbar items and to have indexed access to them, use the toolbar’s TreeListToolbar.Items property.
Toolbar items are instances of the TreeListToolbarItem class. It is a descendant of the MenuItem class and so it inherits the following key functionality making a toolbar item appear and behave as a menu item.
| Toolbar Item Characteristic | Property | Description |
|---|---|---|
| Group Separation | MenuItem.BeginGroup | Gets or sets a value that specifies whether the current menu item starts a group. |
| Group Name | MenuItem.GroupName | Gets or sets the name of a logical check group to which the menu item belongs. |
| Image | MenuItem.Image | Gets the settings of an image displayed within the menu item. |
| Name | MenuItem.Name | Gets or sets the unique identifier name for the current menu item. |
| Template | MenuItem.Template | Gets or sets a template used to display the content of the current menu item. |
| Text | MenuItem.Text | Gets or sets the text content of the current menu item. |
| Tooltip | MenuItem.ToolTip | Gets or sets the current menu item’s tooltip text. |
Additionally, you can use the following options explicitly implemented for toolbar items to properly customize their behavior and appearance.
| Toolbar Item Characteristic | Property | Description |
|---|---|---|
| Display Mode | GridToolbarItem.DisplayMode | Gets or sets the display mode of the current toolbar item within the toolbar. |
| Command to Execute | TreeListToolbarItem.Command | Gets or sets the name of a command executed when clicking a toolbar item. |
| Child Items | TreeListToolbarItem.Items | Gets a collection that contains the toolbar items of the current toolbar item. Enables you to create hierarchies of nested toolbar items of unlimited depth. |
Based on the TreeListToolbarItem.Command property setting, a toolbar item either triggers a standard grid command (that is, data item editing, deletion, creation, etc.) or performs a custom action, if required (this action should be implemented programmatically).
To make a toolbar item execute a standard command, set the item’s TreeListToolbarItem.Command property to the desired command name listed by the TreeListToolbarCommand enumeration. A standard toolbar item automatically displays the command-related text and image (optional). Clicking a standard toolbar item executes the corresponding grid command.
The code snippet below demonstrates how to create two standard toolbar items - for the New and Refresh commands - in the markup.
<dx:ASPxTreeList runat="server" ID="Grid" ...>
...
<Toolbars>
<dx:TreeListToolbar ItemAlign="Right">
<Items>
<dx:TreeListToolbarItem Command="New" />
...
<dx:TreeListToolbarItem Command="Refresh" BeginGroup="true" />
...
</Items>
</dx:TreeListToolbar>
</Toolbars>
</dx:ASPxTreeList>
If you need a toolbar item to perform a custom action, create a new TreeListToolbarItem object and use one of the following two implementation options.
Use Toolbar-Related Grid API
Use a Template to Define Item
The code below demonstrates how to create a custom ‘Export to’ toolbar item with three sub-items to export the grid data to different formats (PDF, XLSX and XLS).
<dx:ASPxTreeList runat="server" ID="Grid" OnToolbarItemClick="Grid_ToolbarItemClick" ...>
<Toolbars>
<dx:TreeListToolbar ItemAlign="Right">
<Items>
...
<dx:TreeListToolbarItem Text="Export to" Image-IconID="actions_download_16x16office2013" BeginGroup="true">
<Items>
<dx:TreeListToolbarItem Name="ExportToPDF" Text="PDF" Image-IconID="export_exporttopdf_16x16office2013" />
<dx:TreeListToolbarItem Name="ExportToXLSX" Text="XLSX" Image-IconID="export_exporttoxlsx_16x16office2013" />
<dx:TreeListToolbarItem Name="ExportToXLS" Text="XLS" Image-IconID="export_exporttoxls_16x16office2013" />
</Items>
</dx:TreeListToolbarItem>
...
</Items>
</dx:TreeListToolbar>
</Toolbars>
...
<ClientSideEvents ToolbarItemClick="OnToolbarItemClick" />
</dx:ASPxTreeList>
<dx:ASPxTreeListExporter ID="Exporter" TreeListID="Grid" runat="server" />
function OnToolbarItemClick(s,e) {
if(IsExportToolbarCommand(e.item.name)){
e.processOnServer=true;
e.usePostBack=true;
}
}
function IsExportToolbarCommand(command){
return command == "ExportToPDF" || command == "ExportToXLSX" || command == "ExportToXLS" ;
}
protected void Grid_ToolbarItemClick(object source, ASPxTreeListToolbarItemClickEventArgs e) {
switch(e.Item.Name) {
case "ExportToPDF":
Exporter.WritePdfToResponse();
break;
case "ExportToXLS":
Exporter.WriteXlsToResponse();
break;
case "ExportToXLSX":
Exporter.WriteXlsxToResponse();
break;
default:
break;
}
}
See Also