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);
        }
    }
}

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("colapseButton")
            .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")))
    ...
    .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(s, e) {
    gridViewGroupingApi.CollapseAll();
}
function onExpandAllClick(s, e) {
    gridViewGroupingApi.ExpandAll();
}
function onGroupingPresetsChanged(s, e) {
    gridViewGroupingApi.PerformCallback({
        "groupingPresets": groupingPresets.GetValue()
    });
}
Screen Size
Color Themes
Demo QR Code