This is a migrated thread and some comments may be shown as answers.

Child records don't load in hierarchical grid

4 Answers 375 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Matt asked on 16 Mar 2016, 12:51 PM

hierarchical-grid-issue.png

I'm working on a simple prototype for using hierarchical grids and have used this as my baseline in the dojo and modified the dataSources to use locally defined data (instead of getting data back from the service). I'm able to get the parent rows to load fine, however, none of the child records are loading (detailInit appears to fire as the first row's dropdown icon points down and a space appears between the first and second row as shown in the attached screenshot).

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.

Here's the code I'm attempting to run:

01.<!DOCTYPE html>

02.<html>

03.<head>

04. <base href="http://demos.telerik.com/kendo-ui/grid/hierarchy">

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.

What am I missing?

4 Answers, 1 is accepted

answered on 16 Mar 2016, 04:43 PM

Interesting...on a whim, I moved the data definition from assigning it in line 34 (above -- var versions = new...) so that it's defined within the detailInit function as shown below and that works.

What's the difference between what I did in my original post vs. what I've done below?

Why would assigning the attachments datasource work for the parent grid, but not for the child grid?

Again, what am I missing?

01.function detailInit(e) {

02. $("<div/>").appendTo(e.detailCell).kendoGrid({

03. dataSource: {

04. data: [

05.

{ versionId: 1325, attachmentId: 1321, Status: "1321", VersionNumber: "1", Comment: "", Size:"1.23 MB", CreatedBy:"Landry, Kristi", CreationDate:""},

06.

{ versionId: 1326, attachmentId: 1321, Status: "1321", VersionNumber: "2", Comment: "", Size:"1.87 MB", CreatedBy:"Landry, Kristi", CreationDate:""},

07.

{ versionId: 1327, attachmentId: 1321, Status: "1321", VersionNumber: "3", Comment: "", Size:"1.91 MB", CreatedBy:"Smith, Michelle", CreationDate:""},

08.

{ versionId: 1328, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size:"7.41 KB", CreatedBy:"Peters, Stacy", CreationDate:""},

09.

{ versionId: 1329, attachmentId: 1324, Status: "1324", VersionNumber: "1", Comment: "", Size:"4.43 MB", CreatedBy:"Franklin, Marshall", CreationDate:""},

10.

{ versionId: 1330, attachmentId: 1322, Status: "1322", VersionNumber: "2", Comment: "", Size:"4.71 MB", CreatedBy:"Peters, Stacy", CreationDate:""}

11. ],

12. filter: { field: "attachmentId", operator: "eq", value: e.data.attachmentId }

13. },

14. columns: [

15. { field: "versionId", title: "Version Id"},

16. { field: "Status"},

17. { field: "VersionNumber", title:"Version Number"},

18. { field: "Comment"},

19. { field: "Size"},

20. { field: "CreatedBy", title: "Created By"},

21. { field: "CreationDate", title: "Creation Date"}

22. ]

23. });

24.}

Accepted