Updating the custom header of Kendo Scheduler control - dateHeaderTemplate

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

enter image description here

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

enter image description here

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

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.