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

【问题标题】：Kendo Grid sometimes renders only title or dataKendo Grid 有时只呈现标题或数据
【发布时间】：2017-03-22 15:47:57
【问题描述】：

我有一个非常简单的 Kendo Grid，它显示带有标题的数据列表，并且可以有条件地在字段上进行编辑。这是使用 JQuery 在 Kendo 视图的“显示”操作中调用的函数中呈现并附加到 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();
        }
    }
});

这来自显示剑道视图时触发的函数。

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid

【解决方案1】：

问题是要么数据不渲染要么网格列每次加载页面时标题都不会呈现。

如果不知道 js 代码中的“表单”是什么，请尝试使用它来确保它在“正确”时间加载。请随意修改 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 没有正确保存，抱歉。

【讨论】：

表单就是视图本身，抱歉。
立即调用它并没有帮助（只是尝试过）。这不是它不加载的问题，数据大部分时间都进来了，只是当它没有标题时。当它不进来时，它有没有数据的标题，但这种情况很少见。
你有一个示例 json 数据集与帖子分享吗？
自从您的更新：这与我已经拥有的内容一致 - 一个数据源馈入 Kendo Grid - 并在附加之前检查它是否可以找到“批准”。即使添加了没有失败的检查，我也有标题没有显示在列上方的问题。除了我可能错过的内容之外，您是否更改了其他内容？
@lgh 标题应该是字符串值