I have an MVVM application using Kendo Grid and I want to display a hierarchy (nested grid). I am trying to replicate this example , but I cannot display hierarchy data. How can I display hierarchy entries?
Cshtml code:
<div id="custOrderGrid" data-role="grid" data-resizable="false" data-navigatable="true" data-editable="true" data-pageable="false" data-scrollable="true" onscroll="true" data-detail-template="child-template" data-columns="[ { 'field': 'OrderID', 'title': '<b>Order #', 'width': 65 }, { 'field': 'LineNo', 'title': '<b>Line Number', 'width': 65 }, { 'field': 'ItemNo', 'title': '<b>Item Number', 'width': 65 }, { 'field': 'Desc', 'title': '<b>Description', 'width': 150 } ]" data-bind="source: orderSearchResults" style="height: 55%"> </div> <script id="child-template" type="text/x-kendo-template"> <div data-role="grid" data-bind="source: obj2" data-columns="[ { field: 'name' }, { field: 'oid' } ]"></div> </script>
typescript code:
orderSearchResults = new kendo.data.DataSource({ schema: { model: { id: "OrderID", fields: { LineNo: { type: "string" }, ItemNo: { type: "string" }, Description: { type: "string" } } } }, data: [ { OrderID: "L44ZX4", LineNo: "15", ItemNo: "*X1WCJH", Description: "CDF9X2XSB", obj2: [{ name: 'a1', oid: 1 }, { name: 'b1', oid: 2 }, { name: 'c1', oid: 3 }] } ] });
The yellow highlighted section is where the hierarchy data should be displayed.
source share