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.
Alejandra Camino | Romero y tomillo | Spain | Madrid | |
Alexander Feuer | Morgenstern Gesundkost | Germany | Leipzig | |
Ana Trujillo | Ana Trujillo Emparedados y helados | Mexico | México D.F. | |
Anabela Domingues | Tradição Hipermercados | Brazil | Sao Paulo | SP |
André Fonseca | Gourmet Lanchonetes | Brazil | Campinas | SP |
Ann Devon | Eastern Connection | UK | London | |
Annette Roulet | La maison d'Asie | France | Toulouse | |
Antonio Moreno | Antonio Moreno Taquería | Mexico | México D.F. | |
Aria Cruz | Familia Arquibaldo | Brazil | Sao Paulo | SP |
Art Braunschweiger | Split Rail Beer & Ale | USA | Lander | WY |
<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: Argentina |
| Patricio Simpson | Cactus Comidas para llevar | Buenos Aires | |
| Yvonne Moncada | Océano Atlántico Ltda. | Buenos Aires | |
| Sergio Gutiérrez | Rancho grande | Buenos Aires | |
| Country: Austria |
| Roland Mendel | Ernst Handel | Graz | |
| Georg Pipps | Piccolo und mehr | Salzburg | |
| Country: Belgium |
| Catherine Dewey | Maison Dewey | Bruxelles | |
| Pascale Cartrain | Suprêmes délices | Charleroi | |
<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: Argentina; City: Buenos Aires |
| Patricio Simpson | Cactus Comidas para llevar |
| Yvonne Moncada | Océano Atlántico Ltda. |
| Sergio Gutiérrez | Rancho grande |
| Country: Austria; City: Graz |
| Roland Mendel | Ernst Handel |
| Country: Austria; City: Salzburg |
| Georg Pipps | Piccolo und mehr |
| Country: Belgium; City: Bruxelles |
| Catherine Dewey | Maison 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>
<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: 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 |
<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: Argentina |
| | City: Buenos Aires |
| | Patricio Simpson | Cactus Comidas para llevar | |
| | Yvonne Moncada | Océano Atlántico Ltda. | |
| | Sergio Gutiérrez | Rancho grande | |
| Country: Austria |
| | City: Graz |
| | Roland Mendel | Ernst Handel | |
| | City: Salzburg |
| | Georg Pipps | Piccolo und mehr | |
<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);
}