@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("Employees")
        .Columns(columns =>
        {
            columns.Bound(e => e.FirstName).Width(140);
            columns.Bound(e => e.LastName).Width(140);
            columns.Bound(e => e.Title).Width(200);
            columns.Bound(e => e.Country).Width(200);
            columns.Bound(e => e.City);
        })
        .ClientDetailTemplateId("employeesTemplate")
        .Pageable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
            .PageSize(5)
        )
        .Sortable()
        .Events(events => events.DataBound("dataBound"))
)

<script id="employeesTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
            .Name("Orders_#=EmployeeID#")
            .Columns(columns =>
            {
                
                columns.Bound(o => o.OrderID).Width(101);
                columns.Bound(o => o.ShipCountry).Width(140);
                columns.Bound(o => o.ShipAddress).Width(200);
                
                columns.Bound(o => o.ShipName)
                .ClientTemplate("#= ShipName? 'XXX' : 'YYY' #")
                .Width(200);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

script src="../js/jquery.min.js"></script>
<script src="../js/kendo.mobile.min.js"></script>
<script src="../js/kendo.binder.min.js"></script>

Now in Google Chrome debugger I see the exception:
Uncaught ReferenceError: ProductID is not defined

As I look in Fiddler I see that the service (JSONP) call was never issued and must
believe this is the issue. Hopefully MVVM binding can be made to work in
the mobile app as I am evaluating Kendo against Sencha Touch which has
 a wonderful built in MVC pattern. I will not let code be written here
 without use of patterns like MVC abd MVVM so this is not a nice feature
 but a requirement in our choice.

I then made a couple of changes to the code that seemed promising:

1. I added a statement to force the read after the viewModel definition

viewModel.productsSource.read();
    Now I see the JSON data in Fiddler with the ProductID but still get the same error. Now I understand that
the datasource should contain observables which should cause the data binding to occur when the JSON data is read. This does not seem to be happening so I added a change method to the datasource that fires wnen the data has been read.It looks like:
change:function() {
       kendo.bind($("#form-container"), viewModel);
},
Now I place a breakpoint on this line and it is hit and the same exception is occuring, hopefully I am missing the obvious! The complete code looks like (HTML is unchanged from example)

<div id="grid" ></div>

Template:

<script type="text/x-kendo-tmplate" id="template">
    <div>
             <ul>
                     <li><a class="list k-link" title="#= title #" id="#= id#" >#= name #</a></li>
                </ul>
    </div>
</script>

I tried to do this using following code but nothing happens. Only id is read correctly but the request is not made.

$(" .list").live({click:function(){
 
    var id=$(this).attr('id');

    $("#grid").kendoGrid({
           dataSource: {
                 transport: {
                        read: "somefile.php?id="+id,  
                 },
               schema: {
                         data:"data",
                          model: {
                               id: "id_pf",
                               fields:{
                                    first:{}, 
                                   second:{}
                               }
                        }
              },
             total: function(response) {
                      return $(response.data).length;
             },

            pageSize: 10
         },

         columns: [
                 { title: "First", field: "first"},
                { title: "Second", field: "second"},
            ]
       });

}});