Шаблон кендо не может читать / обновлять сетку

Question

У меня есть общая сетка, в которой перечислены серии процессов, каждый из которых имеет подсеть с участниками каждого процесса.

Просто так

Вот код:

              $("#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.");
                            });
                        });
                    });

HTML-код это просто простые строки

             <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>

Все работает нормально, сетки отображаются правильно, данные поступают из функции php, которая извлекает из базы данных процессы и участников каждого.

Моя проблема возникает, когда я пытаюсь удалить участника процесса, я хочу обновить или прочитать новые обновленные данные, но это не работает.

Если я нажимаю на ссылку, создающую [id^='delete'], она вызывает функцию php через ajax, удаляя участника, но затем я не могу перезагрузить сетку в обратном вызове успеха. Свойство "pageable: {refresh: true}" также не работает

У меня есть несколько проблем, таких как "Не удается прочитать свойство" dataSource "из неопределенного" или "Не удается прочитать свойство" читать "из неопределенного"

Я новичок в kendoUI, и я немного растерялся, если кто-нибудь сможет дать мне подсказку, это будет оценено.

Спасибо за помощь

Answer 1

Я бы предложил использовать destory командной строки в подсетке участников. Kendo Grid обрабатывает удаление элемента из подсетки, и вам не нужно загружать данные снова.

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