Updating the custom header of Kendo Scheduler cont

Question

I have written custom header for Kendo Scheduler. Which rendered as below

The code used to arrive at above UI is below and worked like charm.(thanks to 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, I am UPDATING one of the EVENTS in Kendo Scheduler. During this update, I want to manually change the column day header percentage based on some data, like from 1% to 5% (which will come from DB) without refreshing entire scheduler control.

Real time scenario : When I add more EVENTS for a day, the percentage should increase in column header. The logic to get the percentage and color is available in API.

Solution Approach

Here I think, I need to update the value using jQuery

Issue resolved: I just updated the data source on update fire.

Answer 1

You can take a look on data source change event. Now I suppose you have Date property in your Event model. You need to grab updated event date and select match date header with that.

Here an example code:

var dateChanged = null;

function onDsChange(e) {
    var action = e.action;

    switch(action) {
    case "itemchange":
        var items = e.items; // all item that you have changed
        var item = items[0]; // I assume you are not doing batch editing 

        dateChanged = item.date; // if you are doing batch then dateChange should be array of date
        break;
    case "sync": // you also can do this inside grid databound event
        // grab actual data from API and do update the header
        .......
        // if this batch editing you need to do this inside a 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 a look on their Documentation, so you can get scheduler's behavior like what it should be. Hope this help.