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 NameCompany NameCountryCityRegion
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 NameCompany NameCityRegion
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>

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 NameCompany NameRegion
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>
Screen Size
Color Themes
Demo QR Code