在Kendo Scheduler控件标头中呈现数据-dateHeaderTemplate [英] Rendering data in kendo scheduler control header - dateHeaderTemplate
问题描述
我正在使用Kendo的Scheduler控件.我正在尝试在每天的标题中呈现每日容量(现在为30％的硬编码)，如下面的屏幕所示.如何替换来自数据源的数据的硬编码?
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?
这是我使用的代码.我在以下代码中输入了30％的硬编码.
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>
现在，我将从API中获取百分比"，并希望将其设置为数据源，而从数据源中，我要将其呈现为标头
Now, I will be getting 'percentage' from API, and want to set to datasource, and from datasource i want to render it to header
JavaScript的当前数据源设置代码
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"]]； //硬编码的每日容量 但它只满足7天，我可能有全年的数据.和数组可能不是正确的方法.
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%
});
更新的问题2
现在API数据源具有以下color属性
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.
我尝试如下
第一种定义的颜色
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]);
});
}
更新的问题3 在调试"dateofHeader"时，我的价值低于正常值
Updated question 3 I am getting below value while debugging for "dateofHeader"
标题脚本如下
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>")
然后我尝试了& quot，它给了我这样的感觉-" kendo.toString(date，'dd/MM/yyyy')"
Then i tried, " , which gave me like this- ""kendo.toString(date, 'dd/MM/yyyy')""
推荐答案
您可以使用Scheduler databound事件来修改其日期标头模板，并且必须在该模板内使用字符串临时字符，该字符将被当前日期替换容量值.
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")
然后在调度程序databound事件中更改其文本.为此，我做了一个 dojo ，希望对您有所帮助.
Then change its text inside scheduler databound event. I have make a dojo for this, hopes this help you understand.
-----------更新问题1的答案--------------
-----------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>
并像这样使用它
$("#scheduler").kendoScheduler({
dateHeaderTemplate: kendo.template($("#tmpDateHeader").html())
}
您可以在此处看到数据属性data-dt，并且该格式应与每日容量数据源的date属性中的值具有相同的格式.然后，您必须获取该属性值才能在数据源中找到匹配的对象.
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.
----------回答更新的问题2 --------------
-----------Answer for updated question 2--------------
要更改其容器背景，请使用此
to change its container background use this
$(this).parent().css("background-color", actualColor[index]);
这篇关于在Kendo Scheduler控件标头中呈现数据-dateHeaderTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
