在剑道调度器控制头中渲染数据 - dateHeaderTemplate [英] Rendering data in kendo scheduler control header - dateHeaderTemplate
问题描述
我正在使用 Kendo 的调度程序控件.我正在尝试在每天的标题中呈现每日容量(现在硬编码 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数据源具有如下颜色属性
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>")
然后我尝试了 " ，它给了我这样的 - ""kendo.toString(date, 'dd/MM/yyyy')""
Then i tried, " , which gave me like this- ""kendo.toString(date, 'dd/MM/yyyy')""
推荐答案
您可以使用调度程序 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，它应该与每日容量数据源的日期属性中的值具有相同的格式.然后您必须获取该属性值才能在数据源中找到匹配的对象.
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]);
这篇关于在剑道调度器控制头中渲染数据 - dateHeaderTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
