HTML5 - JavaScript Data Grid - Banded Column Layout (Coming soon in v16.1)
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
Free DevExpress Products - Get Your Copy Today
The DevExpress Team