HTML5 - JavaScript Data Grid - Banded Column Layout (Coming soon in v16.1)

ASP.NET Team Blog
20 May 2016

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.

DevExpress HTML5 Data Grid - Banded Column Layout

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:

DevExpress HTML5 Data Grid - Banded Column Layout - Column Chooser

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:

    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 following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.