Kendo binding and templating

Question

I can't seem to understand why but I have 2 "components" i'm trying to template and bind and only the second works as intended.

The first is apparently templating ok but does not bind (the data is not populated as per the declared bindings in the templated row).

Does anyone know why?

Component 1: grid with 1 templated item ...

<div class="component k-content" data-type="BusinessTask">
    <h2><span class="k-sprite folder"></span>  Business Tasks <img src="/Content/close.png"></h2>
    <script>
        $(function () {
            //TODO: add signalR behaviour to allow grid update notifications from the server
            dependency.get('BusinessTask');
            BusinessTaskGridChange = function (arg) {
                if(typeof BusinessTask.gridItemClick != 'undefined') {
                    var grid = $("#BusinessTaskGrid").data("kendoGrid");
                    var item = grid.dataItem(grid.select());
                    BusinessTask.gridItemClick(item);
                }
            };

            var BusinessTaskModel = createModel('BusinessTask');

            $("#BusinessTaskGrid").kendoGrid({
                dataSource: BusinessTaskModel,
                rowTemplate: kendo.Template.compile($("#BusinessTaskRow").html()),
                selectable: "row",
                columns: type.columnsFor("BusinessTask"),
                change: BusinessTaskGridChange,
                error: page.error
            });
        });
    </script>
    <script id="BusinessTaskRow" type="text/x-kendo-template">
        <tr>
            <td><span data-bind="text: ID"></span></td>
            <td><a href="" data-ref-type="Workflow" data-bind="attr: { data-ref: WorkflowID }, events: { click: refClick }">View Workflow</a></td>
            <td><span data-bind="text: FlowPosition"></span></td>
            <td><span data-bind="text: Title"></span></td>
            <td><pre data-bind="text: Description"></pre></td>
            <td><span data-format="dd MMM yyyy" data-bind="text: Created"></span></td>
            <td><span data-format="dd MMM yyyy" data-bind="text: Due"></span></td>
            <td><span data-bind="text: BusinessTaskStatusID"></span></td>
            <td><span data-bind="text: BusinessTaskTemplateID"></span></td>
            <td><span data-bind="text: DependentEntityID"></span></td>
            <td><input type="checkbox" data-bind="checked: ActiveStatusID" readonly="readonly" disabled="disabled" /></td>
            <td><span data-bind="text: SystemID"></span></td>
        </tr>
    </script>
    <div id="BusinessTaskGrid" class="details k-grid k-widget" data-role="grid"></div>
</div> 

Component 2: single item bound directly (no kendo grid) ...

<div id="BusinessTask1_View" class="component k-content" data-type="BusinessTask">
    <h2><span class="k-sprite edit"></span>  Business Task: 1 <img src="/Content/close.png"></h2>
    <script>
        $(function () {
            dependency.get('BusinessTask');            
            var BusinessTask1_ViewModel = createModel('BusinessTask', '1');
            var component = $("#BusinessTask1_View");
            kendo.bind(component, BusinessTask1_ViewModel);
        });
    </script>
    <div class="details">
        <ul class="fieldList">
            <li>
                <label for=""> Workflow</label>
                <div class="value"><a href="" data-ref-type="Workflow" data-bind="attr: { data-ref: WorkflowID }, events: { click: refClick }" data-ref="1">View Workflow</a></div>
            </li>
            <li>
                <label for=""> Flow Position</label>
                <div class="value"><span data-bind="text: FlowPosition"></span></div>
            </li>
            <li>
                <label for=""> Title</label>
                <div class="value"><span data-bind="text: Title"></span></div>
            </li>
            <li>
                <label for=""> Description</label>
                <div class="value"><pre data-bind="text: Description"></pre></div>
            </li>
            <li>
                <label for=""> Created</label>
                <div class="value"><span data-format="dd MMM yyyy" data-bind="text: Created"></span></div>
            </li>
            <li>
                <label for=""> Due</label>
                <div class="value"><span data-format="dd MMM yyyy" data-bind="text: Due"></span></div>
            </li>
            <li>
                <label for=""> Business Task Status</label>
                <div class="value"><span data-bind="text: BusinessTaskStatusID"></span></div>
            </li>
            <li>
                <label for=""> Business Task Template</label>
                <div class="value"><span data-bind="text: BusinessTaskTemplateID"></span></div>
            </li>
            <li>
                <label for=""> Dependent Entity</label>
                <div class="value"><span data-bind="text: DependentEntityID"></span></div>
            </li>
            <li>
                <label for=""> Active Status</label>
                <div class="value"><input type="checkbox" data-bind="checked: ActiveStatusID" readonly="readonly" disabled="disabled"></div>
            </li>
            <li>
                <label for=""> System</label>
                <div class="value"><span data-bind="text: SystemID"></span></div>
            </li>
        </ul>
        <hr>
        <button class="k-button" data-bind="events: { click: edit }">Edit</button>
    </div>
</div>

Answer 1

It looks like kendo is a little inconsistent in itself.

for example

if I use "$("selector").kendoSomething({ options });" create a kendo control it will seemingly template but not bind. By that I mean that a grid will generate a row for templates with data-bind="stuff" in them given the template binding but not actually perform the binding declarations.

but doing kendo.bind($("selector"), model) will do the binding and templating but also init kendo controls that are declared with the data-role attribute.

There is some peculiar behaviour in here and I have requested that Telerik standardise it a little for consistency.