Child records don't load in hierarchical grid

5 posts, 1 answers
  1. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2016 Link to this post

    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>
    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?

  2. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2016 in reply to Matt Link to this post

    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.}
        

  3. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 18 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Matt
    Matt avatar
    87 posts
    Member since:
    Mar 2009

    Posted 18 Mar 2016 in reply to Dimiter Madjarov Link to this post

    Thanks for the explanation and clarification.  I had assumed that since I created versions on document ready it would be available during the detailInit as well.  Your example highlighted what I was missing...thanks!
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 21 Mar 2016 Link to this post

    Hello Matt,

    Thanks for the update. I am glad the issue is resolved.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top