有一些关于使用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
@H_301_16@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)来做这件事.
@H_301_16@@(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)
@H_301_16@<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.
@H_301_16@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”事件.我没有展示“编辑”事件,因为它几乎是相同的想法,你应该能够弄明白.
@H_301_16@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中使用自定义编辑器,下拉列表和数据源.为什么在地球上没有从文档到这些项目的链接,这显然对我来说是一个谜.
