如何从 window 更新 Kendo 网格行

Question

设置：

ASP MVC 项目
Kendo 视图中的网格通过 Razor
列自定义命令，调用...
JavaScript 使用 refresh() URL 打开 Kendo window 以部分视图作为自定义表单
表单有一个输入类型=按钮调用JavaScript

障碍物：

如何使用新模型更新 Grid 的行（dataItem？）（来自 window/form javascript）。我无法获得目标数据项的句柄。 Select() 在这里不适用，因为该行未被选中。相反，自定义按钮事件会打开模态网格 Window，其中包含用于更新、关闭等的字段和命令。

我可以使用 Grid 的本机编辑，但我想要完成的是一种完全自定义弹出窗口 window 的方法，显示可用于呈现 CRUD 操作的局部视图。

顺便说一句：这样做的理由是优化网格行中的 space，这些行通常会被不必要的编辑和删除按钮占用，这些按钮是通过使用 Kendo 本机控件属性放置的.我觉得最好在单独的详细信息视图中呈现，例如模型网格 Window，在我的例子中。

同样，不使用 Select()，我无法理解如何在 Window/form JavaScript 中获取调用它的网格行的句柄，用于使用新模型数据更新行。

感谢您的宝贵时间。

Answer 1

此演示展示了如何获取绑定到按下自定义命令键的列的 dataItem 的引用，并在 Window 中显示相应的信息。您也可以使用 dataItem 来更新网格：

http://demos.telerik.com/kendo-ui/grid/custom-command

这里也有一个例子：

http://dojo.telerik.com/abUHI 看看 showDetails 函数

Answer 2

自从发布这篇文章以来我的发现...

我是 Web 演示文稿开发的新手，因此掌握客户端与服务器端元素的区别及其范围是关键。同样，了解 Kendo 网格的各种细节也很有帮助。

继续我目前的解决方案...

获取从自定义命令事件中选择的行项目的句柄未使用 Select() 完成，因为未选择行。正如之前在其他帖子中所述，这只是所需工作的一部分。在自定义命令事件处理程序中 JavaScript（在下面的完整解决方案中再次看到）：

var detailDataItem = this.dataItem($(e.target).closest("tr"));

我的解决方案：

在承载 Kendo 网格的父级 window 中：

@* Declare modal Kendo Grid window control *@

@helper ClientGrid()
{
    @(Html.Kendo().Grid<Purevision.Models.Person>()
          .Name("grid")
          .Columns(columns =>
          {
              columns.Bound(c => c.FirstName).Width(100);
              columns.Bound(c => c.LastName).Width(130);
              columns.Bound(c => c.Email).Width(140);
              columns.Bound(c => c.Phone).ClientTemplate("#= (data.Phone) ? formatPhoneNumber(data.Phone) : 'none' #").Width(130);
              columns.Bound(c => c.Comments).Hidden().Width(140);
              columns.Bound(c => c.UserId).Hidden();
              columns.Bound(c => c.Id).Hidden();
              columns.Command(command =>
              {
                  command.Custom("Archive").Click("archiveCommand");
                  command.Custom("Detail").Click("detailCommand");
              }).Width(90);
          })
          .ToolBar(toolbar => toolbar.Create())
          .Selectable(s => s.Mode(GridSelectionMode.Single))
          .Events(e => e.Change("onChange").DataBound("onDataBound").DataBinding("onDataBinding"))
          .Scrollable()
          .Sortable()
          .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Edit"))
          .Pageable(pageable => pageable
              .Refresh(true)
              .PageSizes(true)
              .ButtonCount(5))
          .DataSource(dataSource => dataSource
              .Ajax()
              .PageSize(20)
              .Events(events => events.Error("error_handler"))
              .Model(model => model.Id(c => c.Id))
              .Create(create => create.Action("People_Create", "Clients"))
              .Read(read => read.Action("People_Read", "Clients"))
              .Update(update => update.Action("People_Update", "Clients"))
              .Destroy(update => update.Action("People_Destroy", "Clients"))
              )
        )
}

@* Declare modal Kendo Grid window control;  MUST be named 'detailWindow' as referenced by partial view script *@

@(Html.Kendo().Window().Name("detailWindow")
    .Title("Client Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(400)
    .Content(@<text>
        @Html.Partial("_edit", new Person())
        </text>
    )

<script type="text/javascript">

    function detailCommand(e) {
        var window = $("#detailWindow");
        var kWnd = window.data("kendoWindow");
        var data = this.dataItem($(e.target).closest("tr"));

        e.preventDefault();

        kendo.bind(window, data);
        kWnd.center().open();
    }
</script>

在局部视图 _edit.cshtml 中呈现在 Kendo 模态 window:

<div class="form-group">
    @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
    <div class="col-md-4">
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>
</div>

<input type="button" id="updateButton" value="Update2" class="btn btn-default" />

在表单就绪期间连接按钮事件，它获取仍在客户端范围内的网格控件的句柄：

<script type="text/javascript">

    // as mentioned by Tarek, bind each control's value attribute

    $("#detailWindow [name]").each(function () {
        var name = $(this).attr("name");
        $(this).attr("data-bind", "value:" + name );
    });

    $(document).ready(function (e) {
        var window = $("#detailWindow");
        var grid = $("#grid").data("kendoGrid");

        $("#updateButton").click(function (e) {
            grid.saveChanges();
            window.data("kendoWindow").close();
        });
    });
</script>

我愿意接受这里的重构建议。 JavaScript 中似乎有很多客户端编码来完成针对 Kendo 网格的自定义 activity。（叹气）虽然我很高兴拥有多功能性。（微笑）

经过多次重新编辑，希望得到这个有用的答案。让我知道。 ;)

参考资料： Telerik Forums / Kendo UI Forum / Grid / How does Grid update its dataSource?

Answer 3

使用你的方法你在做双重请求所以我的建议是：在编辑时打开一个 window 通过 MVVM 绑定到行：

function edit(e) {
    //get the row which belongs to clicked edit button
    var item = this.dataItem($(e.currentTarget).closest("tr"));

    //bind the window to the item via mvvm http://docs.telerik.com/kendo-ui/framework/mvvm/overview 
    kendo.bind($("#window"), item);
}

window 包含编辑器模板 (Shared/EditorTemplates/Client.cshtml) :

@(Html.Kendo().Window().Name("window")
    .Title("Client Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(400)
    .Content(@<text>
        @Html.Partial("EditorTemplates/Client", new Product())
    </text>))

//Put in every element in the window data-bind="value:INPUT NAME" 
//<input name="price" /> become <input name="price" data-bind="value: price" />
$("#window [name]").each(function () {
     var name = $(this).attr("name")
     $(this).attr("data-bind", "value:" + name );
 });

编辑器模板：

@model Product
@Html.TextBoxFor(m => m.Name)

如何从 window 更新 Kendo 网格行

How to update Kendo Grid row from window

command

window

kendo-ui

kendo-grid