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 r

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

Answer 3

My discoveries since posting this...

I'm new with web presentation development, therefore grasping the distinction of client vs. server side elements and scope of such was key point. As well, learning the various specifics of the Kendo Grid was also helpful.

Continuing on with my present solution...

Getting a handle on the row item selected from custom command event not done with Select() because row is not being selected. As previously stated in other posts, this was only a part of the needed work. In the custom command event handler JavaScript (seen again in full solution below):

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

MY SOLUTION:

In the parent window that hosts the Kendo Grid:

@* 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>

In the partial view _edit.cshtml being presented in Kendo modal 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" />

Wire up button event during form ready, which gets a handle to the grid control still in scope on the client-side:

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

I'm open to refactoring suggestions here. It seems like lots of client-side coding in JavaScript to accomplish custom activity against the Kendo Grid. (sigh) I am happy to have the versatility though. (smile)

It took much re-editing to hopefully get this answer to something useful. Let me know. ;)

REFERENCES: Telerik Forums / Kendo UI Forum / Grid / How does Grid update its dataSource?