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

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?