Sorting and Grouping

The Grid View control supports sorting and grouping by an unlimited number of columns.

An end-user can sort the grid by clicking the header of a column by which the grid should be sorted. The sort order is indicated by an arrow glyph 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 grouping feature allows an end-user to group data within the grid by dragging column headers to the group panel.

The SettingsBehavior.AllowSort property defines whether or not the grid can be sorted. Data grouping is allowed if the SettingsBehavior.AllowGroup and SettingsBehavior.AllowSort grid properties are set to true. The group panel's visibility is controlled by the Settings.ShowGroupPanel option.

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="CustomersDataSource1">
    <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>

Sorting and 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 values of a specific grid column, pass this column to the Bootstrap Grid View’s GroupBy method. You can call this method for several columns to perform multi-level grouping. To clear all sorting and grouping settings applied to the Grid View, call the ClearSort method.


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="GridView2" ClientInstanceName="gridView2" runat="server" DataSourceID="CustomersDataSource2"
    KeyFieldName="CustomerID" OnCustomCallback="GridView2_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