2

我在 jsFiddle 中设置了一个简单的示例，我在其中初始化了一个剑道网格，然后绑定了一个视图模型。Chrome 中每一行的数据都填充在网格中，但 IE9 中没有。

这是html：

<div id="example">
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Units</th>
        </tr>
    </thead>
    <tbody data-template="row-template" data-bind="source: products"></tbody>
</table>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name">
        </td>
        <td>
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
    </tr>
</script>
</div>

这是JS：

$(document).ready(function () {
var viewModel = kendo.observable({
    products: [{
        name: "Hampton Sofa",
        price: 989.99,
        unitsInStock: 39
    }, {
        name: "Perry Sofa",
        price: 559.99,
        unitsInStock: 17
    }, {
        name: "Donovan Sofa",
        price: 719.99,
        unitsInStock: 29
    }, {
        name: "Markus Sofa",
        price: 839.99,
        unitsInStock: 3
    }]
});

   $("#example table").kendoGrid();
   kendo.bind($("#example"), viewModel);
});

这是 jsFiddle：http: //jsfiddle.net/e2XHN/1/

在我的原始示例中，我data-role="grid"在表格元素上使用，但这段代码更清晰。如果$("#example table").kendoGrid();是之后，kendo.bind($("#example"), viewModel);那么它可以在 IE 中使用。如果它在此之前，则它不起作用，并且控制台中不会出现异常。它在 chrome 中双向工作。

我知道我也可以将其设置为网格的数据源。我的偏好是使用data-role="grid"，所以这就是我关心的原因。

所以我有一个解决方法，但有谁知道为什么这在 IE9 中不起作用但在 Chrome 中起作用？

我只是将其作为 Telerik 的错误打开，但是当我访问他们的公共问题跟踪器（http://www.telerik.com/support/pits.aspx）时，它对我来说是空白的。

4

2 回答 2

1

我在剑道网格上遇到过类似的问题。它适用于 Chrome、Firefox、IE11 和 IE10，但不适用于 IE9。

我发现行模板有“无效”的 HTML，在我的例子<table>中<tr>是 .

我没有得到任何错误，只是一个悲伤的空网格。

所以建议是，检查你的行模板，因为如果有一些无效的东西，它就不会在<tbody>.

于 2015-02-10T22:00:51.123 回答
0

您应该在表格上使用 data-row-template 并将数据也绑定在那里而不是在 tbody 中：

在这里查看更新的小提琴工作

<div id="example">
<table data-row-template="row-template" data-bind="source: products">
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Units</th>
        </tr>
    </thead>
</table>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name">
        </td>
        <td>
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
    </tr>
</script>
</div>
于 2015-05-08T10:05:53.090 回答