Question

我使用的是Kendo UI MVC，我的视图包含有关对象的详细信息。在那个页面上，我有一个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值？

Answer 1

我最终通过挂钩弹出窗口的编辑事件来实现这一点。我无法弄清楚如何在初始设置中执行此操作，因此我将此添加到编辑弹出窗口的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);
});

Answer 2

我不确定它是否可能是您想要的，但是为了让您了解这是您开始这样做的方式。

您通常需要一个平面视图模型，其中包含您要使用的所有内容。

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 ）并将其放在Views / Shared / EditorTemplates中，以便Kendo可以找到它。

@model NoteViewModel

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

Answer 3

我有同样的问题

问题是模型的某些字段（viewmodel）是可空的

Kendo UI

中不完全支持模型可为空的字段

Kendo UI Grid传递值来编辑弹出窗口

3 个答案: