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.
Geert Depickere
Geert Depickere


In the example I see 3 levels of bands. Is there a limit to the number of levels?

And a more general question: will the javascript components have support for Angular 2?

19 May 2016
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)


Yes, it will support Angular 2.

23 May 2016
Marion (DevExpress Support)
Marion (DevExpress Support)


There is no limitation on the number of levels. A limitation is only imposed on your container size.

24 May 2016

Is there a Beta download for DevExtreme?

24 May 2016
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi DJ Lee,

Yes, it's available now through your download center.

24 May 2016
Vanderlei de Castro Jr
Vanderlei de Castro Jr


When the 1.6 final version is released?

3 June 2016
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Vanderlei,

It's going to be very soon. Please keep an eye on our blogs/newsletter for the announcement.

6 June 2016
nguyenquoc dang
nguyenquoc dang

Hello Mehul Harry,

I using dashboardViewer MVC and design them on visual studio.

Can I use the script you post on above to Dashboard Viewer MVC ?

3 April 2017

Please login or register to post comments.