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: true30. }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
Rank 1
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.}
Hello Matt,
Indeed by running the original code, you could see the error in the developer tools console, that the versions dataSource is not yet created. Another issue with the initial implementation is that the filter will not be applied, because it is outside the dataSource instance. The implementation from the second post is correct, here is the updated example that demonstrates this.
Regards,Dimiter Madjarov
Telerik
Rank 1
Hello Matt,
Thanks for the update. I am glad the issue is resolved.
Regards,Dimiter Madjarov
Telerik