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

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:

$("#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

8 comment(s)
Geert Depickere

Nice!

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)

Geert,

Yes, it will support Angular 2.

23 May, 2016
Marion (DevExpress Support)

Geert,

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

24 May, 2016
dj_lee

Is there a Beta download for DevExtreme?

24 May, 2016
Mehul Harry (DevExpress)

Hi DJ Lee,

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

24 May, 2016
Vanderlei de Castro Jr

Hi,

When the 1.6 final version is released?

3 June, 2016
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

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.