Kendo Template cannot read/refresh grid

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: " " }],
    ]
});