Grid View

• Apr 15, 2019
• 11 minutes to read

IMPORTANT

Bootstrap Controls for ASP.NET Core are in maintenance mode. We don’t add new controls or develop new functionality for this product line. Our recommendation is to use the ASP.NET Core Controls suite.

The DevExpress Bootstrap Grid View is a full-featured tabular data presentation control that renders itself using Bootstrap CSS classes. The control supports working with large data sets, delivers numerous end-user data shaping features (sorting, grouping, filtering, calculating summaries, etc.), allows customizing grid elements’ UI and exporting grid data to various formats.

Extensive server-side and client-side APIs cover multiple customization scenarios and give you full control over the grid’s behavior and presentation.

Main Features

• Data Binding
• Sorting, Grouping and Filtering
• Editing Values
• Selection and Focus
• Summaries
• Master-Detail View
• Column Types
• Export Data

Data Binding

Use the following steps to display data within the Grid View control:

• Create a column for each data field whose data you want to display.
• Call the Bind method with the data source object as a parameter.

NOTE

Online Demo: The Data Binding online demo shows the result of executing the code below.

View

@model IEnumerable

@(Html.DevExpress()
    .BootstrapGridView<SalesProduct>("grid")
    .KeyFieldName(m => m.ProductID)
    .Columns(columns => {
        columns.Add(m => m.ProductName);
        columns.Add(m => m.UnitPrice);
        columns.Add(m => m.UnitsOnOrder);
        columns.AddTextColumn()
            .FieldName("Total")
            .UnboundType(UnboundColumnType.Decimal)
            .UnboundExpression("UnitsOnOrder * UnitPrice")
            .PropertiesTextEdit(properties => properties
                .DisplayFormatString("c"));
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Action("Binding")
            .Controller("GridView")))
    .Bind(Model))

Controller

using System;
using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;

namespace DevExpress.AspNetCore.Demos {
    public class GridViewController : Controller {
        public GridViewController(BindingContext bindingContext){
            BindingContext = bindingContext;
        }

        BindingContext BindingContext { get; }

        public IActionResult Binding() {
            return PartialView("DataBinding/Binding", BindingContext.Products);
        }
    }
}

Model

using Microsoft.EntityFrameworkCore;

namespace DevExpress.AspNetCore.DemoModels {
    public class BindingContext : DbContext {
        public BindingContext(DbContextOptions<BindingContext> options)
            :base(options) {
        }

        public DbSet<SalesProduct> Products { get; set; }
    }

    public class SalesProduct {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
        public short? UnitsOnOrder { get; set; }
        public decimal? UnitPrice { get; set; }
    }
}

Sorting, Grouping and Filtering

Sorting: An end-user can sort the grid by clicking the header of a column by which the grid should be sorted. An arrow glyph indicates the sorting order within the sorted column. The grid can be sorted against multiple columns by clicking column headers while holding down the shift key.

The AllowSort method defines whether the grid can be sorted. The default value is true.

NOTE

Online Demo: The Sorting online demo describes this feature in detail.

Grouping: The grouping feature allows an end-user to group data within the grid by dragging column headers to the group panel. Data grouping is allowed if both AllowGroup and AllowSort methods were called with the true value.

The ShowGroupPanel method controls the group panel’s visibility.

NOTE

Online Demo: The Grouping online demo describes this feature in detail.

Filtering: The Grid Control provides several filtering approaches which you can enable separately or all at the same time. The following filtering mechanisms are available:

• Search panel allows you to filter data and highlight the search results. You can access the search panel’s settings using the SettingsSearchPanel method.

• Header filter allows you to filter data by unique column values shown after clicking the column header. Use the ShowHeaderFilterButton method to show header filter buttons.

• Filter row allows end-users to filter data by entering text in its cells. An optional filter row menu displays a list of filter conditions for a given search operation to control the values the filter row returns. Use the ShowFilterRow method with the true parameter to display the filter row within the Grid View.

NOTE

Online Demo: The Filtering online demo describes this feature in detail.

View

@model IEnumerable

@(Html.DevExpress()
    .BootstrapGridView<Customer>("grid")
    .Settings(settings => settings.ShowGroupPanel(true))
    .SettingsSearchPanel(settings => settings
        .Visible(true)
        .ShowApplyButton(true))
    .Columns(columns => {
        columns.Add(m => m.ContactName)
            .SortIndex(0)
            .SortOrder(ColumnSortOrder.Ascending);
        columns.Add(m => m.CompanyName);
        columns.Add(m => m.Country);
        columns.Add(m => m.City);
        columns.Add(m => m.Region);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("Index")))
    .Bind(Model))

