javascript - Updating the custom header of Kendo Scheduler control - dateHeaderTemplate -

i have written custom header kendo scheduler. rendered below

the code used arrive @ above ui below , worked charm.(thanks dion dirza),

<script id="tmpdateheader" type="text/x-kendo-template">     <span class="k-nav-day" data-dt="#=kendo.tostring(date, 'dd/mm/yyyy')#">         <u>#=kendo.tostring(date, "dd/m")#</u> - ({dc}%)     </span> </script>  $("#scheduler").kendoscheduler({      dateheadertemplate: kendo.template($("#tmpdateheader").html()) } 

issue

now, updating 1 of events in kendo scheduler. during update, want manually change column day header percentage based on data, 1% 5% (which come db) without refreshing entire scheduler control.

real time scenario : when add more events day, percentage should increase in column header. logic percentage , color available in api.

solution approach

here think, need update value using jquery

issue resolved: updated data source on update fire.

you can take on data source change event. suppose have date property in event model. need grab updated event date , select match date header that.

here example code:

var datechanged = null;  function ondschange(e) {     var action = e.action;      switch(action) {     case "itemchange":         var items = e.items; // item have changed         var item = items[0]; // assume not doing batch editing           datechanged = item.date; // if doing batch datechange should array of date         break;     case "sync": // can inside grid databound event         // grab actual data api , update header         .......         // if batch editing need inside loop         var selector = ".k-nav-day[data-dt='" + datechange + "']";         var eldateheader = $(selector);         var temptext = eldateheader.text();         var newtext = temptext.replace(/\((.+?)\)/g, "(" + newpercentage + ")");          eldateheader.text(newtext);         break;     } } 

you should take on documentation, can scheduler's behavior should be. hope help.