剑道模板无法读取/刷新网格

时间:2014-12-12 11:39:51

标签: php jquery kendo-ui kendo-grid kendo-template

我有一个通用网格,列出了一系列流程,每个流程都有一个子网格,每个流程都有参与者。

就像this

一样

以下是代码:

              $("#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 ^ =&#39; delete&#39;]它通过ajax删除参与者调用php函数但是我无法在成功回调中重新加载网格。 &#34;可分页:{refresh:true}&#34;财产也不起作用

我有几个问题,比如&#34;无法读取属性&#39; dataSource&#39;未定义&#34;或&#34;无法阅读财产&#39;阅读&#39;未定义&#34;

我是kendoUI的新手,我有点失落,如果有人能给我一个线索,我将不胜感激。

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

我建议在参与者子网格中使用命令行destroy。 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: "&nbsp;" }],
    ]
});