Custom Popup Editor from ajax call

[Mark]

I have a series of complex update forms for various grids. These are not easily represented as editor templates. Much of the UI is variable and changes to the rendered form would have to be done with JavaScript.

Ideally, I would like to use popup editing but with the contents of the popup coming from a PartialView in an ajax call. Is this at all possible and is there a recommended way of doing it?

I managed to get part of the way to a solution but the final piece (saveRow() and cancelRow()) does not work.

Here is a rough outline of my method (grid BeforeEdit event):

01.var onBeforeEdit = function(e) {
02.    e.preventDefault();
03.    var grid = e.sender;
04.
05.    var url = "example/controller/action";
06.
07.    if ($("#generic-edit-dialog").length === 0) {
08.        $("body").append("<div id='generic-edit-dialog'></div>");
09.    }
10.
11.    var html ="<div id='generic-edit-dialog-content' class='dialog-content'></div>";
12.    html += "<div class='dialog-footer'><div class='pull-right'>";
13.    html += "<button type='button' id='generic-edit-update' class='btn btn-default k-button' data-role='button' role='button' aria-disabled='false'>Update</button>";
14.    html += "<button type='button' id='generic-edit-cancel' class='btn btn-default k-button' data-role='button' role='button' aria-disabled='false'>Cancel</button>";
15.    $("#generic-edit-dialog").html(html);
16.
17.    $.post(url, JSON.stringify(model))
18.      .done(function (data) {
19.          $("#generic-edit-dialog-content").html(data);
20.
21.          //Put in every element in the window data-bind="value:INPUT NAME"
22.          //<input name="price" /> become <input name="price" data-bind="value: price" />
23.          $("#generic-edit-dialog-content [name]").each(function () {
24.              var name = $(this).attr("name")
25.              $(this).attr("data-bind", "value:" + name);
26.          });
27.
28.          kendo.bind($("#generic-edit-dialog-content"), model);
29.
30.          var win = $("#generic-edit-dialog").kendoWindow({
31.              width: width,
32.              title: title,
33.              modal: true,
34.              visible: false,
35.              actions: [
36.                  "Close"
37.              ],
38.              close: function () { this.destroy; }
39.          }).data("kendoWindow");
40.
41.          $("#generic-edit-update").click(function () {
42.              grid.saveRow();
43.              win.close();
44.          });
45.
46.          $("#generic-edit-cancel").click(function () {
47.              grid.cancelRow();
48.              win.close();
49.          });
50.
51.          win.center().open();
52.      })
53.      .fail(function (jqXHR, textStatus, errorThrown) {
54.          alert("error: " + errorThrown);
55.      });
56.
57.}

 

Stepping through the code, it seems that some things are missing which prevent saveRow() and cancelRow() from behaving as expected. In particular, there are references to grid._editContainer and grid.editable which are undefined in my case.

Is there anything to be done to salvage this?

 

 

 

[Mark]

Forgot to mention....

Using kendo MVC version 2018.1.221

 

[Boyan Dimitrov]

Hello,

Indeed the saveRow method expects the built-in popup editor to be opened. In the approach below the built-in editing is prevented so some of the internal objects are not created at all. The problem is that saveRow and cancelRow depends on these objects to perform properly. 

My suggestion in your case is to access the dataSource instance of the grid and use the sync and cancelChanges instead of the grid saveRow and cancelRow methods. 

Regards,
Boyan Dimitrov
Progress Telerik

[Mark]

Thanks Boyan, that seems to be what was needed in my case.

The only downside that I can see is that we would have to synchronize with the server on every close of popup. In other words, we do not have the option to update/cancel just the grid and commit changes later on (via a grid toolbar button).

 

[Boyan Dimitrov]

Hello,

The default behavior of inline/popup editing of the Kendo UI Grid is to sync changes made to the currently modified item when the inline form/popup edit form is closed. However with a completely custom popup edit form (just like your case) this behavior can be avoided. The update and cancel button of the custom edit form can simply close the form (without syncing the changes with the server by calling the sync method).
  
The model object is bound to the edit form using MVVM because of the following code 

kendo.bind($("#generic-edit-dialog-content"), model);

This means that as soon as user is done typing in the input field of the edit form and the input field looses its focus the underlying model in the DataSource will be updated with the new value. So simply closing the edit form will not affect the model and the DataSource in any way. It will remain modified and the modified value will not be lost or reverted to the old value. The edit operation can be applied for another model and so on. After user is done editing the models a sync request to the server can be made containing all models (call the sync method of the DataSource). The advantage of this approach is to update more than one model with a single update request to the server. Also called batch operation. Please refer to the batch property of the DataSource for more information and example. Also take a look at the https://demos.telerik.com/kendo-ui/grid/editing demo. 



Regards,
Boyan Dimitrov
Progress Telerik