Change column header Treelist KendoUI

Question

I want to be able to change my column header dynamically triggered by year picker onChange, but I can't find the proper style to handle it.

I've tried to modify with a check on the inspect element, but it also didn't work.

And my code:

      $("#monthpicker").kendoDatePicker({
            start: "year",
            depth: "year",
            format: "yyyy",
            dateInput: true,

            change: function() {
                    var year = kendo.toString($("#monthpicker").data("kendoDatePicker").value(), 'yyyy');
                    $("#treelist").data("kendoTreeList").dataSource.read({start: year});
                    $(".k-grid-header th.k-header:first-child").text(year);

            }
        });

And it should be like this: (just change on the column header above Month column)

is there anyone experienced with this? Thanks.

Answer 1

Your query .k-grid-header th.k-header:first-child is selecting the wrong headers.

I propose using a headerTemplate with a placeholder, for instance:

headerTemplate: function(x) { 
    return '<span class="year-goes-here"></span>'
}

And then set the year via:

$("#treelist").find(".year-goes-here").text(2018)

Working example: https://dojo.telerik.com/uXuwIDeK