CODEWITHSUNDEEP
jquerykendo-grid
user2708755
user2708755

Reputation: 1

editable kendoGrid inside kendoGrid Edit Popup not working correctly

this is my first post ever so be nice with me.

My problem is the following: Fist I have two entities Associated and Address (an associated have many addresses).

The webpage have a editable kendoGrid listing the associated (the datasource contains all the associated each with a list of their adressses) and when I click the edit button a popup appears with the data and an editable kendoGrid with the list of addresses. I click on the edit button the edit address popup appears but the update button don't work and the cancel button deletes the row.

the following is my code

Datasource

associatedDS = 
new kendo.data.DataSource({        
 data: Data,
 schema: {
  model: {
   id: "AsociatedID",
   fields: {
    Associated: { type: "string", editable: false, nullable: true },
    Addresses: { type: "object", validation: { required: true } }                        
   }
  }  
 }
});

Grid Associated 

var Associated = 
$("#kgrd_Associated").kendoGrid({
 columns: [
 { field: "AsociatedID", title: "Direccion", width: "100px", },
 { field: "Associated", title: "Direccion", width: "100px", },
 { field: "Addresses", title: "Addresses", width: "350px", editor:addressGridEditor, template: "#= Addresses.length #" },
 { command: ["edit", "destroy"], title: " ", width: "150px"  }
],
dataSource: associatedDS,
editable: "popup",
height: 400,
pageable: true,
scrollable: true,
sortable: true,
selectable: "row",
}).data("kendoGrid"); 
});

Grid Address

function editor:addressGridEditor(container, options) {  
 var repgrid = $('<div id="kgrd_Address" data-bind="source:' + options.field + '"></div>')
 .appendTo(container)
 .kendoGrid( {
  columns: [                    
   { field: "Address",   title: "Address", width: "150px"   },
   { command: ["edit", "destroy"],   title: "&nbsp;", width: "150px"  }
  ],
  editable: "popup",
  scrollable: true,
  selectable: "row",
  autoBind: true                
  }).data("kendoGrid");
}

The binding is working fine, but the datasource of kgrd_Address is not being generated correctly because is missing the schema (needed to update) and _pristineData (needed to cancel).

I don't know if i'm missing something or if there is a workaround this. Take into account that I may have more than one kendoGrid inside the popup like idk, kgrd_contacts.

Upvotes: 0

Views: 1471

Answers (1)

Jaimin
Jaimin

Reputation: 8020

Try this, 

  function addressGridEditor(container, options) {  
     var repgrid = $('<div id="kgrd_Address" data-bind="source:' + options.field + '"></div>')
     .appendTo(container)
     .kendoGrid( {
      columns: [                    
       { field: "Address",   title: "Address", width: "150px"   },
       { command: ["edit", "destroy"],   title: "&nbsp;", width: "150px"  }
      ],
      editable: "popup",
      scrollable: true,
      selectable: "row",
      autoBind: true                
      }).data("kendoGrid");
    }

I think you have to remove editor: from function.

Upvotes: 1

Related Questions