jQuery TreeList - columns.columns
Unlike normal columns, band columns do not hold data. Instead, they collect two or more columns under one column header. To set up this layout, declare the band column using a hierarchical structure. For this, assign the nested columns to the columns field of the band column. For example, the following code declares the "Address" band column and nests three columns within it.
jQuery
$(function() {
$("#treeListContainer").dxTreeList({
// ...
columns: [{
caption: "Address",
columns: ["City", "Street", "Apartment"]
}, {
// ...
}]
});
});Angular
<dx-tree-list ... >
<dxi-column caption="Address">
<dxi-column dataField="City"></dxi-column>
<dxi-column dataField="Street"></dxi-column>
<dxi-column dataField="Apartment"></dxi-column>
</dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxTreeListModule
],
// ...
})A nested column has almost every option a regular column has. These options are described in the columns section of the Reference.
For example, the following code specifies the width and sortOrder options of the "Street" column nested within the fixed "Address" band column.
jQuery
$(function() {
$("#treeListContainer").dxTreeList({
// ...
columns: [{
caption: "Address",
fixed: true,
fixedPosition: "right",
columns: [
"City", {
dataField: "Street",
width: 100,
sortOrder: "asc"
},
"Apartment"
]
}, {
// ...
}]
});
});Angular
<dx-tree-list ... >
<dxi-column
caption="Address"
[fixed]="true"
fixedPosition="right">
<dxi-column dataField="City"></dxi-column>
<dxi-column dataField="Street" [width]="100" sortOrder="asc"></dxi-column>
<dxi-column dataField="Apartment"></dxi-column>
</dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxTreeListModule
],
// ...
})Band columns support hierarchies of any nesting level. It means that the following structure is acceptable.
jQuery
$(function() {
$("#treeListContainer").dxTreeList({
// ...
columns: [{
caption: "A",
columns: [ "A1", "A2", {
caption: "A3",
columns: ["A31", "A32", {
caption: "A33",
columns: ["A331", "A332", "A333"]
}]
}]
}, {
caption: "B",
columns: // ...
}]
});
});Angular
<dx-tree-list ... >
<dxi-column caption="A">
<dxi-column dataField="A1"></dxi-column>
<dxi-column dataField="A2"></dxi-column>
<dxi-column caption="A3">
<dxi-column dataField="A31"></dxi-column>
<dxi-column dataField="A32"></dxi-column>
<dxi-column caption="A33">
<dxi-column dataField="A331"></dxi-column>
<dxi-column dataField="A332"></dxi-column>
<dxi-column dataField="A333"></dxi-column>
</dxi-column>
</dxi-column>
</dxi-column>
<dxi-column caption="B">
...
</dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxTreeListModule
],
// ...
})Band columns have the isBand flag. Banded columns have the ownerBand option set. Use these options to distinguish band and banded columns from regular ones in code.