We're introducing a great new DataGrid feature – Banded Column Layout. With this feature, you can organize columns into the logical groups (bands), so that you can easily display and reorder entire column sets.
While a column is banded, all existing column features still work great:
- Column Resizing
- Column Reordering
- Column Fixing
- Column Chooser
- Export
In fact, here's the column chooser in a banded layout:
Banded Column Layout is easy to define and customize. Here's a snippet that shows how the population column from the image above is banded:
$("#gridContainer").dxDataGrid({
dataSource: countries,
columnAutoWidth: true,
allowColumnReordering: true,
columns: ["Country", {
headerCellTemplate: function(container) {
container.append($("<div>Area, km<sup>2</sup></div>"));
},
dataField: "Area"
}, {
caption: "Population",
columns: [{
caption: "Total",
dataField: "Population_Total",
format: "fixedPoint"
}, {
caption: "Urban",
dataField: "Population_Urban",
format: "percent"
}]
}, {
caption: "Nominal GDP",
columns: [{
caption: "Total, mln $",
dataField: "GDP_Total",
format: "fixedPoint",
sortOrder: "desc"
}, {This feature is a part of the DevExtreme v16.1 release. Thanks!
Create highly responsive web apps for touch-enabled devices and traditional desktops.
From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.
Download a free and fully-functional version of DevExtreme now: Download DevExtreme
Showcase Your Apps on DevExpress.com
Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to
clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.