Data Column

A Grid View Data Column is a type of a grid column that automatically determines the actual column type (and, consequently, the control used for both displaying and editing cell data) based on the type of a data field to which a column is bound:

Use the Add method (available through Columns) to add a Data Column to a Grid View's column collection.

NameStart DateEnd DateDone
PrintingSystem6/19/20047/9/2004
Testing and writing examples6/19/20047/9/2004
Writing CustomPrintingLink6/2/20047/7/2004
Testing   
Writing examples7/9/20047/7/2004 
@using EditableTask = DevExpress.AspNetCore.DemoModels.Task
@model IEnumerable<EditableTask>
@(Html.DevExpress()
    .BootstrapGridView<EditableTask>("gridWithDataColumn")
    .Columns(columns => {
        columns.Add(m => m.Name);
        columns.Add(m => m.StartDate);
        columns.Add(m => m.EndDate);
        columns.Add(m => m.Done);
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewDataColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Binary Image Column

A Grid View Binary Image Column used to display images for columns that contain binary data. Use the AddBinaryImageColumn method (available through Columns) to add a Binary Image Column. To specify the Binary Image settings, use the PropertiesBinaryImage method.

PhotoFirst NameLast NameTitle
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>("gridWithBinaryImageColumn")
    .Columns(columns => {
        columns.AddBinaryImageColumn(m => m.Photo)
            .PropertiesBinaryImage(properties => properties
                .ImageWidth(120));
        columns.Add(m => m.FirstName).ReadOnly(true);
        columns.Add(m => m.LastName).ReadOnly(true);
        columns.Add(m => m.Title).ReadOnly(true);
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewBinaryImageColumn")
            .Controller("GridView")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(3).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .Bind(Model))

Button Edit Column

A Grid View Button Edit Column displays the Button Edit control as its cell editor. Use the AddButtonEditColumn method (available through Columns) to add a Button Edit Column. To specify the Button Edit settings, use the PropertiesButtonEdit method.

First NameLast NameTitle
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>("gridWithButtonEditColumn")
    .Columns(columns => {
        columns.AddButtonEditColumn(m => m.FirstName)
            .PropertiesButtonEdit(properties => properties
                .ClearButton(button => button
                    .DisplayMode(ClearButtonDisplayMode.Always)));
        columns.AddButtonEditColumn(m => m.LastName)
            .PropertiesButtonEdit(properties => properties
                .Buttons(buttons => {
                    buttons.Add().Text("Button");
                    buttons.Add().IconCssClass("fa fa-refresh");
                }));
        columns.AddButtonEditColumn(m => m.Title)
            .PropertiesButtonEdit(properties => properties
                .Buttons(buttons => buttons
                    .Add()
                    .IconCssClass("fa fa-download")));
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewButtonEditColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(3).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Check Column

A Grid View Check Column uses a check box to display and edit data from Boolean data fields. Use the AddCheckColumn method (available through Columnss) to add a Check Column. To specify the cell editor's settings, use the column's PropertiesCheckEdit method.

Product NameDiscontinued
Chai 
Chang 
Aniseed Syrup 
Chef Anton's Cajun Seasoning 
Chef Anton's Gumbo Mix
@model IEnumerable<EditableProduct>
@(Html.DevExpress()
    .BootstrapGridView<EditableProduct>("gridWithCheckColumn")
    .Columns(columns => {
        columns.Add(m => m.ProductName).ReadOnly(true);
        columns.AddCheckColumn(m => m.Discontinued);
    })
    .KeyFieldName(m => m.ProductID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewCheckColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Combo Box Column

A Combo Box Column is a column whose values are edited using the Combo Box editor. Use the AddComboBoxColumn method (available through Columns) to add a Combo Box Column. To specify the cell editor's settings, use the column's PropertiesComboBox method.

First NameCountry
NancyUSA
AndrewUSA
JanetUSA
MargaretUSA
StevenUK
@model ComboboxColumnModel
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>("gridWithComboBoxColumn")
    .Columns(columns => {
        columns.Add(m => m.FirstName).ReadOnly(true);
        columns.AddComboBoxColumn(m => m.Country)
            .PropertiesComboBox(p => p
                .TextField("CountryName")
                .ValueField("CountryName")
                .IncrementalFilteringMode(IncrementalFilteringMode.StartsWith)
                .Bind(Model.Countries));
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewComboBoxColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model.Employees))

Date Edit Column

A Date Edit Column is a column using the Date Edit control to display and edit data from a DateTime data field. Use the AddDateEditColumn method (available through Columns) to add Date Edit Column. To specify the cell editor's settings, use the column's PropertiesDateEdit method.

EmployeeBirth DateHire Date
Nancy Davolio 12/8/19785/1/2005
Andrew Fuller 2/19/19658/14/1992
Janet Leverling 8/30/19854/1/2002
Margaret Peacock 9/19/19735/3/1993
Steven Buchanan 3/4/195510/17/1993
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>("gridWithDateEditColumn")
    .Columns(columns => {
        columns.Add()
            .Caption("Employee")
            .SettingsEditForm(s => s.Visible(false))
            .DataItemTemplate(t => @<text>
                @(t.Eval("FirstName") + " " + t.Eval("LastName"))
            </text>);
        columns.AddDateEditColumn(m => m.BirthDate);
        columns.AddDateEditColumn(m => m.HireDate);
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewDateEditColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Drop-Down Edit Column

A Drop-Down Edit Column provides a cell editor containing a customizable drop-down window. Use the AddDropDownEditColumn method (available through Columns) to add a Drop-Down Column. You can access the cell editor’s settings using the column’s PropertiesDropDownEdit method.

Order IDEmployee ID
102485
102496
102504
102513
102524
@model DropdownColumnModel
@(Html.DevExpress()
    .BootstrapGridView<EditableOrder>("gridWithDropDownEditColumn")
    .Columns(columns => {
        columns.Add(m => m.OrderID).ReadOnly(true);
        columns.AddDropDownEditColumn(m => m.EmployeeID)
            .PropertiesDropDownEdit(properties => properties
                .DropDownWindowTemplate(@<text>
                    @Html.Partial("ColumnTypes/GridViewDropDownEditColumnInnerGrid", Model.Employees)
                </text>));
    })
    .KeyFieldName(m => m.OrderID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewDropDownEditColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model.Orders))
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>("gridForDropDownEditContent")
    .KeyFieldName(m => m.ID)
    .Columns(columns => {
        columns.Add(m => m.LastName);
        columns.Add(m => m.FirstName);
        columns.Add(m => m.Title);
    })
    .ClientSideEvents(e => e.SelectionChanged("onDropDownContentSelectionChanged"))
   .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewDropDownEditColumnInnerGrid")
            .Controller("GridView")))
    .SettingsBehavior(behavior => behavior
        .AllowSort(false)
        .AllowSelectByRowClick(true)
        .AllowSelectSingleRowOnly(true))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .Bind(Model))
function onDropDownContentSelectionChanged(args) {
    var dropDownEdit = gridWithDropDownEditColumn.getEditor(gridWithDropDownEditColumn.getColumnByField('EmployeeID'));
    dropDownEdit.setValue(this.getSelectedKeysOnPage()[0]);
    dropDownEdit.hideDropDown();
}

Hyperlink Column

A Hyperlink Column represents a data column with hyperlink functionality. Use the AddHyperLinkColumn method (available through Columns) to add a Hyperlink Column. You can specify settings of a displayed hyperlink using the PropertiesHyperLinkEdit method.

By default, if no display text is provided for a hyperlink through the corresponding settings (Text, TextField methods available through PropertiesHyperLinkEdit), the hyperlink displays the URL obtained from the column's data field. You can disable this behavior by passing false to the HyperLink Column's ShowUrlAsDisplayText method.

First NameLast NameEmail
PaulBaileypaulb@westchestercounty.com
BradBarnesbarkk@barnesfamilywebsite.com
JerryCampbelljerryc@campbellfamilywebsite.com
CarlLucascarl@lucasfamilywebsite.com
PeterDolanpeter@dolanfamilywebsite.com
@using DevExpress.AspNetCore.DemoModels
@model IEnumerable<User>
@(Html.DevExpress()
    .BootstrapGridView<User>("gridWithHyperLinkColumn")
    .Columns(columns => {
        columns.Add(m => m.FirstName);
        columns.Add(m => m.LastName);
        columns.AddHyperLinkColumn(m => m.Email)
            .PropertiesHyperLinkEdit(p => p.NavigateUrlFormatString("mailto:{0}"));
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewHyperLinkColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Image Column

A Grid View's Image Column displays images from specified URLs. Use the AddImageColumn method (available through Columns) to add an Image Column. You can specify the cell editor's settings using the column's PropertiesImage method.

First NameLast NameEmailPhoto
AndrewFullerandrew.fuller@devexpress.com
NancyDavolionancy.davolio@devexpress.com
MargaretPeackopmargaret.peackop.devexpress.com
@model IEnumerable<Person>
@(Html.DevExpress()
    .BootstrapGridView<Person>("gridWithImageColumn")
    .Columns(columns => {
        columns.Add(m => m.FirstName);
        columns.Add(m => m.LastName);
        columns.Add(m => m.Email);
        columns.AddImageColumn(m => m.Photo)
            .Width(120)
            .PropertiesImage(p => p
                .ImageHeight(100)
                .ImageUrlFormatString("images/persons/{0}"));
    })
    .KeyFieldName(m => m.Id)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewImageColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(3).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .Bind(Model))

Memo Column

A Memo Column is a data column used to display and edit multiline text data. Use the AddMemoColumn method (available through Columns) to add a Memo Column. You can access the cell editor's settings using the column's PropertiesMemoEdit method.

Category NameDescription
BeveragesSoft drinks, coffees, teas, beers, and ales
CondimentsSweet and savory sauces, relishes, spreads, and seasonings
ConfectionsDesserts, candies, and sweet breads
Dairy ProductsCheeses
Grains/CerealsBreads, crackers, pasta, and cereal
@using DevExpress.AspNetCore.DemoModels
@model IEnumerable<Category>
@(Html.DevExpress()
    .BootstrapGridView<Category>("gridWithMemoColumn")
    .Columns(columns => {
        columns.Add(m => m.CategoryName);
        columns.AddMemoColumn(m => m.Description);
    })
    .KeyFieldName(m => m.CategoryID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewMemoColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .SettingsEditing(editing => editing
        .EditFormColumnSpan(12)
        .FormLayoutProperties(fl => fl.LayoutType(FormLayoutType.Vertical)))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Progress Bar Column

A Progress Bar Column presents numeric data as a progress bar. Use the AddProgressBarColumn method (available through Columns) to add a Progress Bar Column. You can specify settings of a displayed progress bar using the column’s PropertiesProgressBar method.

NameComplete
PrintingSystem
23%
Testing and writing examples
0%
Writing CustomPrintingLink
100%
Testing
68%
Writing examples
100%
@using TaskProgress = DevExpress.AspNetCore.DemoModels.Task
@model IEnumerable<TaskProgress>
@(Html.DevExpress()
    .BootstrapGridView<TaskProgress>("gridWithProgressBarColumn")
    .Columns(columns => {
        columns.Add(m => m.Name);
        columns.AddProgressBarColumn(m => m.Complete)
            .PropertiesProgressBar(p => p
                .Minimum(0)
                .Maximum(1));
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewProgressBarColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Spin Edit Column

A Spin Edit Column is used to display and edit numeric data. Use the AddSpinEditColumn method (available through Columns) to add a Spin Edit Column. You can specify the Spin Edit settings using the column’s PropertiesSpinEdit method.

Product NameUnit Price
Chai$18.00
Chang$19.00
Aniseed Syrup$10.00
Chef Anton's Cajun Seasoning$22.00
Chef Anton's Gumbo Mix$21.00
@model IEnumerable<EditableProduct>
@(Html.DevExpress()
    .BootstrapGridView<EditableProduct>("gridWithSpinEditColumn")
    .Columns(columns => {
        columns.Add(m => m.ProductName).ReadOnly(true);
        columns.AddSpinEditColumn(m => m.UnitPrice)
            .PropertiesSpinEdit(p => p
                .LargeIncrement(1)
                .Increment(0.1m)
                .NumberType(SpinEditNumberType.Float)
                .NumberFormat(SpinEditNumberFormat.Currency));
    })
    .KeyFieldName(m => m.ProductID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewSpinEditColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Tag Box Column

A Grid View Tag Box Column displays the Tag Box control as its cell editor. Use the AddTagBoxColumn method (available through Columns) to add a Tag Box Column. The PropertiesTagBox method allows you to specify the Tag Box control's settings.

When you use model binding to generate Tag Box items, you can specify data fields providing item texts and values:

Full NameRoles
Andrew FullerAdministrator, Marketing Manager
Anne DodsworthHR Manager
Janet LeverlingProduct Manager, Technical Evangelist, Technical Writer
Product ManagerTechnical EvangelistTechnical Writer
Laura CallahanTechnical Writer
Margaret PeacockDeveloper, Technical Evangelist
@model TagBoxColumnModel
@(Html.DevExpress()
    .BootstrapGridView<CompanyEmployee>("gridWithTagBoxColumn")
    .Columns(columns => {
        columns.Add(m => m.FullName).ReadOnly(true);
        columns.AddTagBoxColumn(m => m.Roles)
            .PropertiesTagBox(p => p
                .TextField("Name")
                .ValueField("Name")
                .Bind(Model.Roles));
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewTagBoxColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(2);
    })
    .Bind(Model.Employees))

Text Column

A Text Column is a data column used to display and edit text. Use the AddTextColumn method (available through Columns) to add a Text Column. You can specify the cell editor's settings using the column's PropertiesTextEdit method.

First NameLast NameTitle
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
MargaretPeacockSales Representative
StevenBuchananSales Manager
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>("gridWithTextColumn")
    .Columns(columns => {
        columns.AddTextColumn(m => m.FirstName);
        columns.AddTextColumn(m => m.LastName);
        columns.AddTextColumn(m => m.Title);
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewTextColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Time Edit Column

A Time Edit Column is a column using the Time Edit control to display and edit data from a DateTime data field. Use the AddTimeEditColumn method (available through Columns) to add a Time Edit Column. You can specify the cell editor's settings using the column's PropertiesTimeEdit method.

NamePlanned DateStart TimeEnd Time
Sprint Planning7/19/20182:00 PM4:00 PM
Daily Stand-up7/20/20189:15 AM9:30 AM
Daily Stand-up7/23/20189:15 AM9:30 AM
Daily Stand-up7/24/20189:15 AM9:30 AM
Sprint Review7/25/20182:00 PM3:00 PM
@model IEnumerable<Meeting>
@(Html.DevExpress()
    .BootstrapGridView<Meeting>("gridWithTimeEditColumn")
    .Columns(columns => {
        columns.Add(m => m.Name).ReadOnly(true);
        columns.Add(m => m.PlannedDate).ReadOnly(true);
        columns.AddTimeEditColumn(m => m.StartTime);
        columns.AddTimeEditColumn(m => m.EndTime);
    })
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewTimeEditColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .RouteName("defaults")))
    .SettingsBehavior(behavior => behavior.AllowSort(false))
    .SettingsPager(pager => pager.PageSize(5).Visible(false))
    .CssClasses(css => css.Control("hide-editbuttons"))
    .OnInitialized((grid, args) => {
        if(!grid.IsPartialUpdate)
            grid.StartEdit(1);
    })
    .Bind(Model))

Command Column

A Command Column is a special column type intended for displaying commands that allow end-users to switch the Grid View to the edit mode, update data, delete rows, etc. A command column allows multiple items to be displayed within a cell. In this demo, the Edit button, the Delete button and the row selection check box are enabled by passing true to the the ShowEditButton, ShowDeleteButton and ShowSelectCheckbox methods.

In addition to standard command items, a Command Column can display custom command buttons. Use the CustomButtons method to declare collection of custom command buttons. You can process a click on a custom button in the client-side CustomButtonClick event:

#First Name Last Name Title
NancyDavolioSales Representative
AndrewFullerVice President, Sales
JanetLeverlingSales Representative
MargaretPeacockSales Representative
StevenBuchananSales Manager
MichaelSuyamaSales Representative
RobertKingSales Representative
LauraCallahanInside Sales Coordinator
AnneDodsworthSales Representative
@model IEnumerable<EditableEmployee>
@(Html.DevExpress()
    .BootstrapGridView<EditableEmployee>("gridWithCommandColumn")
    .Columns(columns => {
        columns.AddCommandColumn()
            .ShowEditButton(true)
            .ShowSelectCheckbox(true)
            .CustomButtons(c => {
                c.Add().CssClass("fa fa-refresh").ID("Refresh");
                c.Add().CssClass("fa fa-question").ID("Help");
            });
        columns.Add(m => m.FirstName);
        columns.Add(m => m.LastName);
        columns.Add(m => m.Title);
    })
    .ClientSideEvents(events => events.CustomButtonClick("onCustomButtonClick"))
    .KeyFieldName(m => m.ID)
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("GridViewCommandColumn")
            .Controller("GridView"))
        .MapRoute(r => r
            .RouteType(GridViewRouteType.UpdateRow)
            .Action("GridViewCommandColumnUpdateRow")
            .Controller("GridView"))
        )
    .Bind(Model))
function onCustomButtonClick(args) {
    dxbsDemo.showToast("The custom button " + args.buttonID + " has been clicked (row index: " + args.visibleIndex + ")");
}
Screen Size
Color Themes
Demo QR Code