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 SettingsBehavior.AllowSort property defines whether the grid can be sorted. The default value is true.

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
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource">
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" SortIndex="0" SortOrder="Ascending" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Region" />
    </Columns>
</dx:BootstrapGridView>

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 the SettingsBehavior.AllowGroup and SettingsBehavior.AllowSort grid properties are set to true.

The Settings.ShowGroupPanel option controls the group panel's visibility.

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 
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource">
    <Settings ShowGroupPanel="True" />
    <SettingsBehavior AutoExpandAllGroups="true" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" GroupIndex="0" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Region" />
    </Columns>
</dx:BootstrapGridView>

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. Drag an appropriate column header to the group panel and arrange. To remove a column from the merged groups, drag this column back to the grid columns.

Set the SettingsBehavior.MergeGroupsMode property to Always 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
<dx:BootstrapGridView runat="server" DataSourceID="CustomersDataSource" KeyFieldName="CustomerID">
    <Settings ShowGroupPanel="True" />
    <SettingsBehavior MergeGroupsMode="Always" AutoExpandAllGroups="true" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" GroupIndex="0" />
        <dx:BootstrapGridViewDataColumn FieldName="City" GroupIndex="1" />
    </Columns>
</dx:BootstrapGridView>

Using Grouping API

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

To group data by a specific grid column's values, pass this column to the Bootstrap Grid View’s GroupBy method. You can call this method for several columns to perform multi-level grouping.


Contact Name Company Name Region
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 
 City: Salzburg
  Georg PippsPiccolo und mehr 
<dx:BootstrapGridView ID="GridViewGroupingApi" ClientInstanceName="grid" runat="server" DataSourceID="CustomersDataSource"
    KeyFieldName="CustomerID" OnCustomCallback="GridViewGroupingApi_CustomCallback">
    <Settings ShowGroupPanel="True" />
    <Columns>
        <dx:BootstrapGridViewDataColumn FieldName="ContactName" />
        <dx:BootstrapGridViewDataColumn FieldName="CompanyName" />
        <dx:BootstrapGridViewDataColumn FieldName="Country" />
        <dx:BootstrapGridViewDataColumn FieldName="City" />
        <dx:BootstrapGridViewDataColumn FieldName="Region" />
    </Columns>
</dx:BootstrapGridView>
protected void Page_Load(object sender, EventArgs e) {
    if(!IsPostBack)
        ApplyGroupState("CountryAndCity");
}
protected void GridViewGroupingApi_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) {
    ApplyGroupState(e.Parameters);
}
void ApplyGroupState(string layout) {
    GridViewGroupingApi.BeginUpdate();
    try {
        GridViewGroupingApi.ClearSort();
        switch(layout) {
            case "Country":
                GridViewGroupingApi.GroupBy(GridViewGroupingApi.Columns["Country"]);
                break;
            case "CountryAndCity":
                GridViewGroupingApi.GroupBy(GridViewGroupingApi.Columns["Country"]);
                GridViewGroupingApi.GroupBy(GridViewGroupingApi.Columns["City"]);
                break;
            case "CompanyName":
                GridViewGroupingApi.GroupBy(GridViewGroupingApi.Columns["CompanyName"]);
                break;
        }
    }
    finally {
        GridViewGroupingApi.EndUpdate();
    }
    GridViewGroupingApi.ExpandAll();
}
function onCollapseAllClick() {
    grid.CollapseAll();
}
function onExpandAllClick() {
    grid.ExpandAll();
}
function onApplyLayout(index) {
    grid.PerformCallback(index);
}
Screen Size
Color Themes
Demo QR Code