Popup Grid Cancel button

[Chatra]

Hi,

I have popup Edit  Grid with Save and cancel buttons.

But for some reason the cancel button for new Model working fine, but for existing record the cancel button doesn't revert the changes on the record/row. But assigns back to grid. Can any one  let me know what could be the reason. Here s the snippet for cancel button event; which I ended up to try it but  doesn't succeeded.

 editable: {
                mode: "popup",
                template: kendo.template($("#tapopup_editor").html())
            },
            edit: function (e) {

//Cancel  Event
e.container.find(".k-grid-cancel").bind("click", function () {
                    // e.preventDefault();
                    // $('#Grid').data("kendoGrid").cancelChanges();
                    $("#Grid").data("kendoGrid").dataSource.read();
                });

}

Thanks,
Chatrapathi Chennam

[Chatra]

Hi,

Please see the demo below.

On Edit of Writer; a popup tab strip opens up.

And on "Agent" tab strip tried to edit a row of agent grid on it and then cancel the edit after making changes to row.But the cancel button doesn't revert the changes made to grid but by default taking the new changes; which also stops  the Edit button click on the row item.

Thanks,
Chatrapathi Chennam

[Alexander Popov]

Hello Chatrapathi,

Thank you for the provided project. I reviewed it and noticed that the agentDataSource is using an observable array for its data option. I would recommend converting the array items to simple objects instead. For example: 

agentDataSource = new kendo.data.DataSource({
    data: model.Agents.toJSON(),

Regards,
Alexander Popov
Telerik

 

 

[Chatra]

Hi Alexander,

Thank you for the Quick reply and it solves the problem.

But I found new issue with it. Any changes to Agents model not getting recognized or model not getting dirty.

I tried to make parent model dirty with below  change event snippet ;but control never comes over their as agent model not getting recognized as dirty for any data cell change.

​

uwdataSource = new kendo.data.DataSource({
transport: {
        read: {
        url: crudServiceBaseUrl + "/GetwriterData",
                 },
         create: {
        url: crudServiceBaseUrl + "/POSTAddWriterData",
        type: "POST",
        contentType: "application/json"
              },
        update: {
         url: crudServiceBaseUrl + "/UpdateWriterData",
         type: "POST",
         contentType: "application/json"
                        },
         parameterMap: function (options, operation) {
          if (operation != "read") {
                  return kendo.stringify(options);
             }
         }
         },
    change: function (e) {
             if (e.action == "itemchange" || (e.field == "Agents")) {
                var parentModel = e.items[0].parent().parent();
                parentModel.dirty = true;
                     }
             },

[Alexander Popov]

Hi Chatra,

This is expected, because the Agents Grid's items are not bound to the Writers Grid DataSource. You could subscribe to the Writers Grid save event and then manually set the new values taken from the Agents Grid's rows. Another approach would be to have a fully functional CRUD operations for the Agents Grid, independent from the Writers Grid.

Regards,
Alexander Popov
Telerik

 

 

[Chatra]

Hi Alexander,

if we don't set toJson then the full model is able to get detected for "Itemchange" and that can used to make parent dirty.

In my case Full Model is in Tab strip and  their will be inly one Save Button(Master Button) for all. Any Changes in the  model need to be get detected.

if we have fully functional crud separately  then we can read data separately and needs to be saved separately by having save button for each of the Tab Strip Leaf.

Any work around to get changes to be detected for master save.

[Vladimir Iliev]

Hi Chatra,

My colleague Alex already mention how you can achieve the desired behavior using the "save" event of both grids - for convenience I pasted the needed code below:

agentDataSource = new kendo.data.DataSource({
    data: model.Agents.toJSON(),

$("#agentGrid").kendoGrid({
    save: function (e) {
        var model = e.model;
        var uid = this.wrapper.closest(".k-popup-edit-form").data("uid");

        var grid = $("#writergrid").data("kendoGrid");
        var model = grid.dataSource.getByUid(uid);
        model.dirty = true;
    },

$("#writergrid").kendoGrid({
    save: function (e) {
        var data = $("#agentGrid").data("kendoGrid").dataSource.data().toJSON();
        e.model.set("Agents", data);
    },

Using the above solution the parent record will be updated only if child grid have changes applied.

Regards,
Vladimir Iliev
Telerik