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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.