0

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?

enter image description here

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"

enter image description here

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')""

kudlatiger
  • 3,028
  • 8
  • 48
  • 98

1 Answers1

5

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]);
Dion Dirza
  • 2,575
  • 2
  • 17
  • 21
  • can I map datasource date and date header? i updated my quesiton – kudlatiger May 19 '15 at 09:52
  • Thanks Dion, I have small requirement to change the background color, I have updated the question, kindly do the needful. I tried different ways but not working. – kudlatiger May 26 '15 at 06:36
  • thanks Dion, but I am getting var dateOfHeader = $(this).data("dt"); inside data_Bound event wrong, attached the screenshot. – kudlatiger May 26 '15 at 07:43
  • you are using wrong date header template, see my answer again for right template – Dion Dirza May 26 '15 at 08:02
  • yes i see, but we can not use quotes " " inside quote. so i used single quote. can u suggest please? I updated the question. sorry to trouble you. – kudlatiger May 26 '15 at 08:38
  • I have updated my answer, please check again below `updated question 1`. You can see how to define template script and how to use it. – Dion Dirza May 26 '15 at 08:50
  • yes I have used same way - still I am getting result as "kendo.toString(date, 'dd/MM/yyyy')" - This is not getting evaluated to date like 27/05/2015 :( – kudlatiger May 26 '15 at 09:10
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78774/discussion-between-deepak-and-dion-dirza). – kudlatiger May 26 '15 at 09:25
  • I agree, color is working in new dojo. but my issue is reading 'date', var dateOfHeader = $(this).data("dt"); -> is not giving me date – kudlatiger May 26 '15 at 09:54
  • 1
    I missed to add # expression on that attribute, i fixed my answer and dojo as well – Dion Dirza May 26 '15 at 09:56
  • dion, +1 .. I have continued working and facing different issue now. its here, can u help? http://stackoverflow.com/questions/30557987/updating-the-custom-header-of-kendo-sceduler-control-dateheadertemplate?noredirect=1#comment49188955_30557987 – kudlatiger May 31 '15 at 15:27