我有一个调度程序：
@(Html.Kendo().Scheduler<HTServices.Models.TaskViewModel>()
.Name("scheduler")
.Date(DateTime.Now)
.StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 7, 00, 00))
.Height(600)
.Editable(edit =>
{
edit.TemplateName("ScheduleItemTemplate");
edit.Create(false);
edit.Destroy(false);
})
.Views(views =>
{
views.DayView();
views.WeekView(workWeekView => workWeekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.TaskID);
m.Field(f => f.Title).DefaultValue("No title");
m.Field(f => f.OwnerID).DefaultValue(1);
m.Field(f => f.Title).DefaultValue("No title");
m.RecurrenceId(f => f.RecurrenceID);
})
.Read("Read", "Scheduler")
.Create("Create", "Scheduler")
.Destroy("Destroy", "Scheduler")
.Update("Update", "Scheduler")
)
)
使用我的自定义模板加载它很棒。
@model HTServices.Models.TaskViewModel
@{
//required in order to render validation attributes
ViewContext.FormContext = new FormContext();
}
@functions{
}
<div class="k-edit-label">
@(Html.LabelFor(model => model.Client))
</div>
<div data-container-for="client" class="k-edit-field">
@(Html.TextBoxFor(model => model.Client, new { style = "width:100%;", @readonly = "readonly", @class = "k-textbox col-lg-12", data_bind = "text: client" }))
</div>
<div class="k-edit-label">
@(Html.LabelFor(model => model.Address))
</div>
<div data-container-for="address" class="k-edit-field">
@(Html.TextBoxFor(model => model.Address, new { style = "width:100%;", @readonly = "readonly", @class = "k-textbox", data_bind = "text: address" }))
</div>
<div class="k-edit-label">
@(Html.LabelFor(model => model.Start))
</div>
<div data-container-for="start" class="k-edit-field">
@(Html.TextBoxFor(model => model.Start, new { style = "width:100%;", @class = "k-textbox", @readonly = "readonly", data_bind = "value: start" }))
</div>
<div class="k-edit-label">
@(Html.LabelFor(model => model.End))
</div>
<div data-container-for="end" class="k-edit-field">
@(Html.TextBoxFor(model => model.End, new { style = "width:100%;", @class = "k-textbox", @readonly = "readonly", data_bind = "value: end" }))
</div>
<div class="k-edit-label">
@(Html.LabelFor(model => model.IsAllDay))
</div>
<div data-container-for="isAllDay" class="k-edit-field">
@(Html.DisplayFor(model => model.IsAllDay, new { @class = "k-checkbox", @readonly = "readonly", data_bind = "value: isAllDay" }))
</div>
<div class="k-edit-label">
@(Html.LabelFor(model => model.Description))
</div>
<div data-container-for="description" class="k-edit-field">
@(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", @readonly = "readonly", data_bind = "value: description" }))
</div>
<div class="k-edit-label">
@(Html.LabelFor(model => model.DutyID))
</div>
<div data-container-for="duties" data-task-id="@Model.TaskID" class="k-edit-field">
</div>
@{
ViewContext.FormContext = null;
}
然后我添加一个带有绑定到分层模型的PanelBar ...是的，它应该是可能的：
请参阅link for hierarchical model binding：
(Html.Kendo().PanelBar()
.Name("dutyPanel")
.ExpandMode(PanelBarExpandMode.Single)
.BindTo(Model.Duties, mappings =>
{
mappings.For<PanelGroup>(binding => binding //define first level of panelbar
.ItemDataBound((item, dutygrp) => //define mapping between panelbar item properties and the model properties
{
item.Text = dutygrp.Text;
item.ImageUrl = dutygrp.ImageUrl;
})
.Children(dutygrp => dutygrp.Items)); //define which property of the model contains the children
mappings.For<PanelGroupItem>(binding => binding
.ItemDataBound((item, duty) =>
{
item.Text = duty.Text;
item.ImageUrl = duty.ImageUrl;
}));
})
但是，当我运行应用程序并导航到页面时，在控制器的Index操作发生之前，我得到了一个：
System.NullReferenceException未被用户代码
处理的HResult = -2147467261
Message =对象引用未设置为对象的实例。
源= Kendo.Mvc
该行：
.BindTo(Model.Duties, mappings =>
显示Duties（模型成员）为null。是的，不开玩笑它是空的......来自控制器的动作甚至没有被击中。
我猜这是个错误？
答案 0 :(得分：0)
我使用javascript绑定 - 并且没有使用MVC版本。
我的小组......（tadaaaa）
<div id="dutyPanel"></div>
我的javascript在调度程序项目编辑时加载面板：
$(function () {
////bind to the scheduler edit event
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.bind("edit", onSchedulerEdit);
function onSelect(e) {
e.preventDefault();
}
function onSchedulerEdit(e) {
var d = e.event.Duties;
$("#dutyPanel").kendoPanelBar({
expandMode: "multiple",
select: onSelect,
dataSource: jQuery.makeArray(d)
});
};
});
我用来从数据库填充的数据对象....（控制器读取功能 - 一次性完成计划中每个项目的所有“职责”）
public class PanelItem
{
public string text { get; set; }
public string cssClass { get; set; } // Add custom CSS class to the item, optional
public string url { get; set; } // link url for navigation to topic if required, optional
public string imageUrl { get; set; } // item image URL, optional
public string spriteCssClass { get; set; } // item image sprite CSS class, optional
public string contentUrl { get; set; } // content URL to load within an item, optional
public bool expanded { get; set; } // item is rendered expanded, optional
}
public class PanelGroup : PanelItem
{
public List<PanelItem> items { get; set; } // Sub item collection
}
那么，请参阅javascript？事件中的“职责”成员属于PanelGroup
哦！您想缩进面板条项目吗？
在我的ScheduleItemTemplate.cshtml中 - 在那里添加样式：
<style type="text/css">
.panelbarHeader {
font-size: 1em;
font-weight: normal;
}
.panelbarItem {
text-decoration: none;
font-size: .9em;
font-weight: normal;
padding-left: 20px;
}
</style>
从DB填充PanelGroup对象时，在那里设置cssClass：
List<DB_Result_Object> results = db.Database.SqlQuery<DB_Result_Object>(commandSQL, strParams.ToArray()).ToList();
List<TaskViewModel> result = results.ToList().Select(item => new TaskViewModel
{
TaskID = item.CalendarAppointmentID,
Title = item.FieldSuitableForTitleShow),
Start = item.CalendarAppointmentDateStart,
End = item.CalendarAppointmentDateEnd,
StartTimezone = null,
EndTimezone = null,
Description = item.CalendarAppointmentDetail.StripMarkup(), // yeah - a string extension method...
IsAllDay = (item.CalendarAppointmentIsAllDayEvent > 0),
RecurrenceRule = null,
RecurrenceException = null,
RecurrenceID = null,
OwnerID = item.TheGuysID,
Duties = GetDuties(item.PrimaryID) // another function to get the duties...
}).ToList();
return result.AsQueryable();
在GetCalendarDuties中：
List<PanelGroup> panels = new List<PanelGroup>();
通常的DB东西......然后......
旋转结果......并为每个新组......但是你决定你的......
pg = new PanelGroup() { text = ThisGroupName, cssClass = "panelbarHeader", imageUrl = string.Format("Content/scheduler/img/{0}.png", imageNameForGroup), items = new List<PanelItem>() };
panels.Add(pg);
并为每个新项目 - 但是你决定你的......
pg.items.Add(new PanelItem { text = ThisItemName, cssClass = "panelbarItem", imageUrl = string.Format("Content/scheduler/img/{0}.png", imageNameForItem) });
Voila ...调度程序项模板中的面板栏。