How to update Kendo Grid row from window

Question

The set-up:

• 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

The barrier:

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..

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: 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.

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.

Thanks for your time.

Answer 1

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);
}

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 );
 });

The editor template :

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

Answer 2

This demo shows how to get reference of the dataItem bound to the column where the custom command key is pressed, and shows the respective info in a Window. You can use the dataItem to update the Grid as well:

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

Here is an example as well:

http://dojo.telerik.com/abUHI Take a look at the showDetails function