Band Columns

Unlike data columns, band columns do not hold any data. Instead, they collect two or more data columns under one column header.

DevExtreme HTML5 JavaScript TreeList BandColumns MultiRowHeaders BandedLayout

To set up this layout, describe the hierarchy of columns directly in an object of the columns array. For example, the following code bands three columns under the "Contacts" header.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Contacts",
            columns: ["Email", "Mobile_Phone", "Skype"]
        }]
    });
});

If you use the customizeColumns function to configure columns, the hierarchy cannot be described declaratively. To band columns in this case, use the isBand and ownerBand options. Using the same options, you can distinguish band and nested columns from other columns in code.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        customizeColumns: function(columns) {
            columns.push({ // Pushes the "Contacts" band column into the "columns" array
                caption: "Contacts",
                isBand: true
            });

            var contactsFields = ["Email", "Mobile_Phone", "Skype"];
            for (var i = 0; i < columns.length-1; i++) {
                if (contactsFields.indexOf(columns[i].dataField) > -1) // If the column belongs to "Contacts",
                    columns[i].ownerBand = columns.length-1; // assigns "Contacts" as the owner band column
            }
        }
    });
});
NOTE
Nested columns have almost every option of a data column, except fixed and fixedPosition. Band columns, on the contrary, support a very limited set of options; all of them are listed in the isBand option's description. Note that band columns must not have the dataField option set.

Band columns support hierarchies of any nesting level making the following structure acceptable.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: 'A',
            columns: [ 'A1', 'A2', {
                caption: 'A3',
                columns: ['A31', 'A32', {
                    caption: 'A33',
                    columns: ['A331', 'A332', 'A333']
                }]
            }]
        }]
    });
});