jquery.netasp.net-mvckendo-uikendo-treelist

How to change column title dynamically in Kendo UI TreeList?


I need to change the column header/title according to the data. is there any way to achieve this functionality.

Currently the title is hard coded as follows:

        $("#grid").kendoTreeList({
            dataSource: drillDownDataSource,
            resizable: true,
            autoBind: true,
            columns: [
                { field: "Title", title: " ", width: "297px" },
                { field: "EndingBalance",  title: "EndingBalance",  template: "#: FormatNumberToEn(EndingBalance) #" },
                { field: "EndingBalance1", title: "EndingBalance1", template: "#: FormatNumberToEn(EndingBalance1) #" },
                { field: "EndingBalance2", title: "EndingBalance2", template: "#: FormatNumberToEn(EndingBalance2) #" },
                { field: "EndingBalance3", title: "EndingBalance3", template: "#: FormatNumberToEn(EndingBalance3) #" },
                { field: "EndingBalance4", title: "EndingBalance4", template: "#: FormatNumberToEn(EndingBalance4) #" }
            ],
            dataBound: function (e) {
                $('#grid').show();
                $('#GridPanelLoading').hide();
            },

Solution

  • see Demo

    1- use headerTemplate

    $("#treelist").kendoTreeList({
            columns: [ {
                field: "name",
                headerTemplate: '#= getHeader() #'
            }],
    ...
    

    2- or change column header by jQuery

    $("#treelist thead [data-field=name]").html("New Title")