I am using Kendo UI for ASP.Net MVC 2015.2. I have defined a grid using razor syntax as follows:
Html.Kendo().Grid(Of NameValue)() _
.Name("grdTerms") _
.DataSource(Function(ds) ds.Ajax() _
.Batch(True) _
.ServerOperation(False) _
.Read(Function(r) r.Data(UIHelper.ToJSON(Model.MyNameValues)))) _
.Columns(Sub(c)
c.Bound("Name").Title("My Name")
c.Bound("Value").Title("My Value")
End Sub) _
.Pageable(Function(pager) pager.Input(True).Numeric(False).Info(True).PreviousNext(True).Refresh(True).PageSizes(True)) _
.Scrollable() _
.Render()
The generated JQuery for the grid in the view shows that the datasource has JSON data assigned, yet no data appears in the grid. The view code is generated as follows:
<div class="k-widget k-grid" id="grdTerms"><div class="k-grid-header"><div class="k-grid-header-wrap"><table><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="Name" data-index="0" data-title="My Name" scope="col"><span class="k-link">My Name</span></th><th class="k-header" data-field="Value" data-index="1" data-title="My Value" scope="col"><span class="k-link">My Value</span></th></tr></thead></table></div></div><div class="k-grid-content" style="height:200px"><table><colgroup><col /><col /></colgroup><tbody><tr class="k-no-data"><td colspan="2"></td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager"><a class="k-link k-pager-nav k-state-disabled k-pager-first" 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-pager-nav 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><span class="k-pager-input k-label">Page<input class="k-textbox" type="text" value="1" />of 1</span><a class="k-link k-pager-nav 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-pager-nav k-state-disabled k-pager-last" 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-sizes k-label"><select><option>5</option><option>10</option><option>20</option></select>items per page</span><a class="k-pager-refresh k-link" href="/Test/Test" title="Refresh"><span class="k-icon k-i-refresh">Refresh</span></a><span class="k-pager-info k-label">No items to display</span></div></div><script>
jQuery(function(){jQuery("#grdTerms").kendoGrid({"columns":[{"title":"My Name","field":"Name","encoded":true},{"title":"My Value","field":"Value","encoded":true}],"pageable":{"input":true,"numeric":false,"refresh":true,"pageSizes":[5,10,20],"buttonCount":10},"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"","data":[{"Name":"Test 1","Value":"1","Tag":""},{"Name":"Test 2","Value":"2","Tag":""},{"Name":"Test 3","Value":"3","Tag":""}]},"prefix":""},"pageSize":10,"page":1,"total":0,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"Value":{"type":"object"},"Tag":{"type":"string"},"Name":{"type":"string"},"Dirty":{"type":"boolean"},"SupressEvents":{"type":"boolean"}}}},"batch":true}});});
</script>
As can be seen, the dataSource has data assigned - "data":[{"Name":"Test 1","Value":"1","Tag":""}, .... yet the grid renders empty.
What am I missing?