Why does databinding VM after initializing Kendo grid work in Chrome and not IE?

Question

I setup a simple example in jsFiddle where I initialize a kendo grid and then bind a viewmodel. The data is populated in the grid for each row in Chrome but not in IE9.

Here is the 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>

Here is the 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);
});

Here is the jsFiddle: http://jsfiddle.net/e2XHN/1/

In my original example I use data-role="grid" on the table element but this code is clearer. If $("#example table").kendoGrid(); is after kendo.bind($("#example"), viewModel); then it works in IE. If it is before then it does not work and no exceptions appear in the console. It works both ways in chrome.

I know that I could just set it up as the datasource for the grid as well. My preference is to use data-role="grid", so that is why I care.

So I have a work-around, but does anyone know why this doesn't work in IE9 but does in Chrome?

I would just open this as a bug with Telerik but when I go to their public issue tracker (http://www.telerik.com/support/pits.aspx) it comes up blank for me.

Answer 1

I've had similar issues with the Kendo Grid. It was working with Chrome, Firefox, IE11 and IE10, but not IE9.

What I found out is the row-template had "invalid" HTML, in my case a <table> around the <tr>, which was tolerated by more modern browsers, but not by IE9.

I was getting no errors, just a sad empty grid.

So the advice is, check your row-template, because if there is something invalid, it will just not render content in the <tbody>.

Answer 2

You should use data-row-template on the table and bind the data there as well rather than in the tbody:

See updated Fiddle working here

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