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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Loading child data in the grid table

Thread ID:

Created:

Updated:

Platform:

Replies:

147831 Sep 25,2019 10:23 AM UTC Sep 26,2019 08:48 AM UTC Angular - EJ 2 1
loading
Tags: Grid
Dinesh D
Asked On September 25, 2019 10:23 AM UTC

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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On September 26, 2019 08:48 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon