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传递值来编辑弹出窗口

回答

相关问题