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 sort order within the sorted column. The grid can be sorted against multiple columns by clicking the required column headers while holding down the shift key.

The AllowSort method (available through SettingsBehavior) defines whether the grid can be sorted. The default value is true.

The following Column's methods allow you to setup the default sorting state for each column:

You can also use the client-side API to change sorting:

Contact Name
Company Name Country City Region
Alejandra CaminoRomero y tomilloSpainMadrid 
Alexander FeuerMorgenstern GesundkostGermanyLeipzig 
Ana TrujilloAna Trujillo Emparedados y heladosMexicoMéxico D.F. 
Anabela DominguesTradição HipermercadosBrazilSao PauloSP
André FonsecaGourmet LanchonetesBrazilCampinasSP
Ann DevonEastern ConnectionUKLondon 
Annette RouletLa maison d'AsieFranceToulouse 
Antonio MorenoAntonio Moreno TaqueríaMexicoMéxico D.F. 
Aria CruzFamilia ArquibaldoBrazilSao PauloSP
Art BraunschweigerSplit Rail Beer & AleUSALanderWY
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView<DevExpress.AspNetCore.DemoModels.Customer>("sortingGrid")
    .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("Sorting")))
    .Bind(Model))
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 Sorting() {
            return PartialView("SortingAndGrouping/Sorting", NorthwindContext.Customers);
        }
    }
}

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 (available through SettingsBehavior) were called with the true value.

The ShowGroupPanel method (available through Settings) controls the group panel's visibility.

The following Column's methods are used to setup the grouping functionality for each column:

You can also use client-side API to specify change grouping:

Contact Name Company Name City Region
Country: Argentina
 Patricio SimpsonCactus Comidas para llevarBuenos Aires 
 Yvonne MoncadaOcéano Atlántico Ltda.Buenos Aires 
 Sergio GutiérrezRancho grandeBuenos Aires 
Country: Austria
 Roland MendelErnst HandelGraz 
 Georg PippsPiccolo und mehrSalzburg 
Country: Belgium
 Catherine DeweyMaison DeweyBruxelles 
 Pascale CartrainSuprêmes délicesCharleroi 
@using DevExpress.AspNetCore.DemoModels
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView<Customer>("gridWithGroups")
    .Settings(settings => settings.ShowGroupPanel(true))
    .SettingsBehavior(behavior => behavior.AutoExpandAllGroups(true))
    .Columns(columns => {
        columns.Add(m => m.ContactName);
        columns.Add(m => m.CompanyName);
        columns.Add(m => m.Country).GroupIndex(0);
        columns.Add(m => m.City);
        columns.Add(m => m.Region);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("Grouping")))
    .Bind(Model))
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public IActionResult Grouping() {
            return PartialView("SortingAndGrouping/Grouping", NorthwindContext.Customers);
        }
    }
}

Merged Groups

This demo illustrates how to merge grouped columns in the Grid View. In this mode, a user can group the grid data by multiple columns at once.

Call the SettingsBehavior.MergeGroupsMode method (available through SettingsBehavior) with the Always argument to enable merged grouping.

Contact Name Company Name
Country: Argentina; City: Buenos Aires
 Patricio SimpsonCactus Comidas para llevar
 Yvonne MoncadaOcéano Atlántico Ltda.
 Sergio GutiérrezRancho grande
Country: Austria; City: Graz
 Roland MendelErnst Handel
Country: Austria; City: Salzburg
 Georg PippsPiccolo und mehr
Country: Belgium; City: Bruxelles
 Catherine DeweyMaison Dewey
@using DevExpress.AspNetCore.DemoModels
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView<Customer>("gridViewMergedGroups")
    .Settings(settings => settings.ShowGroupPanel(true))
    .SettingsBehavior(behavior => behavior.AutoExpandAllGroups(true).MergeGroupsMode(GridViewMergeGroupsMode.Always))
    .Columns(columns => {
        columns.Add(m => m.ContactName);
        columns.Add(m => m.CompanyName);
        columns.Add(m => m.Country);
        columns.Add(m => m.City);
        // TODO uncomment, see T601479
        //columns.Add(m => m.Country).GroupIndex(0);
        //columns.Add(m => m.City).GroupIndex(1);
    })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("MergedGroups")))
    .Bind(Model)
    .OnBeforeRender((grid, args) => { // TODO remove, see T601479
        if(grid.IsPartialUpdate)
            return;
        grid.DataColumns["Country"].GroupIndex = 0;
        grid.DataColumns["City"].GroupIndex = 1;
    }))

Interval Grouping

This demo illustrates the Grid View control’s interval grouping feature. This feature allows you to group the values within text columns against individual characters, or group date-time columns by month, year, or date. You can enable interval grouping for a column using the column’s Settings -> GroupInterval method.

In this demo, the Grid View’s Order Date column is grouped by month (the GroupInterval method is called with the DateMonth argument).

Company Name Product Name Product Amount
Order Date: July 2014
Order Date: August 2014
Order Date: September 2014 (Continued on the next page)
 Vins et alcools ChevalierGnocchi di nonna Alice120
 LILA-SupermercadoQueso Cabrales204
 LILA-SupermercadoPavlova420
 LILA-SupermercadoGudbrandsdalsost435
 LILA-SupermercadoQueso Cabrales204
 Blondesddsl père et filsChartreuse verte840
 Blondesddsl père et filsMozzarella di Giovanni560