Controller

using Microsoft.AspNetCore.Mvc;

namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(NorthwindContext northwindContext) {
            NorthwindContext = northwindContext;
        }

        protected NorthwindContext NorthwindContext { get; }

        public IActionResult Index() {
            return PartialView("Index", NorthwindContext.Customers);
        }
    }
}

Editing Values

The Grid View control provides end-user data editing functionality out of the box. You can use any of the approaches below to edit grid data.

• Editing using the built-in edit form.
• Batch editing and updating.
• Editing using the pop-up edit form.
• Inline editing.

The end-user data modification commands are displayed within a command column. Add this column to the grid’s Columns to allow editing. The editing functionality also requires a specified key field you can specify via the KeyFieldName method.

NOTE

Online Demo: The Editing online demo shows the result of executing the code below.

Selection and Focus

Focused Row allows highlighting grid rows using their visible indexes. Use the AllowFocusedRow method to specify that one of the rows in the Grid View control should be focused. You can use this feature in multiple ways, for example, to display additional information for the focused row.

An end-user can move focus to another row either by clicking it or using a keyboard. Handle the client-side FocusedRowChanged event to respond to changing row focus.

NOTE

Online Demo: The Focused Row online demo describes this feature in detail.

Selection allows highlighting grid data rows using their key values. The Grid Control provides Single-row and Multiple-row selection for selecting grid’s rows. Depending on the approach you choose, a new radio button or check box column is added to the grid.

• Single-row selection. The Grid View only allows one row to be selected at a time. Use the AllowSelectSingleRowOnly method to activate this mode.

• Multiple-row selection. To show selection checkboxes, add a command column to the grid and call the column’s ShowSelectCheckBox method. The command column’s SelectAllCheckboxMode method allows you to specify the Select All check box behavior.

You can also use the AllowSelectByRowClick method to enable row selection via a mouse click.

NOTE

Online Demo: The Selection online demo describes this feature in detail.

View

@model IEnumerable

@(Html.DevExpress()
    .BootstrapGridView<Customer>("grid")
    .KeyFieldName(c => c.CustomerID)
    .SettingsBehavior(settings => settings
        .AllowSelectByRowClick(true)
        .AllowFocusedRow(true))
    .Columns(columns => {
        columns.AddCommandColumn()
            .ShowSelectCheckbox(true)
            .SelectAllCheckboxMode(GridViewSelectAllCheckBoxMode.AllPages);
        columns.Add(c => c.ContactName);
        columns.Add(c => c.CompanyName);
        columns.Add(c => c.City);
        columns.Add(c => c.Country);
    })
    .ClientSideEvents(events => events
        .SelectionChanged("onSelectionGridViewAction")
        .FocusedRowChanged("onFocusedRowChanged"))
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("Index")))
    .Bind(Model))

Controller

using Microsoft.AspNetCore.Mvc;

namespace DevExpress.AspNetCore.Demos {
    public class GridViewController : Controller {
        public ActionResult Index() {
            return PartialView(NorthwindContext.Customers);
        }
    }
}

Script

function onSelectionGridViewAction(args){
    if(args.isSelected){
        // do something
    }
}
function onFocusedRowChanged(args){
    if(args.visibleIndex < 5) {
        // do something
    }
}

Summaries

The Grid Control supports group and total summaries:

• A group summary represents the summary value calculated in a single group and is displayed in the group row or footer. Group summaries can be added using the GroupSummary method.

  NOTE

  Online Demo: The Group Summary online demo describes this feature in detail.

• A total summary represents the value of an aggregate function calculated over all rows within the grid and is displayed within the grid footer once the ShowFooter method is passed with the true parameter. The TotalSummary method allows you to add a total summary item.

  NOTE

  Online Demo: The Total Summary online demo describes this feature in detail.

You can use the Sum, Min, Max, Average, and Count aggregate functions to calculate summaries. You can define the summary type for each summary item using the SummaryType method.

View

