问题描述
我已经为Kendo Scheduler编写了自定义标题.如下图所示
I have written custom header for Kendo Scheduler. Which rendered as below
用于到达上面的UI的代码在下面,并且像魅力一样工作.(感谢Dion Dirza),
The code used to arrive at above UI is below and worked like charm.(thanks to Dion Dirza),
<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())
}
问题
现在,我正在更新Kendo Scheduler中的事件之一.在此更新期间,我想根据一些数据手动更改列日标题百分比,例如从1%更改为5%(这将来自数据库).无需刷新整个调度程序控件.
Now, I am UPDATING one of the EVENTS in Kendo Scheduler. During this update, I want to manually change the column day header percentage based on some data, like from 1% to 5% (which will come from DB) without refreshing entire scheduler control.
实时场景:当我每天添加更多活动时,列标题中的百分比应增加. API中提供了获取百分比和颜色的逻辑.
Real time scenario : When I add more EVENTS for a day, the percentage should increase in column header. The logic to get the percentage and color is available in API.
解决方案
在这里,我认为我需要使用jQuery更新值
Here I think, I need to update the value using jQuery
问题已解决:我刚刚在更新时更新了数据源.
Issue resolved: I just updated the data source on update fire.
推荐答案
您可以查看数据源 更改 事件.现在,我假设您在事件模型中具有Date
属性.您需要获取更新的事件date
,然后选择与之匹配的date header
.
You can take a look on data source change event. Now I suppose you have Date
property in your Event model. You need to grab updated event date
and select match date header
with that.
下面是示例代码:
var dateChanged = null;
function onDsChange(e) {
var action = e.action;
switch(action) {
case "itemchange":
var items = e.items; // all item that you have changed
var item = items[0]; // I assume you are not doing batch editing
dateChanged = item.date; // if you are doing batch then dateChange should be array of date
break;
case "sync": // you also can do this inside grid databound event
// grab actual data from API and do update the header
.......
// if this batch editing you need to do this inside a loop
var selector = ".k-nav-day[data-dt='" + dateChange + "']";
var elDateHeader = $(selector);
var tempText = elDateHeader.text();
var newText = tempText.replace(/\((.+?)\)/g, "(" + newPercentage + ")");
elDateHeader.text(newText);
break;
}
}
您应该查看他们的文档,这样您就可以获得调度程序的行为,如其应有的那样.希望有帮助.
You should take a look on their Documentation, so you can get scheduler's behavior like what it should be. Hope this help.
这篇关于更新Kendo Scheduler控件的自定义标头-dateHeaderTemplate的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!