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
ASPXCopy 
<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>
    <SettingsPager NumericButtonCount="6"></SettingsPager>
</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 Settings.ShowGroupPanel property is set to true.

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

Country
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 
ASPXCopy 
<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>
    <SettingsPager NumericButtonCount="6"></SettingsPager>
</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.

Set the SettingsBehavior.MergeGroupsMode property to Always to enable merged grouping.

Country
City
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
ASPXCopy 
<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>
    <SettingsPager NumericButtonCount="6"></SettingsPager>
</dx:BootstrapGridView>

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 GridViewDataColumnSettings.GroupInterval property. Refer to the ColumnGroupInterval document to learn about the supported interval types.

In this demo, the Grid View's Order Date column is grouped by month (the GroupInterval property is set to DateMonth).

Order Date
Customer ID Ship Name Ship Address Ship City Ship Country
Order Date: July 2014
Order Date: August 2014
Order Date: September 2014
Order Date: October 2014
Order Date: November 2014
Order Date: December 2014
Order Date: January 2015
Order Date: February 2015
Order Date: March 2015
Order Date: April 2015
ASPXCopy 
<dx:BootstrapGridView runat="server" DataSourceID="OrdersDataSource" KeyFieldName="OrderID">
     <Columns>
         <dx:BootstrapGridViewDataColumn FieldName="OrderDate" GroupIndex="0">
             <Settings GroupInterval="DateMonth" />
         </dx:BootstrapGridViewDataColumn>
         <dx:BootstrapGridViewDataColumn FieldName="CustomerID" />
         <dx:BootstrapGridViewDataColumn FieldName="ShipName" />
         <dx:BootstrapGridViewDataColumn FieldName="ShipAddress" />
         <dx:BootstrapGridViewDataColumn FieldName="ShipCity" />
         <dx:BootstrapGridViewDataColumn FieldName="ShipCountry" />
     </Columns>
     <ClientSideEvents Init="function(s, e) { s.ExpandRow(2); }" />
     <Settings ShowGroupPanel="True" />
     <SettingsBehavior MergeGroupsMode="Always" />
     <SettingsPager NumericButtonCount="6"></SettingsPager>
 </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.


Country
City
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 
ASPXC#JSCopy 
<div class="form-inline">
    <dx:BootstrapComboBox runat="server" ValueType="System.String" SelectedIndex="1" Caption="Group by">
        <Items>
            <dx:BootstrapListEditItem Text="Country" Value="Country" />
            <dx:BootstrapListEditItem Text="Country, City" Value="CountryAndCity" />
            <dx:BootstrapListEditItem Text="Company Name" Value="CompanyName" />
        </Items>
        <ClientSideEvents SelectedIndexChanged="function(s) { onApplyLayout(s.GetValue()); }" />
    </dx:BootstrapComboBox>
    <div class="form-group btn-group mx-sm-3">
        <dx:BootstrapButton runat="server" Text="Collapse All Rows" UseSubmitBehavior="false"
            AutoPostBack="false">
            <ClientSideEvents Click="onCollapseAllClick" />
        </dx:BootstrapButton>
        <dx:BootstrapButton runat="server" Text="Expand All Rows" UseSubmitBehavior="false"
            AutoPostBack="false">
            <ClientSideEvents Click="onExpandAllClick" />
        </dx:BootstrapButton>
    </div>
</div>
<br />
<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>
    <SettingsPager NumericButtonCount="6"></SettingsPager>
</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