@(Html.DevExpress()
    .BootstrapGridView("gridSummary")
    .KeyFieldName("OrderID")
    .Settings(settings => settings
        .ShowFooter(true)
        .ShowGroupPanel(true))
    .Columns(columns => {
        columns
            .Add()
            .FieldName("CompanyName");
        columns
            .AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(properties => properties.DisplayFormatString("c"));
        columns
            .Add()
            .FieldName("Quantity");
        columns
            .AddTextColumn()
            .FieldName("Total")
            .UnboundType(UnboundColumnType.Decimal)
            .UnboundExpression("UnitPrice * Quantity")
            .PropertiesTextEdit(properties => properties.DisplayFormatString("c"));
    })
    .TotalSummary(summary => {
        summary
            .Add()
            .FieldName("CompanyName")
            .SummaryType(SummaryItemType.Count);
        summary
            .Add()
            .FieldName("Total")
            .SummaryType(SummaryItemType.Sum);
    })
    .GroupSummary(summary => {
        summary
            .Add()
            .FieldName("Total")
            .SummaryType(SummaryItemType.Sum);
        summary
            .Add()
            .FieldName("CompanyName")
            .SummaryType(SummaryItemType.Count);
    })
    .Routes(routes => routes
    .MapRoute(r => r
        .Controller("GridView")
        .Action("GridView")))
    .Bind(Model))

Controller

using Microsoft.AspNetCore.Mvc;

namespace DevExpress.AspNetCore.Demos {
    public  class GridViewController : Controller {
        public ActionResult GridView() {
            return PartialView("GridView", NorthwindContext.GetInvoices());
        }
    }
}

Master-Detail View

The Grid View control allows you to build master-detail layouts of any complexity and nesting depth. Follow the steps below to create master-detail layouts:

1. Create a Master view file and all action methods required for the Master Grid View (each method should return the Master view using the PartialView method). Add a Master Grid View to the Master view and map routes from the view file to the created action methods using the MapRoute method.
2. Create a Detail view file and all action methods required for the Detail Grid View (each method should return the Detail view via the PartialView method). Add the Detail Grid View into the Detail view and map routes from the Grid View to the created action methods using the MapRoute method.
3. Enable displaying detail rows for the Master Grid View using the ShowDetailRow method.
4. Specify the Master Grid View’s detail row template using the DetailRow method. Add the Detail view to the template content. You can achieve this by calling the @​Html.Partial method or wrapping the Detail View in a View Component and invoking the component’s action (which returns the Detail view) from the template.
5. Pass the current row key from the Master Grid View to the Detail view actions. The Detail Grid View and its action methods should use this key to filter data by the current row. The current row key should be stored between requests and passed to the server side actions to display the correct data in the Detail Grid View. You can store it in the ViewData dictionary and pass it as a custom route parameter (using the MapRoute method).

NOTE

Online Demo: The Master-Detail View online demo describes this feature in detail.

View (MasterGridView)

@model IEnumerable
@inject NorthwindContext Northwind

@(Html.DevExpress()
    .BootstrapGridView<Customer>("masterGridView")
    .SettingsDetail(settings => settings.ShowDetailRow(true))
    .KeyFieldName(k => k.CustomerID)
    .Columns(columns => {
        columns.Add(c => c.ContactName);
        columns.Add(c => c.CompanyName);
        columns.Add(c => c.City);
        columns.Add(c => c.Country);
    })
    .Templates(templates => templates
        .DetailRow(detailRow => @<text>
            @Html.Partial("MasterDetail/DetailGridView",
                Northwind.GetInvoicesByCustomerId((string)detailRow.KeyValue),
                new ViewDataDictionary(ViewData) { { "CustomerId", detailRow.KeyValue } })
        </text>))
    .Routes(routes => routes
        .MapRoute(r => r.Controller("GridView").Action("MasterDetailView")))
    .Bind(Model))

View (DetailGridView)

@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView<Invoice>()
    .Name($"detailGridView{ViewData["CustomerId"]}")
    .KeyFieldName(k => k.OrderID, k => k.ProductID)
    .Columns(columns => {
        columns.Add(c => c.OrderID);
        columns.AddDateEditColumn(c => c.OrderDate);
        columns.Add(c => c.ShipName);
        columns.Add(c => c.UnitPrice);
        columns.Add(c => c.Quantity);
        columns.AddTextColumn()
            .FieldName("Total")
            .UnboundType(UnboundColumnType.Decimal)
            .UnboundExpression("Quantity * UnitPrice")
            .PropertiesTextEdit(properties =>
                properties.DisplayFormatString("c"));
    })
    .Routes(routes => routes
        .MapRoute(r => r.RouteValues(new {
            Controller = "GridView",
            Action = "MasterDetailView_Detail",
            customerId = ViewData["CustomerId"] })))
    .Bind(Model))

Controller

using Microsoft.AspNetCore.Mvc;

namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public ActionResult MasterDetailView() {
            return PartialView("MasterGridView", NorthwindContext.Customers);
        }
        public ActionResult MasterDetailView_Detail(string customerId) {
            ViewData["CustomerId"] = customerId;
            return PartialView("DetailGridView", NorthwindContext.GetInvoicesByCustomerId(customerId));
        }
    }
}

Column Types

The Grid View supports the following column types:

• Data
• Binary Image
• Button Edit
• Check
• Combo Box
• Data Edit
• Drop-Down Edit
• Hyperlink
• Image
• Memo
• Progress Bar
• Spin Edit
• Tag Box
• Text
• Time Edit
• Command

NOTE

Online Demo: The Column Types online demo describes each column type in detail.

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

@model IEnumerable<Task>

@(Html.DevExpress()
    .BootstrapGridView<Task>("grid")
    .Columns(columns => {
        columns.Add(m => m.Name);
        columns.AddTimeEditColumn("StartDate");
        columns.AddCheckColumn(m => m.Done);
        ...
    })
    .Bind(Model))

Export Data

The Grid View control supports exporting data to XLSX, XLS, RTF and CSV formats in any of the following modes:

• WYSIWYG
• Data-aware

Use the steps below to implement the export functionality in your application.

1. In the controller, get an IDevExpressControlAccessor interface instance via Dependency Injection (DI).
2. Add a separate controller action method for the export operation.
3. In the created action method, get an instance of the GridView’s state available through the GridView method of the IDevExpressControlAccessor interface instance. Pass a path to the Grid View control’s partial view and a model object in the GridView method. On a request to this action, the IDevExpressControlAccessor interface instance finds the Grid View control in the specified view file and obtains the control’s settings.
4. Call an exporting method depending on the target format: ExportToXlsx, ExportToXls, ExportToRtf, ExportToCsv. If you need to set up format-specific options, use the exporting method’s overload that accepts the options parameter.

Exporting to XLS and XLSX formats is performed in data-aware mode by default. To use the WYSIWYG mode, pass the ExportType.WYSIWYG value to the corresponding ExportType method. Exporting to the CSV and RTF formats is always performed in the WYSIWYG mode.

NOTE

Online Demo: The Export online demo describes this feature in detail.

View

@model IEnumerable
@using(Html.BeginForm()) {
    @(Html.DevExpress()
            .BootstrapButton("wysiwygXLSX")
            .Text("XLSX")
            .UseSubmitBehavior(true)
            .Route(route => route.Action("ExportToXlsx").Controller("GridView")))

    @Html.Partial("ExportingPartial", Model)
}

View (ExportingPartial)

@(Html.DevExpress()
    .BootstrapGridView("wysiwygExportGrid")
    .Columns(columns => {
        columns.Add().FieldName("ProductName");
        columns.Add().FieldName("Category");
        columns.Add().FieldName("Supplier");
        columns.Add().FieldName("QuantityPerUnit");
        columns
            .AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(p => p.DisplayFormatString("c"));
    })
    .Settings(settings => settings.ShowGroupPanel(true))
    .Routes(routes => routes
        .MapRoute(r => r.Action("ExportingPartial").Controller("GridView")))
    .Bind(Model))

Controller

using DevExpress.AspNetCore.Bootstrap;
using DevExpress.AspNetCore.DemoModels;
using DevExpress.Export;
using Microsoft.AspNetCore.Mvc;

namespace DevExpress.AspNetCore.Demos {
    public class GridViewController : Controller {
        public GridViewController(IDevExpressControlAccessor devExpress, NorthwindContext northwindContext) {
            DevExpress = devExpress;
            NorthwindContext = northwindContext;
        }

        protected IDevExpressControlAccessor DevExpress { get; }
        protected NorthwindContext NorthwindContext { get; }

        public IActionResult Exporting() {
            return PartialView("Exporting", NorthwindContext.GetDetailedProductsInfo());
        }
        public IActionResult ExportingPartial() {
            return PartialView("ExportingPartial", NorthwindContext.GetDetailedProductsInfo());
        }
        public IActionResult ExportToXlsx() {
            var grid = DevExpress.GridView("ExportingPartial", NorthwindContext.GetDetailedProductsInfo());
            return grid.ExportToXlsx(xlsx => xlsx.ExportType(ExportType.WYSIWYG));
        }
    }
}

Refer to the online demos at https://demos.devexpress.com/aspnetcore-bootstrap/GridView for more information on the Grid View control’s features and API.