We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Loading child data in the grid table

Hi ,

In this code my data looks like,

{
    "_id" : ObjectId("5d8a0e48318aad075cffa099"),
    "Category" : "Network11",
    "Ipaddress" : "10.202.0.0/16",
    "Subnet" : "10.202.0.0/17",
    "Comments" : "Lorem ipsum dolor sit amet",
    "Location" : "India",
    "Lab" : "Bengaluru",
    "Labtype" : "Lab1",
    "SubCategory" : [ 
        {
            "Category" : "NetworkChild",
            "Ipaddress" : "10.202.0.0/16",
            "Subnet" : "10.202.0.0/17",
            "Comments" : "Lorem ipsum dolor sit amet",
            "Location" : "India",
            "Lab" : "Bengaluru",
            "Labtype" : "Lab1"
        }, 
        {
            "Category" : "NetworkChild11",
            "Ipaddress" : "10.202.0.0/165",
            "Subnet" : "10.202.0.0/175",
            "Comments" : "Lorem ipsum dolor sit ametjj",
            "Location" : "India",
            "Lab" : "Bengaluru",
            "Labtype" : "Lab1"
        }
    ]
}



And my code to display the child data is


 this.data.forEach(i => {
              if(i.SubCategory){
                i.SubCategory.forEach(k => {
                  subcategory.push(
                    {
                      "Category": k.Category,
                      "Ipaddress": k.Ipaddress,
                      "Subnet": k.Subnet,
                      "Comments": k.Comments
                    }
                  )
                })
              }
            })
            console.log(subcategory)
           this.childGrid = {
              dataSource: subcategory,
              queryString: 'Category',
              allowPaging: false,
              
              //pageSettings: {pageSize: 6, pageCount: 5},
              columns: [
                  { field: 'Category'headerText: 'Category',},
                  { field: 'Ipaddress'headerText: 'Ipaddress',},
                  { field: 'Subnet'headerText: 'Subnet', },
                  { field: 'Comments'headerText: 'Comments',},
                  { field: 'Location'headerText: 'Location'visible: false },
                  { field: 'Lab'headerText: 'Lab'width: 150visible: false },
                  { field: 'Labtype'headerText: 'Labtype'width: 150visible: false }
              ],
              //childGrid: this.secondChildGrid
          };
         
  I am not able to print the child data. What is the way t display my child data automatically


1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team September 26, 2019 12:48 AM

Hi Dinesh, 
 
Greetings from Syncfusion support. 
 
Based on your query we are able to understand that you have problem with rendering hierarchical grid(grid with child data). The hierarchical grid can be rendered by defining the childGrid and the queryString for the childGrid. Here the childGrid describes the grid options and the queryString describes the relation between parent and child grids. Only based on this queryString value, the childGrid is rendered. 
 
Now in the code block you provided, the queryString value is given as ‘Category’ which would mean that the relation between the parent and child grid is based on the ‘Category’ column value. But in your datasource there is no common value in the ‘Category’ column for the parent and child grid. This is the reason the child grid is not getting displayed. For e.g. – The Category value in parent grid is, ‘Network11’ and if the child data also has the value ‘Network11’ it will be displayed as the child grid since this is the common relation between both the grids. So please modify your datasource based on this as per your requirement for rendering the hierarchical grid. 
 
More information on hierarchical binding can be found in the following documentation and online sample links, 
 
 
Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon