Refresh two Kendo grids -


i have 2 kendo grids on same page, upper grid contains 'parent' records, lower grid displays 'children' of parent when parent clicked.

when perform action on parent, want a) update database (both parent , child records affected), b) reload data in parent grid , c) reload data in child grid.

i can a) , b), c) doesn't work.

here's function:

// restore soft-deleted person var processrestoreurl = crudservicebaseurl + '?method=restoreperson'; function restoreperson(id, row){     if (confirm('#getresource("person.detail.confirmrestore")#')) {         $.ajax({             type: 'post',             url: processrestoreurl,             data: {                 pers_ky: id             },             success: function (data){                 // refresh datasource row updates                 $("#list").data("kendogrid").datasource.read();                  // do: make organisation tab reload restored data                 $("#organisationgrid").data("kendogrid").datasource.read();                     // doesn't work :-(                     // seems execute before datasource refresh                     // maybe need reload tab here, no need reread datasource?               },             error: function (xhr, textstatus, errorthrown){                 alert("error while restoring person"+ "\n"+ xhr + "\n"+ textstatus + "\n" + errorthrown);             }         });     } } 

how #organisationgrid refresh?


edit

//on databound event // 1: change search operator contain every 'string' type // 2: restore previous selected rows // 3: save person filter information in cookie function databoundfunction(){     //search change     settimeout(function(){         var header;         $('.k-header').each(function(i){             if ($(this).data('kendocolumnmenu')) {                 header = $(this).data('kendocolumnmenu');                 if (header.filtermenu) {                     header.menu.bind('open', function(e){                         if ($(e.item).is('.k-filter-item')) {                             header = $('.k-header:eq(' + + ')').data('kendocolumnmenu');                             var popup = header.filtermenu.popup;                             if (!$(popup.element).data('alreadyopened')) {                                 var select = this.element.find('select:first');                                 var option = select.children('option:contains("contains")');                                 if (option.length > 0) {                                     select.data('kendodropdownlist').select(option.index());                                     header.filtermenu.filtermodel.set("filters[0].operator", "contains");                                 }                                 $(popup.element).data('alreadyopened', true);                             }                         }                     });                     header.filtermenu.form.bind('reset', function(){                         $(this).parent().data('kendofiltermenu').popup.element.data('alreadyopened', false);                     });                 }             }             else                 if ($(this).data('kendofiltermenu')) {                     header = $(this).data('kendofiltermenu');                     header.popup.bind('open', function(){                         if (!$(this.element).data('alreadyopened')) {                             header = $('.k-header:eq(' + + ')').data('kendofiltermenu');                             var select = this.element.find('select:first');                             var option = select.children('option:contains("contains")');                             if (option.length > 0) {                                 select.data('kendodropdownlist').select(option.index());                                 header.filtermodel.set("filters[0].operator", "contains");                             }                             $(this.element).data('alreadyopened', true);                         }                     });                     header.form.bind('reset', function(){                         $(this).parent().data('kendofiltermenu').popup.element.data('alreadyopened', false);                     });                 }         });     }, 1);     //selected row     var view = gridlist.datasource.view();     var currentselection = gridlist.wrapper.data('currentselection');     for(var = 0; < view.length;i++){         if(checkedids[view[i].id]){             gridlist.table.find("tr[data-uid='" + view[i].uid + "']")                 .find("input[type=checkbox]")                 .attr("checked","checked");         }     }     if(currentselection) {         gridlist.select('[data-uid=' + gridlist.datasource.get(currentselection).uid + ']');     } } 

here simple demo showing how this:

http://dojo.telerik.com/ufedo

the important bit bit in first grid:

  databound: function (e) {       console.log(e);        reboundtimes = reboundtimes + 1;        $('#newconsole').html('<strong>rebinding child grid now: have done this: ' + reboundtimes + ' time(s)</strong>');       $('#grid2').data('kendogrid').datasource.read();   }, 

all doing once databound event fired logging console (just show event has done) incrementing counter show firing event off.

once has fired off calls second grid , fires off read event on datasource.

any issues let me know.


Comments