Toolbars

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

You can declare toolbars using the Grid View's Toolbars method. To add a new toolbar, use the Add method (available through Toolbars). Each item on the toolbar is created using the Add method (available through a toolbar's Items method).

A Grid View's Toolbar allows you to associate a toolbar item with one of the predefined commands performing common operations, such as data editing, displaying/hiding certain visual elements, refreshing data, etc. To associate a toolbar item with one of the built-in commands use the toolbar item's Command method.

Drag a column header here to group by that column
First Name Last Name Title Birth Date City Country
NancyDavolioSales Representative12/8/1978SeattleUSA
AndrewFullerVice President, Sales2/19/1965TacomaUSA
JanetLeverlingSales Representative8/30/1985KirklandUSA
MargaretPeacockSales Representative9/19/1973RedmondUSA
StevenBuchananSales Manager3/4/1955LondonUK
MichaelSuyamaSales Representative7/2/1981LondonUK
RobertKingSales Representative5/29/1960LondonUK
LauraCallahanInside Sales Coordinator1/9/1985SeattleUSA
AnneDodsworthSales Representative1/27/1980LondonUK
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>("gridViewToolbar")
    .KeyFieldName(m => m.ID)
    .Toolbars(toolbars => {
        toolbars.Add().Items(items => {
            items.Add().Command(BootstrapGridViewToolbarCommand.New);
            items.Add().Command(BootstrapGridViewToolbarCommand.Edit);
            items.Add().Command(BootstrapGridViewToolbarCommand.Delete);
            items.Add().Command(BootstrapGridViewToolbarCommand.Refresh).BeginGroup(true);
            items.Add().Command(BootstrapGridViewToolbarCommand.ClearGrouping);
            items.Add().Command(BootstrapGridViewToolbarCommand.ClearSorting);
            items.Add().Command(BootstrapGridViewToolbarCommand.ShowGroupPanel).BeginGroup(true);
            items.Add().Command(BootstrapGridViewToolbarCommand.ShowSearchPanel);
        });
    })
    .Columns(columns => {
        columns.Add(m => m.FirstName);
        columns.Add(m => m.LastName);
        columns.Add(m => m.Title);
        columns.Add(m => m.BirthDate);
        columns.Add(m => m.City);
        columns.Add(m => m.Country);
    })
    .Settings(settings => settings.ShowGroupPanel(true))
    .SettingsBehavior(behavior => behavior.AllowFocusedRow(true))
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("Toolbars"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.AddRow)
            .Controller("GridView")
            .Action("InsertRowToolbars"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .Controller("GridView")
            .Action("UpdateRowToolbars"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.DeleteRow)
            .Controller("GridView")
            .Action("DeleteRowToolbars")))
    .EditErrorText(ViewData["ErrorMessage"]?.ToString())
    .Bind(Model))
using Microsoft.AspNetCore.Mvc;
using System;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public IActionResult Toolbars() {
            return PartialView("BarsAndDialogs/Toolbars", EditFormEmployees.Get());
        }
        public IActionResult InsertRowToolbars(EditableEmployee employee) {
            if(ModelState.IsValid)
                try {
                    EditFormEmployees.Insert(employee);
                }
                catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("BarsAndDialogs/Toolbars", EditFormEmployees.Get());
        }
        public IActionResult UpdateRowToolbars(EditableEmployee employee) {
            if(ModelState.IsValid)
                try {
                    EditFormEmployees.Update(employee);
                }
                catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("BarsAndDialogs/Toolbars", EditFormEmployees.Get());
        }
        public IActionResult DeleteRowToolbars(int id = -1) {
            if(ModelState.IsValid)
                try {
                    EditFormEmployees.Remove(id);
                }
                catch(Exception e) {
                    ViewData["ErrorMessage"] = e.Message;
                }
            return PartialView("BarsAndDialogs/Toolbars", EditFormEmployees.Get());
        }
    }
}
using System;
using System.ComponentModel.DataAnnotations;
using Newtonsoft.Json;

namespace DevExpress.AspNetCore.Demos {
    public class EditableEmployee {
        public int ID { get; set; }
        [Required, MaxLength(20)]
        public string FirstName { get; set; }
        [Required, MaxLength(10)]
        public string LastName { get; set; }
        [MaxLength(30)]
        public string Title { get; set; }
        public DateTime? BirthDate { get; set; }
        public DateTime? HireDate { get; set; }
        [MaxLength(15)]
        public string City { get; set; }
        [MaxLength(15)]
        public string Country { get; set; }
        public byte[] Photo { get; set; }
        public string Notes { get; set; }
    }
}

CustomizationDialog

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 method provides access to the customization dialog’s settings. Note that the customization dialog is disabled by default. To enable it, pass true to the Enabled method (available through SettingsCustomizationDialog). Use the ShowSortingPage, ShowGroupingPage, ShowFilteringPage and ShowColumnChooserPage methods to disable or enable specific tabs.

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

Drag a column header here to group by that column
Order Date
Company Name
Country
City
Unit Price Discount
    
7/4/2014Vins et alcools ChevalierFranceReims$14.000 %
7/4/2014Vins et alcools ChevalierFranceReims$10.000 %
7/4/2014Vins et alcools ChevalierFranceReims$35.000 %
7/5/2014Toms SpezialitätenGermanyMünster$19.000 %
7/5/2014Toms SpezialitätenGermanyMünster$42.000 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$8.000 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$42.0015 %
7/8/2014Hanari CarnesBrazilRio de Janeiro$17.0015 %
7/8/2014Victuailles en stockFranceLyon$17.005 %
7/8/2014Victuailles en stockFranceLyon$16.005 %
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView("custDialogGridView")
    .KeyFieldName("OrderID")
    .SettingsCustomizationDialog(settings => settings
        .Enabled(true))
    .Settings(settings => settings
        .ShowGroupPanel(true)
        .ShowFilterRow(true)
        .ShowFilterRowMenu(true)
        .ShowHeaderFilterButton(true))
    .Columns(columns => {
        columns.Add().FieldName("OrderDate")
            .Settings(settings => settings.AllowAutoFilter(false));
        columns.Add().FieldName("CompanyName")
            .Settings(settings => settings.AllowAutoFilter(false));
        columns.Add().FieldName("Country")
            .Settings(settings => settings.AllowAutoFilter(false))
            .SettingsHeaderFilter(settings => settings.Mode(GridHeaderFilterMode.CheckedList));
        columns.Add().FieldName("City")
            .Settings(settings => settings.AllowAutoFilter(false))
            .SettingsHeaderFilter(settings => settings.Mode(GridHeaderFilterMode.CheckedList));
        columns.AddTextColumn()
            .FieldName("UnitPrice")
            .Width(100)
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("c"))
            .Settings(settings => settings.AllowHeaderFilter(false));
        columns.AddTextColumn()
            .FieldName("Discount")
            .Width(100)
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("p0"))
            .Settings(settings => settings.AllowHeaderFilter(false));
    })
    .Toolbars(toolbars => {
        toolbars.Add()
            .Items(items => {
                items.Add().Command(BootstrapGridViewToolbarCommand.ShowCustomizationDialog);
            })
            .Position(GridToolbarPosition.Top);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("CustomizationDialog")
            .Controller("GridView")))
    .SettingsPager(settings => settings
        .NumericButtonCount(7))
    .Bind(Model))
Screen Size
Color Themes
Demo QR Code