I have an MVVM application using Kendo Grid, and I want to display hierarchy (nested grid). I am trying to replicate this example but I am not able to display the hierarchy data. How can I get the hierarchy records to display?
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
}]
}
]
});
I don't see an error messages. How can I display the hierarchy records? See image file attached.