Kendo UI Grid传递值来编辑弹出窗口-Java 学习之路

我正在使用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值？

3 回答

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

回复于 2024-04-25T08:47:11+08:00

我不确定它是否可能是你想要的，但是为了让你顺利开始这就是你开始这样做的方式 .

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

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

然后正确设置编辑器模板的使用 . 由于您的 ItemId 现在是网格的一部分's model it'将在编辑/创建时发送给控制器 .

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

回复于 2024-04-25T08:47:11+08:00

1

我有同样的问题

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

Kendo UI不完全支持模型可空字段

回复于 2024-04-25T08:47:11+08:00

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

3 回答

相关问题