Kendo Grid detailInit Callback Inconsistency

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<div id="root">
    <h2>Kendo Grid detailInit Callback Inconsistency</h2>
    <p>Click on the row expand button to show an alert that displays the ID of the row.  Note that the grid initalised via the role data attribute shows up as an ID of Undefined.</p>
     <h3>Initialised via jQuery</h3>

    <div id="grid"></div>
     <h3>Initalised via data attributes</h3>

    <div data-role="grid" data-bind="source: items, events: { detailInit: detailInit }" data-detail-template="template"></div>
    
    <script type="text/x-kendo-template" id="template">
        <div> Test </div>
    </script>
</div>

CSS

.k-hierarchy-cell a {
    border:1px solid green;
    color: #eee;
}

.k-hierarchy-cell a {
    background-color:lightgreen;
}

JavaScript

$(function () {
    var ds = new kendo.data.DataSource({
        data: [{
            id: 1,
            name: "Joe Blogs"
        }, {
            id: 2,
            name: "Billy Bob"
        }, {
            id: 3,
            name: "Mr Big"
        }, {
            id: 4,
            name: "Plain Jane"
        }, ]
    });

    $("#grid").kendoGrid({
        dataSource: ds,
        detailInit: detailInit,
        detailTemplate: kendo.template($("#template").html())

    });

    var vm = kendo.observable({
        items: ds,
        detailInit: detailInit
    });

    function detailInit(e) {
        alert(e.data.id);
    }

    kendo.bind($("#root"), vm);
});