Rendern von Daten im Header des Kendo Scheduler-Steuerelements - dateHeaderTemplate

Question

May 18, 2015, 06:42 PM

Rendern von Daten im Header des Kendo Scheduler-Steuerelements - dateHeaderTemplate

Ich verwende die Scheduler-Steuerung von Kendo. Ich versuche, die tägliche Kapazität (jetzt 30% fest programmiert) in der Kopfzeile eines jeden Tages darzustellen, wie im folgenden Bildschirm dargestellt. Wie kann ich fest codierte Daten durch Daten aus einer Datenquelle ersetzen?

Hier ist der Code, den ich verwendet habe. Ich habe im folgenden Code 30% HARD CODED.

<!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, ich werde 'Prozentsatz' von API erhalten und möchte auf Datenquelle setzen, und von Datenquelle möchte ich es in Header rendern

aktueller Code für die Datenquelleneinstellung von JavaScript

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

Diese Datenquelle ist jedoch kalenderbezogen. Sie enthält nicht die tägliche Kapazität. Wie kann ich die täglichen Kapazitätsdaten aus verschiedenen Datenquellen festlegen?

Als Antwort bearbeite ich die Frage

var actualDC = ["30", "20", "10", "50", "70", "60", "40"]; // Fest codierte tägliche Kapazität, aber es reicht nur für 7 Tage. Ich habe möglicherweise Daten für das ganze Jahr. und Array möglicherweise nicht richtig.

sample data from server:

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

Aktuelle Frage 2

Now API-Datenquelle hat das folgende Farbattribut

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

Ich möchte, dass diese FARBE als Hintergrund für die Scheduler-Zelle verwendet wird.

Ich habe versucht, wie unten

erst definierte Farben

          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]);
      });
    }

Aktuelle Frage 3 Ich erhalte während des Debuggens für "dateofHeader" einen niedrigeren Wert.

Das Header-Skript lautet wie folgt

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

Dann habe ich versucht, & quot, was mir folgendes gab- "" kendo.toString (Datum, 'TT / MM / JJJJ') ""