MVC Client binding - data present but not displaying

[Chad]

Hello, just checking out the Kendo UI suite via different binding methods and coming across this issue. When binding via the client side, it appears the JSON data is being correctly passed to the grid, but the data is not displaying within the grid.

@(Html.Kendo().Grid(Model.Companies)   

    .Name("ClientBindGrid")

    .Columns(columns =>

    {

        columns.Bound(c => c.CompanyName);

        columns.Bound(c => c.State);

    })

    .Groupable()

    .Pageable()

    .Sortable()

    .Scrollable()

    .Filterable()

    .DataSource(dataSource => dataSource

        .Ajax()

        .ServerOperation(false) // paging, sorting, filtering and grouping will be applied client-side

        .Read(read => read.Action("GetCompanies", "ManageCompanies",  new { area = "api" }))

    )

)

And here is what you see in the generate HTML:

<div class="k-widget k-grid" id="ClientBindGrid"><div class="k-grouping-header">Drag a column header and drop it here to group by that column</div><div class="k-grid-header"><div class="k-grid-header-wrap"><table cellspacing="0"><colgroup><col /><col /></colgroup><tr><th class="k-header k-filterable" data-field="CompanyName" data-title="Company Name" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="http://localhost:2337/CompanyMgmt/ManageCompanies">Company Name</a></th><th class="k-header k-filterable" data-field="State" data-title="State" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="http://localhost:2337/CompanyMgmt/ManageCompanies">State</a></th></tr></table></div></div><div class="k-grid-content" style="height:200px"><table cellspacing="0"><colgroup><col /><col /></colgroup><tbody><tr><td>H&H</td><td>CO</td></tr><tr class="k-alt"><td>H&H3333</td><td>CO</td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">1 - 2 of 2 items</span></div></div><script>

    jQuery(function(){jQuery("#ClientBindGrid").kendoGrid({"columns":[{"title":"Company Name","field":"CompanyName","encoded":true},{"title":"State","field":"State","encoded":true}],"groupable":{},"pageable":{"buttonCount":10},"sortable":true,"filterable":true,"dataSource":{"transport":{"read":{"url":""}},"pageSize":10,"page":1,"total":2,"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"CompanyID":{"type":"number"},"CompanyName":{"type":"string"},"Address1":{"type":"string"},"Address2":{"type":"string"},"City":{"type":"string"},"State":{"type":"string"},"PostalCode":{"type":"string"},"ItemMargin":{"type":"number"},"ServicesMargin":{"type":"number"},"InvoiceTimeIncrement":{"type":"number"},"CashDiscountPct":{"type":"number"},"BaseServiceHourlyRate":{"type":"number"},"HourlyPremiumRush":{"type":"number"},"HourlyPremiumLate":{"type":"number"},"HourlyPremiumCustomerMaterial":{"type":"number"},"CreatedByID":{"type":"number"},"CreatedOn":{"type":"date"},"ModifiedBy":{"type":"number"},"ModifiedOn":{"type":"date"},"UserProfile":{"type":"object"},"UserProfile1":{"type":"object"},"FullAddress":{"editable":false,"type":"string"}}}},"data":{"Data":[{"CompanyID":2,"CompanyName":"H\u0026H","Address1":"123 Mockinbird Lane","Address2":null,"City":"Denver","State":"CO","PostalCode":"12345","ItemMargin":0,"ServicesMargin":0,"InvoiceTimeIncrement":0,"CashDiscountPct":0,"BaseServiceHourlyRate":0,"HourlyPremiumRush":0,"HourlyPremiumLate":0,"HourlyPremiumCustomerMaterial":0,"CreatedByID":0,"CreatedOn":"\/Date(-62135571600000)\/","ModifiedBy":0,"ModifiedOn":"\/Date(-62135571600000)\/","UserProfile":null,"UserProfile1":null,"FullAddress":"Denver, CO 12345"},{"CompanyID":3,"CompanyName":"H\u0026H3333","Address1":"123 Mockinbird Lane","Address2":null,"City":"Denver","State":"CO","PostalCode":"12345","ItemMargin":0,"ServicesMargin":0,"InvoiceTimeIncrement":0,"CashDiscountPct":0,"BaseServiceHourlyRate":0,"HourlyPremiumRush":0,"HourlyPremiumLate":0,"HourlyPremiumCustomerMaterial":0,"CreatedByID":0,"CreatedOn":"\/Date(-62135571600000)\/","ModifiedBy":0,"ModifiedOn":"\/Date(-62135571600000)\/","UserProfile":null,"UserProfile1":null,"FullAddress":"Denver, CO 12345"}],"Total":2}}});});

</script>

You can see the data is populated above, but the grid has no rows. So it seems this binding event is not being fired?

[Rosen]

Hello Chad,

Could you please verify that you have included the kendo.aspnetmvc.min.js file. Information on how to use KendoUI for ASP.NET MVC in your project can be found here.

Regards,
Rosen
the Telerik team