Question

我有一个非常简单的Kendo Grid，它显示带有标题的数据列表，并且可以在字段上有条件地编辑。这是使用JQuery在＆＃34; show＆＃34;中调用的函数中呈现并附加到DOM。剑道观的行动。

问题是，每次加载页面时，数据都不呈现或网格列标题不会呈现。它始终是一个或另一个，唯一一次正确呈现的是，如果我重写附加它的函数，就像我在页面状态发生变化时偶尔会做的那样。

此处我将其附加到页面：

form.find("#approvals").kendoGrid({
    columns: [
        { title: "Service", field: "PartDescription" },
        { title: "Component", field: "Component", width: "250px" },
        { title: "Status Last Modified", width: "250px", template: "#= kendo.toString(StatusModifiedDate, 'g') #", },
        { title: "Status", field: "Status", width: "135px", editor: statusDropDownEditor }
    ],
    editable: modifyState,
    edit: function (e) {
        if (e.container.find("input").attr("name") !== "Status") {
            this.closeCell();
        }
    }
});

这来自显示Kendo View时触发的功能。

Answer 1

问题是数据无法呈现或网格列每次加载页面时，标题都不会呈现。

不知道＆＃34;形式＆＃34;在你的js代码中，尝试使用它来确保它加载到正确的＆＃39;时间。请随意修改gridData变量以匹配您的代码并preg_replace您的字段的字段。

   <!DOCTYPE html>
<html>
<head>
     <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

</head>
<body id="theBod">
  <div id="approvals"></div>

  <script type="text/javascript">
   $(function () { // the dom is ready for jquery parsing 
    var gridData = [{
        "Name": "daya",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "siva",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "sivadaya",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }, {
        "Name": "dayasiva",
        "Role": "Developer",
        "Dept": "Dev",
        "Date": "\/Date(836438400000)\/",
        "Balance": 23
    }];

    var form = $("#theBod");
    var foundForm = $(form).find("#approvals");

    if (typeof (foundForm) != "undefined") {
        // process grid component
        var grid = $(foundForm).kendoGrid({
            dataSource: {
                data: gridData,
                schema: {
                    model: {
                        fields: {
                            Name: { type: "string" },
                            Role: { type: "string" }
                        }
                    }
                },
                pageSize: 10,
            },
            editable: true,
            sortable: true,
            columns: [
                {
                    field: "Name",
                    title: "Name",
                },
                {
                    field: "Role",
                    title: "TheRole"
                }
            ]
        });

    } else {
        alert('no dom element located');
    }
});
  </script>
</body>
</html>

我已为您添加了jsBin个文件。

jsBin没有正确保存，道歉。

Kendo Grid有时只呈现标题或数据

1 个答案: