Loading child data in the grid table

[Dinesh D]

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: 150, visible: false },

                  { field: 'Labtype', headerText: 'Labtype', width: 150, visible: 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]

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, 

 

Documentation: https://ej2.syncfusion.com/angular/demos/#/material/grid/hierarchy 

Online sample: https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/ 

 

Regards, 

Thavasianand S.