Multi-Column Headers
The multi-column headers of the TreeList represent a tree-like structure where one or more columns can be grouped together by a common header.
That common header in turn can be a child of another upper MultiColumn header which can also span both columns and other headers. For a runnable example, refer to the demo on implementing multi-column headers in the TreeList.
columns.Group(group => group
.Title("Personal Info")
.Columns(info =>
{
info.Add().Field(x => x.LastName).Width(120);
info.Group(g => g
.Title("Location")
.Columns(location =>
{
location.Add().Field(c => c.City).Width(140);
location.Add().Field(c => c.Country).Width(140);
})
);
info.Add().Field(x => x.Phone);
})
);
<kendo-treelist name="treelist">
<columns>
<treelist-column title="Personal Info">
<columns>
<treelist-column field="LastName" width="120px"></treelist-column>
<treelist-column title="Location">
<columns>
<treelist-column field="City" width="140px"></treelist-column>
<treelist-column field="Country" width="140px"></treelist-column>
</columns>
</treelist-column>
<treelist-column field="Phone"></treelist-column>
</columns>
</treelist-column>
</columns>
<!-- Other configuration. -->
</kendo-treelist>
The previous example will present the following output.
