-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Card View
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Reporting
- AI-powered Extensions
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Stepper
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Toolbar - Overview
The Toolbar contains items that manage the page content. In this demo, the Toolbar manages the List.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
@(Html.DevExtreme().Toolbar()
.Items(items => {
items.Add()
.Widget(w => w
.Button()
.Icon("back")
.OnClick("backButton_click")
)
.Location(ToolbarItemLocation.Before);
items.Add()
.Widget(w => w
.Button()
.Icon("refresh")
.OnClick("refreshButton_click")
)
.LocateInMenu(ToolbarItemLocateInMenuMode.Auto)
.Location(ToolbarItemLocation.Before);
items.Add()
.Widget(w => w
.SelectBox()
.Width(140)
.Value(1)
.DataSource(new[] {
new { id = 1, text = "All" },
new { id = 2, text = "Video Players" },
new { id = 3, text = "Televisions" },
new { id = 4, text = "Monitors" },
new { id = 5, text = "Projectors" }
})
.ValueExpr("id")
.DisplayExpr("text")
.InputAttr("aria-label", "Categories")
.OnValueChanged("selectBox_value_changed")
)
.LocateInMenu(ToolbarItemLocateInMenuMode.Auto)
.Location(ToolbarItemLocation.After);
items.Add()
.Widget(w => w
.Button()
.Icon("plus")
.OnClick("addButton_click")
)
.LocateInMenu(ToolbarItemLocateInMenuMode.Auto)
.Location(ToolbarItemLocation.After);
items.Add()
.Widget(w => w
.Button()
.Text("Save")
.OnClick("saveButton_click")
)
.LocateInMenu(ToolbarItemLocateInMenuMode.Always);
items.Add()
.Widget(w => w
.Button()
.Text("Print")
.OnClick("printButton_click")
)
.LocateInMenu(ToolbarItemLocateInMenuMode.Always);
items.Add()
.Widget(w => w
.Button()
.Text("Setting")
.OnClick("settingsButton_click")
)
.LocateInMenu(ToolbarItemLocateInMenuMode.Always);
items.Add()
.Template(@<text><div class="toolbar-label"><b>Tom's Club</b> Products</div></text>)
.LocateInMenu(ToolbarItemLocateInMenuMode.Never)
.Location(ToolbarItemLocation.Center);
})
)
@(Html.DevExtreme().List()
.ID("products")
.DataSource(d => d.Mvc().LoadAction("GetProducts"))
.DataSourceOptions(o => o.Map("mapProducts"))
)
<script>
function backButton_click() {
DevExpress.ui.notify("Back button has been clicked!");
}
function refreshButton_click() {
DevExpress.ui.notify("Refresh button has been clicked!");
}
function selectBox_value_changed(args) {
var products = $("#products").dxList("instance").getDataSource();
if(args.value > 1) {
products.filter("CategoryId", "=", args.value);
} else {
products.filter(null);
}
products.load();
}
function addButton_click() {
DevExpress.ui.notify("Add button has been clicked!");
}
function saveButton_click() {
DevExpress.ui.notify("Save option has been clicked!");
}
function printButton_click() {
DevExpress.ui.notify("Print option has been clicked!");
}
function settingsButton_click() {
DevExpress.ui.notify("Settings option has been clicked!");
}
function mapProducts(item) {
return {
text: item.Text,
CategoryId: item.CategoryId
};
}
</script>
xxxxxxxxxx
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;
namespace DevExtreme.NETCore.Demos.Controllers {
public class ToolbarController : Controller {
public ActionResult Overview() {
return View();
}
[HttpGet]
public ActionResult GetProducts(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(DataSourceLoader.Load(SampleData.Products, loadOptions)), "application/json");
}
}
}
xxxxxxxxxx
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models {
public class Product {
public string ID { get; set; }
public string CategoryId { get; set; }
public string Text { get; set; }
public bool Expanded { get; set; }
public IEnumerable<Product> Items { get; set; }
public int Price { get; set; }
public string Image { get; set; }
}
}
xxxxxxxxxx
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Product> Products = new[] {
new Product {
Text = "HD Video Player",
CategoryId = "2"
},
new Product {
Text = "SuperHD Video Player",
CategoryId = "2"
},
new Product {
Text = "SuperLCD 42",
CategoryId = "3"
},
new Product {
Text = "SuperLED 42",
CategoryId = "3"
},
new Product {
Text = "SuperLED 50",
CategoryId = "3"
},
new Product {
Text = "SuperLCD 55",
CategoryId = "3"
},
new Product {
Text = "DesktopLCD 19",
CategoryId = "4"
},
new Product {
Text = "DesktopLCD 21",
CategoryId = "4"
},
new Product {
Text = "DesktopLED 21",
CategoryId = "4"
},
new Product {
Text = "Projector Plus",
CategoryId = "5"
},
new Product {
Text = "Projector PlusHD",
CategoryId = "5"
}
};
}
}
xxxxxxxxxx
.toolbar-label,
.toolbar-label > b {
font-size: 16px;
}
#products {
margin-top: 10px;
}
Configure Toolbar Items
You can display Toolbar items from an items array or a dataSource. A Toolbar item may be plain text or a UI component. You should specify the text or the widget property depending on the item. If the item is a UI component, declare its options.
Specify Item Location
You can set the dataSource with location fields or specify the location property for each item. The location value can be one of the following:
-
"center"
Places the item in the center of the toolbar. -
"before"
Places the item before the central element(s). -
"after"
Places the item after the central element(s).
Additionally, the Toolbar can render its items in the overflow menu. Specify the locateInMenu property for each item with one of the following values:
-
"always"
Always places the item in the overflow menu. -
"never"
Places the item outside of the overflow menu. -
"auto"
Places the item outside of the overflow menu. If all items cannot fit within the width of the Toolbar, it renders this item in the overflow menu.
Note that you cannot specify the order of the items with locateinMenu="auto"
placed in the overflow menu.
Customize Item Appearance
You can define the itemTemplate to customize item appearance. To customize the items in the overflow menu, use the menuItemTemplate.