I'm sure the issue is somewhat simple, although I've been unable to locate an example that would indicate what I'm doing wrong.
01.
<!DOCTYPE html>
02.
<
html
>
03.
<
head
>
05.
<
style
>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</
style
>
06.
<
title
></
title
>
07.
<
link
rel
=
"stylesheet"
href
=
"//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css"
/>
08.
<
link
rel
=
"stylesheet"
href
=
"//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css"
/>
09.
10.
<
script
src
=
"//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"
></
script
>
11.
<
script
src
=
"//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"
></
script
>
12.
</
head
>
13.
<
body
>
14.
15.
<
div
id
=
"example"
>
16.
<
div
id
=
"grid"
></
div
>
17.
18.
<
script
>
19.
$(document).ready(function() {
20.
var attachments = new kendo.data.DataSource({
21.
data: [
22.
{ attachmentId: 1321, Name: "Product Roadmap.pptx", Versions: "3", Title:""},
23.
{ attachmentId: 1322, Name: "Release Timeline.xls", Versions: "1", Title:""},
24.
{ attachmentId: 1324, Name: "Requirements Analysis.docx", Versions: "2", Title:""}
25.
],
26.
schema: {
27.
model: {
28.
id: "id",
29.
expanded: true
30.
}
31.
}
32.
});
33.
34.
var versions = new kendo.data.DataSource({
35.
data: [
36.
{ versionId: 1325, attachmentId: 1321, Status: "1321", VersionNumber: "1", Comment: "", Size:"1.23 MB", CreatedBy:"Landry, Kristi", CreationDate:""},
37.
{ versionId: 1326, attachmentId: 1321, Status: "1321", VersionNumber: "2", Comment: "", Size:"1.87 MB", CreatedBy:"Landry, Kristi", CreationDate:""},
38.
{ versionId: 1327, attachmentId: 1321, Status: "1321", VersionNumber: "3", Comment: "", Size:"1.91 MB", CreatedBy:"Smith, Michelle", CreationDate:""},
39.
{ versionId: 1328, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size:"7.41 KB", CreatedBy:"Peters, Stacy", CreationDate:""},
40.
{ versionId: 1329, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size:"4.43 MB", CreatedBy:"Franklin, Marshall", CreationDate:""},
41.
{ versionId: 1330, attachmentId: 1322, Status: "1322", VersionNumber: "2", Comment: "", Size:"4.71 MB", CreatedBy:"Peters, Stacy", CreationDate:""}
42.
]
43.
});
44.
45.
var element = $("#grid").kendoGrid({
46.
dataBound: function() {
47.
this.expandRow(this.tbody.find("tr.k-master-row").first());
48.
},
49.
dataSource: attachments,
50.
height: 600,
51.
sortable: true,
52.
pageable: true,
53.
detailInit: detailInit,
54.
columns: [
55.
{field: "attachmentId", title: "Attachment Id"},
56.
{field: "Name", title: "Name"},
57.
{field: "Versions", title: "Versions"},
58.
{field: "Title"}
59.
]
60.
});
61.
});
62.
63.
function detailInit(e) {
64.
$("<
div
/>").appendTo(e.detailCell).kendoGrid({
65.
dataSource: {
66.
versions,
67.
filter: { field: "attachmentId", operator: "eq", value: e.data.attachmentId }
68.
},
69.
columns: [
70.
{ field: "versionId", title: "Version Id"},
71.
{ field: "Status"},
72.
{ field: "VersionNumber", title:"Version Number"},
73.
{ field: "Comment"},
74.
{ field: "Size"},
75.
{ field: "CreatedBy", title: "Created By"},
76.
{ field: "CreationDate", title: "Creation Date"}
77.
]
78.
});
79.
}
80.
</
script
>
81.
</
div
>
82.
83.
</
body
>
84.
</
html
>
I've tried playing around with the filter on line 67 (including adding it to the versions datasource), but nothing seems to do the trick.