我在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/
在我的原始示例中,我在 table 元素上使用 data-role="grid"
,但此代码更清晰。如果$("#example table").kendoGrid();
是在kendo.bind($("#example"), viewModel);
之后,那么它可以在IE中工作。如果在此之前,则它不起作用,并且控制台中不会出现异常。它在铬中双向工作。
我知道我也可以将其设置为网格的数据源。我的偏好是使用data-role="grid"
,所以这就是我关心的原因。
所以我有一个解决方法,但是有谁知道为什么这在IE9中不起作用,但在Chrome中起作用?
我只是用 Telerik 打开它作为错误,但是当我去他们的公共问题跟踪器 (http://www.telerik.com/support/pits.aspx) 时,它对我来说是空白的。
我在剑道网格上遇到了类似的问题。它适用于Chrome,Firefox,IE11和IE10,但不适用于IE9。
我发现行模板具有"无效"的 HTML,在我的情况下是围绕<tr>
的<table>
,这是更现代的浏览器所容忍的,但 IE9 不能容忍。
我没有收到任何错误,只是一个可悲的空网格。
所以建议是,检查您的行模板,因为如果有什么无效的东西,它就不会在<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>