Kendo Template cannot read/refresh grid - php

Question

I have a general grid that list a serie of processes each one with a sub-grid with the participants of each process.
Just like this
Here is the code:
$("#grid").kendoGrid({
dataSource: {
type: "json",
data: <?php echo $datos_procesos; ?>,
pageSize: 20
},
sortable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Empieza con",
eq: "Igual a",
neq: "No es igual a",
contains: "Contiene",
endswith: "Termina con"
}
}
},
selectable: "multiple",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
});
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
detailRow.find("#participantes").kendoGrid({
dataSource: {
type: "json",
data: <?php echo $datos_usuarios; ?>,
serverPaging: false,
pageSize: 7,
filter: { field: "IDPROCESO", operator: "eq", value: e.data.IDPROCESO }
},
scrollable: false,
sortable: true,
pageable: {
refresh: true
},
filterable: {
extra: false,
operators: {
string: {
startswith: "Empieza con",
eq: "Igual a",
neq: "No es igual a",
contains: "Contiene",
endswith: "Termina con"
}
}
},
columns: [
{ field: "NOMBRE", title:"Nombre" },
{ field: "EMAIL", title:"Email" },
{ field: "ACCIONES", title: "", encoded: false },
]
});
$("a[id^='delete']").kendoTooltip({
content: "Desasignar usuario",
position: "top"
});
$("a[id^='delete']").click(function(event){
event.preventDefault();
var u = $(this).attr("href");
$.ajax({
url: u
}).success(function() {
alert("Se ha desasignado al usuario del proceso.");
}).error(function() {
alert("Se ha producido un error al desasignar el usuario del proceso.");
});
});
});
The html code is just a simple lines
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
<ul>
<li class="k-state-active">
Participantes
</li>
</ul>
<div>
<div id="participantes"></div>
</div>
</div>
</script>
All works fine, the grids are displayed correctly, the data come from a php function which extracts from database the processes and the participants of each one.
My problem comes when I try to delete a participant of a process, I want to refresh or read the new updated data but It doesnt work.
If I click in link created a[id^='delete'] it calls a php function through ajax deleting the participant but then I cant reload the grid in the success callback. The "pageable: {refresh: true}" property also doesnt work
I have several problems like "Cannot read property 'dataSource' of undefined" or "Cannot read property 'read' of undefined"
I am new with the kendoUI and I am a bit lost, if anyone could give me a clue it would be appreciated.
Thanks for the help

Answer 1

I would suggest to use command line destory in participantes sub-grid. Kendo Grid handles removing item from sub-grid and you don't need to load data again.
detailRow.find("#participantes").kendoGrid({
dataSource: {
transport: {
read: {
url: //here url where sub grid data is read,
dataType: "jsonp"
},
destroy: {
url: // here server side url which removes particpant,
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
serverPaging: false,
pageSize: 7,
filter: { field: "IDPROCESO", operator: "eq", value: e.data.IDPROCESO }
},
scrollable: false,
sortable: true,
pageable: {
refresh: true
},
filterable: {
extra: false,
operators: {
string: {
startswith: "Empieza con",
eq: "Igual a",
neq: "No es igual a",
contains: "Contiene",
endswith: "Termina con"
}
}
},
columns: [
{ field: "NOMBRE", title:"Nombre" },
{ field: "EMAIL", title:"Email" },
{ field: "ACCIONES", title: "", encoded: false },
{ command: ["destroy"], title: " " }],
]
});