如何从窗口更新Kendo Grid行 [英] How to update Kendo Grid row from window

问题描述

设置：

• ASP MVC项目


• Kendo Grid在视图中Razor


• 列自订命令，呼叫...


• 以refresh（）方式开启Kendo视窗的JavaScript自订表单的部分检视


• 表单有一个输入类型=按钮调用JavaScript

• ASP MVC project
• Kendo Grid in a view via Razor
• Column custom command, calls...
• JavaScript that opens Kendo window with refresh() URL to partial view as custom form
• The form has an input type=button calling JavaScript

屏障：

如何使用新模型（从窗口/表单javascript）更新Grid的行（dataItem？）。我无法获得目标dataItem的句柄。在此处选择（）不适用，因为未选择该行。相反，一个自定义按钮事件打开模式网格窗口有字段和命令更新，关闭等。

How to update the row (dataItem?) of Grid with new model (from window/form javascript). I am unable to get a handle to target dataItem. Select() is not applicable here because the row is not selected. Instead, a custom button event opens modal Grid Window having the fields and commands for update, close, etc..

我可以使用本地编辑网格，但什么我我试图完成是一个完全自定义的弹出窗口显示部分视图，可用于呈现CRUD操作的方式。

I could use the native Edit of Grid, but what I am trying to accomplish is a way to have complete customization of a pop up window showing partial view that can be used to present CRUD actions.

BTW：这是基本原理是优化网格行中通常用于编辑的不必要按钮的空间，以及使用Kendo本机控件属性进行删除。我觉得这个更好的呈现在一个单独的细节视图，像一个模型网格窗口，在我的情况。

BTW: Rationale for this is to optimize space in a grid row that would normally be consumed with unnecessary buttons for Editing, and Deleting, layed down by use of the Kendo native control properties. I feel this is better presented in a separate, details view, like a Model Grid Window, in my case.

再次，不使用Select（），我无法了解如何在窗口/表单JavaScript中获取一个句柄，以调用它的Grid行，以便更新具有新模型数据的行。

Again, not using Select(), I am unable to understand how to get a handle, within the Window/form JavaScript, to the Grid row that it was called from, for purposes of updating the row with new model data.

感谢您的时间。

推荐答案

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

Using your method you are doing double request so my suggesting: On edit open a window binded to row via 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);
}

窗口包含编辑器模板（Shared / EditorTemplates / Client.cshtml）

The window contain an editor template (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)

这篇关于如何从窗口更新Kendo Grid行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！