Kendo UI Grid傳遞值來編輯彈出窗口

我正在使用Kendo UI MVC，並且我有一個包含有關對象細節的視圖。在那個頁面上，我有一個Kendo UI Grid，它顯示關於對象的註釋列表。我允許用戶從網格創建或編輯筆記。Kendo UI Grid傳遞值來編輯彈出窗口

我遇到的問題是當用戶點擊添加按鈕時，我需要傳遞頁面對象的ID。我正在使用GridEditMode.PopUp。

基本上，這是我所：

public class Item { 
    public int Id { get;set; } 
    ... 
} 
public class Note { 
    public int ItemId {get;set;} 
    ... 
}

這裏是電網碼：

@(Html.Kendo() 
    .Grid<NoteViewModel>() 
    .Name("kendo-grid") 
    .Columns(columns => 
    {   
     columns.Bound(n => n.NoteDateTime).Title("Date").Format("{0:MM/dd/yyyy}"); 
     columns.Bound(n => n.NoteDateTime).Title("Time").Format("{0:h:mm tt}").Sortable(false); 
     columns.Bound(n => n.NoteActivityType).Title("Activity Type"); 
     columns.Bound(n => n.NoteDescription).Title("Description"); 
     columns.Bound(n => n.NoteDetail).Title("Notes"); 
     columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); 
    }) 
    .ToolBar(toolbar => toolbar.Create()) 
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Note")) 
    .Mobile() 
    .Pageable() 
    .Sortable() 
    .Filterable() 
    .Reorderable(r => r.Columns(true)) 
    .Resizable(r => r.Columns(true)) 
    .DataSource(dataSource => dataSource.Ajax() 
     .Model(model => model.Id(note => note.Id)) 
     .PageSize(25) 
     .Sort(sort => 
     { 
      sort.Add(note => note.NoteDateTime); 
     }) 
     .Read(read => read.Action("ReadNotes", "Case").Data("getCaseId")) 
     .Create(a => a.Action("CreateNote", "Case")) 
     .Update(u => u.Action("UpdateNote", "Case")) 
     .Destroy(d => d.Action("DeleteNote", "Case")) 
    ) 
)

我需要當用戶單擊網格上的添加按鈕來設置Note.ItemId。或者，有沒有更好的方法來做到這一點，比如在郵件中發送ItemId值？

來源

2015-05-04 Nick

我們展示網格創建代碼.. – DontVoteMeDown

添加了網格coe。 – Nick

我不確定你想要什麼是可能的，但是爲了讓你知道如何開始做這件事。

您通常需要一個平面視圖模型，其中包含您要使用的所有內容。

public class NoteViewModel { 
    public int ItemId { get;set; } 
}

然後正確設置編輯器模板的用法。由於您的ItemId現在是網格模型的一部分，因此將在編輯/創建時發送給控制器。

@(Html.Kendo() 
    .Grid<NoteViewModel>() 
    .Name("kendo-grid") 
    .Columns(columns => 
    { 
     columns.Bound(n => n.ItemId).Hidden(); 
     columns.Bound(n => n.NoteDateTime).Title("Date").Format("{0:MM/dd/yyyy}"); 
     columns.Bound(n => n.NoteDateTime).Title("Time").Format("{0:h:mm tt}").Sortable(false); 
     columns.Bound(n => n.NoteActivityType).Title("Activity Type"); 
     columns.Bound(n => n.NoteDescription).Title("Description"); 
     columns.Bound(n => n.NoteDetail).Title("Notes"); 
     columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); 
    }) 
    .ToolBar(toolbar => toolbar.Create()) 
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("NoteTemplate")) 
    Etc... 
)

最後創建模板（稱爲NoteTemplate.cshtml），並將其放置在瀏覽/共享/ EditorTemplates所以劍道可以找到它。

@model NoteViewModel 

Date: @Html.EditorFor(l => l.NoteDateTime) 
Note Description: @Html.EditorFor(l => l.NoteDescription) 
(Add all fields you need to edit here)

來源

2015-05-05 01:57:46 Nicholas

當在彈出編輯模式下使用自定義編輯器模板時，這不會將ID傳遞給控制器 – MattParra

我最終通過掛接到彈出窗口的編輯事件來實現這個功能。我無法弄清楚如何在初始設置中完成它，所以我將它添加到了編輯彈出窗口的doc ready處理程序中。這種感覺就像是黑客，所以如果有人有更好的方式，我很樂意聽到它。 #ItemId輸入已經在詳細信息頁面上，所以我想我可以使用它。

$(function() { 
    function setItemId(event) { 
     var uid = $('.k-edit-form-container').closest('[data-role=window]').data('uid'); 
     var model = $('#kendo-grid').data('kendoGrid').dataSource.getByUid(uid); 
     if (model.get('ItemId') === 0) { 
      model.set('ItemId', Number($('#ItemId').val())); 
     } 
    } 

    var grid = $('#kendo-grid').data('kendoGrid'); 
    grid.bind('edit', setItemId); 
});

來源

2015-05-05 03:20:39 Nick

我沒有看到您的代碼爲黑客。事實上，有時（很多時候，我的意思是）你必須像你一樣做這樣的事情。 – DontVoteMeDown

我有同樣的問題

問題是，一些模型（視圖模型）的字段爲空

型號可空字段沒有劍道UI完全支持

來源

2016-03-09 10:10:57 Cybertron

真正的解決方案是** data-value-primitive =「true」** [link]（http://www.telerik.com/forums/dropdownlist-with-mvvm-binding-to-the-data-value -field-和未在對象） – Cybertron

Kendo UI Grid傳遞值來編輯彈出窗口

回答

相關問題