@using DevExpress.AspNetCore.DemoModels
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView<CustomerReport>("gridWithIntervalGroups")
    .Columns(columns => {
        columns
            .Add(c => c.OrderDate)
            .GroupIndex(0)
            .Settings(s => s
                .GroupInterval(DevExpress.XtraGrid.ColumnGroupInterval.DateMonth));
        columns.Add(c => c.CompanyName);
        columns.Add(c => c.ProductName);
        columns.Add(c => c.ProductAmount);
    })
    .Settings(settings => settings.ShowGroupPanel(true))
    .OnInitialized((s, e) => {
        s.ExpandRow(2);
     })
    .Routes(routes => routes
        .MapRoute(r => r
            .Controller("GridView")
            .Action("IntervalGrouping")))
    .Bind(Model))

Using Grouping API

The Bootstrap Grid View control provides a comprehensive client and server-side API for sorting and grouping data. This demo illustrates a programmatic approach to grouping Grid View data on the server.

The GridView control's API is represented by the IBootstrapGridView interface. You can obtain an instance of this interface by calling the GridView method of an IDevExpressControlAccessor object available using the Dependency Injection.

To group data by a specific grid column's values, pass this column to the GroupBy method of the Grid View (an IBootstrapGridView instance), or call the GroupBy method of the column (an IBootstrapGridViewDataColumn instance). You can call these methods for several columns to perform multi-level grouping.

Contact Name Company Name City Region
Country: Argentina
 Patricio SimpsonCactus Comidas para llevarBuenos Aires 
 Yvonne MoncadaOcéano Atlántico Ltda.Buenos Aires 
 Sergio GutiérrezRancho grandeBuenos Aires 
Country: Austria
 Roland MendelErnst HandelGraz 
 Georg PippsPiccolo und mehrSalzburg 
Country: Belgium
 Catherine DeweyMaison DeweyBruxelles 
 Pascale CartrainSuprêmes délicesCharleroi 
@model IEnumerable
<div class="form-inline">
    @(Html.DevExpress()
        .BootstrapComboBox("groupingPresets")
        .ValueType(typeof(GroupingPresets))
        .Caption("Grouping presets")
        .ClientSideEvents(events => events
            .SelectedIndexChanged("onGroupingPresetsChanged"))
        .Bind(Enum.GetValues(typeof(GroupingPresets)))
        .Value(GroupingPresets.Country))
    <div class="form-group btn-group mx-sm-3">
        @(Html.DevExpress()
            .BootstrapButton("collapseButton")
            .Text("Collapse All Rows")
            .ClientSideEvents(events => events.Click("onCollapseAllClick")))
        @(Html.DevExpress()
            .BootstrapButton("expandButton")
            .Text("Expand All Rows")
            .ClientSideEvents(events => events.Click("onExpandAllClick")))
    </div>
</div>
<div id="grid-groupingAPI-wrapper">
    @Html.Partial("SortingAndGrouping/UsingGroupingAPIPartial", Model)
</div>
@model IEnumerable
@(Html.DevExpress()
    .BootstrapGridView<DevExpress.AspNetCore.DemoModels.Customer>("gridViewGroupingApi")
    .Settings(settings => settings.ShowGroupPanel(true))
    .Columns(columns => {
        columns.Add(m => m.ContactName);
        columns.Add(m => m.CompanyName);
        columns.Add(m => m.Country).GroupIndex(1);
        columns.Add(m => m.City);
        columns.Add(m => m.Region);
    })
    .Routes(routes => routes
        .MapRoute(route => route
            .Controller("GridView")
            .Action("UsingGroupingAPIPartial"))
        .MapRoute(route => route
            .RouteType(GridViewRouteType.Custom)
            .Controller("GridView")
            .Action("GroupBy")))
    .OnInitialized((grid, e) => {
        if(!grid.IsPartialUpdate)
            grid.ExpandAll();
    })
    .SettingsPager(pager => pager.NumericButtonCount(8))
    .CssClassesPager(css => css
        .PageNumber("hiddent-sm")
        .Ellipsis("hiddent-sm")
        .Summary("hiddent-sm"))
    .Bind(Model))
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(IDevExpressControlAccessor devExpress, NorthwindContext northwindContext) {
            DevExpress = devExpress;
            NorthwindContext = northwindContext;
        }
        protected IDevExpressControlAccessor DevExpress { get; }
        protected NorthwindContext NorthwindContext { get; }
        public IActionResult UsingGroupingAPI() {
            return PartialView("SortingAndGrouping/UsingGroupingAPI", NorthwindContext.Customers);
        }
        public IActionResult UsingGroupingAPIPartial() {
            return PartialView("SortingAndGrouping/UsingGroupingAPIPartial", NorthwindContext.Customers);
        }
        public IActionResult GroupBy(GroupingPresets groupingPresets) {
            var grid = DevExpress.GridView("SortingAndGrouping/UsingGroupingAPIPartial", NorthwindContext.Customers);
            grid.ClearSort();
            switch(groupingPresets) {
                case GroupingPresets.Country:
                    grid.DataColumns["Country"].GroupBy();
                    break;
                case GroupingPresets.CountryAndCity:
                    grid.DataColumns["Country"].GroupBy();
                    grid.DataColumns["City"].GroupBy();
                    break;
                case GroupingPresets.CompanyName:
                    grid.DataColumns["CompanyName"].GroupBy();
                    break;
            }
            grid.ExpandAll();
            return grid.GetActionResult();
        }
    }
}
using System.ComponentModel.DataAnnotations;

namespace DevExpress.AspNetCore.Demos {
    public enum GroupingPresets {
        Country,

        [Display(Name = "Country, City")]
        CountryAndCity,

        [Display(Name = "Company Name")]
        CompanyName
    };
}
function onCollapseAllClick(args) {
    gridViewGroupingApi.collapseAll();
}
function onExpandAllClick(args) {
    gridViewGroupingApi.expandAll();
}
function onGroupingPresetsChanged(args) {
    gridViewGroupingApi.performCallback({
        "groupingPresets": this.getValue()
    });
}
Screen Size
Color Themes
Demo QR Code