Customize Column Headers

The TreeList generates column headers based on the names of data fields by default. For example, if a data field is "fullName", the column header text is "Full Name".

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget TreeList ColumnHeaders

Specify the columns | caption option to change the column header text.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [
            { dataField: "companyName", caption: "Company" },
            // ...
        ]
    });
 });

If you need a more specific customization, define a custom template in the columns | headerCellTemplate option. This option accepts a function or template container.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Title",
            caption: "Position",
            headerCellTemplate: function (header, info) {
                $('<div>')
                    .html(info.column.caption)
                    .css('font-size', '16px')
                    .appendTo(header);
            }
        }, {
            dataField: "Address",
            headerCellTemplate: $('<i style="color: black">Mailing Address</i>')
        }]
    });
 });

To hide column headers, assign false to the showColumnHeaders option.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        showColumnHeaders: false
    });
 });
See Also