有一些关于使用Kendo Web版本的示例,但没有完整的示例显示使用自定义弹出编辑器,调度程序包含从URL(json数据)中提取数据的下拉列表.
有端到端的例子吗？我可以用数据加载调度程序.问题在于自定义模板和下拉列表绑定.
编辑：
在广泛搜索之后,我偶然发现Telerik使用ASP.NET MVC中的Kendo UI Scheduler的“入门”页面.他们(Telerik)确实需要更好地将Demos与文档之间的交叉连接到API和示例(Here就是示例)
我还创建了一个包含调度程序(从数据库表到视图)的所有内容的博客文章,你可以看到这里.Kendo UI Scheduler with ASP.NET MVC and Peta Poco
这个例子揭示了演示和文档没有做到的一些亮点,比如他们在网上示例中使用的viewmodel：
C#viewmodel
public class Projection : ISchedulerEvent
{
public string Title { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string Recurrence { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
// Custom Field
public int EventId { get; set; }
public int CustomerId { get; set; }
}
您用于调度程序的viewmodel必须从ISchedulerEvent类继承,否则它将无法正常工作.
剃刀视图
Razor View非常简单,尽管您遇到的大多数演示都会显示数据通过服务器端(来自控制器)传递.在这里,我通过Ajax方法(Create,Read,Update,Destroy)来做这件事.
@(Html.Kendo().Scheduler<KendoUISchedulerDemo.Models.Projection>()
.Name("scheduler")
.Date(DateTime.Today)
.Height(600)
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.EventId);
m.Field(f => f.Title);
m.Field(f => f.CustomerId);
m.Field(f => f.Description);
m.RecurrenceId(f => f.Recurrence);
})
.Read("Read","Shared",new { Area = "Events" })
.Create("Create",new { Area = "Events" })
.Destroy("Destroy",new { Area = "Events" })
.Update("Update",new { Area = "Events" })
)
.Events( events =>
{
events.Add("ABC.events.SchedulerAdd");
})
.Editable(edit =>
{
edit.TemplateId("schedulerTemplate");
})
)
使用带有上述ajax调用的数据源的要点是它允许我们将方法放在一个单独的控制器中,这样我们就可以保持显示视图的控制器干净.
剃刀视图 – 剑道模板(用于弹出的事件编辑器)
这是x-kendo-template的脚本块,在创建和编辑Kendo Scheduler中的事件时会覆盖默认弹出窗口.这个脚本几乎是狂野的西部,你可以在它里面做任何你想做的事情,它默认绑定了Kendo MVVM模型.尽管如此,因为没有记录的方法来“扩展”viewmodel以正确地将自定义下拉列表中的数据源放在Scheduler的ASP.NET MVC包装器(版本)中. (这也使用Twitter Bootstrap)
<script type="text/x-kendo-template" id="schedulerTemplate">
<div class="form-group">
<div class="col-md-5">
@Html.Label("title","Title",new { @class = "col-md-2 control-label" })
<div class="col-md-10">
<input class="k-textBox" data-bind="value: title" />
</div>
</div>
</div>
<div class="form-group mTop10">
@Html.Label("CustomerId","Customer",new { @class = "col-md-2 control-label" })
<div class="col-md-10">
<input id="CustomerId" class="w450" />
</div>
</div>
<div class="form-group mTop10">
<div class="left col-md-5">
@Html.Label("start","Start",new { @class = "col-md-2 control-label left" })
<div class="col-md-10">
<input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start,invisible: isAllDay" />
<input name="start" type="text" required data-type="date" data-role="datepicker" data-bind="value: start,visible: isAllDay" />
</div>
</div>
<div class="left col-md-5">
@Html.Label("end","End",new { @class = "col-md-2 control-label left" })
<div class="col-md-10">
<input name="end" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: end,invisible:isAllDay" />
<input name="end" type="text" required data-type="date" data-role="datepicker" data-bind="value: end,visible:isAllDay" />
</div>
</div>
</div>
<div class="clear"></div>
<div class="form-group mTop10">
@Html.Label("isAllDay","All Day",new { @class = "col-md-2 control-label" })
<div class="col-md-10">
<input type="checkBox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
</div>
</div>
</script>
JsonResults(在控制器中)
这是CRUD Json结果.为示例修改了JsonResults的Create,Update和Destroy.
public virtual JsonResult Read([DataSourceRequest] DataSourceRequest request)
{
var data = new List<Projection>();
data.Add(new Projection()
{
EventId = 1,Start = DateTime.Now.AddDays(-2),End = DateTime.Now.AddDays(-2).AddHours(2),IsAllDay = false,CustomerId = 1,Description = "Booked for plumbing",Title = "Manchester Residence"
});
return Json(data.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}
public virtual JsonResult Create([DataSourceRequest] DataSourceRequest request,Projection evt)
{
if (ModelState.IsValid)
{
// Other code here
}
return Json(new[] { evt }.ToDataSourceResult(request,ModelState));
}
public virtual JsonResult Update([DataSourceRequest] DataSourceRequest request,ModelState));
}
public virtual JsonResult Destroy([DataSourceRequest] DataSourceRequest request,ModelState));
}
JavaScript的
这是一个独立的JS文件中包含的JavaScript,它对应于我的Scheduler的“Add”事件.我没有展示“编辑”事件,因为它几乎是相同的想法,你应该能够弄明白.
ABC.Events.SchedulerAdd = function (e) {
function GetCustomers(value) {
var url = "/Events/Shared/GetCustomers"
var success = function (result) {
if (result != null) {
$("#CustomerId").kendoDropDownList({
dataTextField: "FullName",dataValueField: "CustomerId",dataSource: new kendo.data.DataSource({ data: result })
});
}
};
$.ajax({ url: url,success: success });
}
GetCustomers();
};
这个JavaScript函数的关键之一是我们将我们的字段转换为Kendo DropDownList,并在我们作为JsonResult接收的同时连接我们的数据源(未显示,但它是一个简单的Json对象).另一个关键是我们在创建新的kendo.data.DataSource时如何连接数据源.如果您尝试简单地连接JsonResult,它将无法工作.
结论
在使用Kendo UI的ASP.NET MVC Wrapper版本时,这是一个填充调度程序模板(弹出窗口)中的下拉列表的工作.我是开放的更好的方式,我想它会将Json列表数据添加到Kendo Scheduler使用的内部MVVM,但是没有ASP.NET MVC的文档或如何将其拉出的示例,这是它可以工作的方式.
编辑#2 – Telerik ASP.NET MVC示例
我终于在这个问题上回复了Telerik支持,并被引导到这个链接：http://www.telerik.com/support/code-library/custom-editor-9fd60fca3c02那里有一个示例MVC项目,它展示了如何在ASP.NET MVC中使用自定义编辑器,下拉列表和数据源.为什么在地球上没有从文档到这些项目的链接,这显然对我来说是一个谜.
