2014-04-15 129 views
0

我有一個計劃:劍道PanelBar劍道調度EditTemplate

 @(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; 
       })); 
    }) 

但後來,當我運行應用程序,並導航到頁面,在控制器的索引操作甚至發生火災之前,我得到:

System.NullReferenceException未被用戶代碼處理

HResult = -2147467261

Message =未將對象引用設置爲對象的實例。

源= Kendo.Mvc

線:

.BindTo(Model.Duties, mappings => 

可見職責,模型構件,爲空。是的,不要開玩笑吧...控制器的動作還沒有被打到。

我想這是一個錯誤?

回答

0

我得到它與J​​avaScript綁定工作 - 並沒有使用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>(); 

通常的數據庫的東西...然後...

旋轉結果...併爲每個新組...但是你確定你的...

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) }); 

瞧......在調度項目panelbar模板。