Kendo ui 为什么初始化剑道网格后的数据绑定VM在Chrome而不是IE中工作？

我在JSFIDLE中设置了一个简单的示例，其中我初始化了一个剑道网格，然后绑定了一个viewmodel。数据在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>

以下是JSFIDLE：

在我最初的示例中，我在table元素上使用了

datarole=“grid”

，但这段代码更清晰。如果

$（“#示例表”）.kendoGrid（）在
kendo.bind（$（“#示例”），viewModel之后则它在IE中工作。如果它在IE之前，则它不工作，并且控制台中不会出现异常。它在chrome中双向工作

我知道我也可以将其设置为网格的数据源。我更喜欢使用
data role=“grid”
，这就是我关心的原因

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

我只是想用Telerik打开这个bug，但当我转到他们的公共问题跟踪器（）时，它对我来说是空白的。
我在剑道网格上也遇到过类似的问题。它使用的是Chrome、Firefox、IE11和IE10，但不是IE9

我发现行模板有“无效”的HTML，在我的例子中，
周围有一个
，这是更现代的浏览器可以容忍的，但IE9不能容忍

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

因此，建议您检查行模板，因为如果存在无效内容，它将不会在
中呈现内容。您应该在表上使用数据行模板，并在表中绑定数据，而不是在tbody中：

请参阅更新的小提琴工作


名称
价格
单位
#：剑道。toString（获取（“价格”），“C”）#
数据绑定后初始化datagrid的一个不良副作用是，如果您在tbody trs中有复选框，则它们将被删除，但如果您在初始化datagrid后进行数据绑定（当然是在chrome中），它们将保留下来。
$(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);
});

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