Rendering data in kendo scheduler control header - dateHeaderTemplate

I am using Scheduler control from Kendo. I am trying to render daily capacity (Hard coded 30% now) in header of each day as shown in below screen. How can I replace hard coded by data from datasource?

Here is the code I have used. I have HARD CODED 30% in below code.

<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.mobile.min.css" />

<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.web.min.js"></script>
<script>
    $(function () {
        $('#scheduler').kendoScheduler({
            date: new Date("2013/09/02"),
            dateHeaderTemplate: kendo.template("<u>#=kendo.toString(date, 'dd/M')#</u> - (30%)"),               
        });
    });
</script>
</head>
<body>
    <div id="scheduler"></div>
/body>

Now, I will be getting 'percentage' from API, and want to set to datasource, and from datasource i want to render it to header

current data source setting code from JavaScript

var datasource = new kendo.data.SchedulerDataSource({
      data:Model.recordCollection // setting data
});
scheduler.setDataSource(datasource);

but this datasource is calendar event related, this will not contain the daily capacity. so how do I set daily capacity data from different datasource?

As per answer, I am editing the question

var actualDC = ["30", "20","10", "50","70", "60", "40"]; // hard coded daily capacity but it satisfy only 7 days, i might have entire year data. and array may not be right way.

sample data from server:

var mydatafromApi = ({
    date:01/01/2013, 
    percentage=30%
  },
  {
    date:02/01/2013, 
    percentage=40%
  });

Updated question 2

Now API data source is having color attribute as below

var mydatafromApi = ({
    date:01/01/2013, 
    percentage=30%,
    color = red
  },
  {
    date:02/01/2013, 
    percentage=40%
    color = blue
  });

I would like to have these COLOR to be background to the scheduler cell.

I tried as below

first defined colors

          var actualColor = ["red", "blue","green", "yellow","blue", "red", "yellow"]; // hard coded daily color

  function scheduler_dataBound(e) {
      $.each($(".k-scheduler-header .k-scheduler-table th span.k-nav-day"),function(index, val) {
        var text = $(this).text();
        var newtext = text.replace("{dc}", actualDC[index]);
        $(this).text(newtext);
        $(this).backgroundcolor(actualColor[index]);
      });
    }

Updated question 3 I am getting below value while debugging for "dateofHeader"

The header script is as follow

 dateHeaderTemplate =  kendo.template("<span class='k-nav-day' data-dt='kendo.toString(date, 'dd/MM/yyyy')'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>")

Then i tried, &quot , which gave me like this- ""kendo.toString(date, 'dd/MM/yyyy')""

You could use scheduler databound event to modify its date header template, and you have to use string temporary character inside that template which will be replaced by current day capacity value.

<span class='k-nav-day'><u>#=kendo.toString(date, 'dd/M')#</u> - ({dc}%)</span>

You can use this selector to get date header element

$(".k-scheduler-header .k-scheduler-table th span.k-nav-day")

Then change its text inside scheduler databound event. I have make a dojo for this, hopes this help you understand.

-----------Answer for updated question 1--------------

If you have a collection of object rather than array of string, it doesn't matter. You could replace it, but with another tweak in the code.

You should add the date value as data attribute in date header template

<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>

and use it like this

$("#scheduler").kendoScheduler({
    dateHeaderTemplate: kendo.template($("#tmpDateHeader").html())
}

You can see we have data attribute data-dt here and it should have same format with value in date property of daily capacity data source. Then you have to get that attribute value to find matched object in your data source.

// code in scheduler databound inside each scope
var dateOfHeader = $(this).data("dt"); // get date value from template
var matchData = // find in data source, where object.date == dateOfHeader 
var newtext = text.replace("{dc}", matchData.percentage);

I hope you can do the rest.

-----------Answer for updated question 2--------------

to change its container background use this

$(this).parent().css("background-color", actualColor[index]);

来源：https://stackoverflow.com/questions/30308682/rendering-data-in-kendo-scheduler-control-header-dateheadertemplate

标签

kendo-ui

kendo-scheduler