1. Home
  2. Forum
  3. jQuery
  4. How to populate ChildGrid data ?

How to populate ChildGrid data ?

I went through the documentation but I was unable to make a Grid with child elements.

My data consists as such:

Parent: Category Name,
Child 1 (parent:Category Name): QuestionName,
Child 2 (parent:QuestionName): Question Option

I've attached the same in screenshots named "Data". This is coming from AngularJS controller.

The data can have n categories, with no questions or N number of questions(and their options). How can I push the data in the child Grid ? The Questions should be attached to only those categories which they belong to and the options should be attached to their respective questions only. The data should not mix. I tried something as below but it didn't worked. 

$("#AgencyScreeningQuestions").ejGrid({           
            dataSource: screeningquestions,   //Categorydata             
            columns: [
                { field: "categoryName" }            
            ],
            childGrid: {
                dataSource: screeningquestions.screeningQuestion,
                queryString: "questionDesc",
                allowPaging: false,
                columns: [
                    { field: "questionDesc" } // from here what to write ?                    
                ],
            },
        });


Also what is queryString? there was nothing mentioned about the same ? Please help.








I must say the documentation regarding childgrid data is very poor.  

Attachment: Data_1eab2d55.rar

3 Replies
VN Vignesh Natarajan Syncfusion Team July 10, 2018 12:23 PM UTC

Hi Shalini, 

Thanks for contacting Syncfusion support. 

According to your query you need to render a hierarchical grid with parent child relation, which displays the child record for particular row on clicking. queryString property is used to define the relation between parent and child grid. The QueryString property is used to denote the primaryKey field of the parent grid which is to be mapped with the foreignKey field of the child grid. 

For your given data Structure, we can achieve your requirement using the detailsTemplate feature of ejGrid control. In the details template feature we can render any type of JS render template using the detailsTemplate property of ejGrid control and we can convert it to a JS control using the detailsDataBound event of ejGrid.       

For each row in Parent Grid, template column with expand icon is created using detailTemplate and on clicking the expand icon detailsDataBound event will be triggered there we can render the child/ detail Grid with dataSource of your own.    

refer the below code snippet 

<script id="tabGridContents" type="text/x-jsrender"> 
 
        <div id="gridTab{{:EmployeeID}}"> 
            <div id="detailGrid"> 
            </div> 
        </div> 
 
    </script> 
    <script type="text/javascript"> 
var Data = [ 
         { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 1, Employee:[{ EmployeeID: 1,Address:'507 - 20th Ave. E.Apt. 2A',Freight: 33.38}],ShipName:'Alfreds Futterkiste',ShipCountry:'Brazil'}, 
                   { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 2, Employee:[{ EmployeeID: 2,Address:'722 Moss Bay Blvd.',Freight: 11.61}],ShipName:'Ana Trujillo Emparedados y helados',ShipCountry:'France'}, 
                   .             .                .                    .                   .                  .  
                 ]; 
        $(function () { 
            $("#Grid").ejGrid({ 
                // the datasource "window.employeeView" is referred from jsondata.min.js 
                dataSource: Data, 
                detailsTemplate: "#tabGridContents", 
                detailsDataBound: "detailGridData", 
                columns: [ 
.            .                  .                .             .             .         .  
            }); 
        }); 
function detailGridData(e) { 
           e.detailsElement.find("#detailGrid").ejGrid({ 
               dataSource: e.data.Employee, 
                allowSelection: false, 
                columns: [                   
                         { field: "Address", headerText: 'Customer ID', width: 80, textAlign: ej.TextAlign.Left },                         
                                                                                       { field: "Freight", headerText: 'Freight', width: 90, textAlign: ej.TextAlign.Right } 
 
                ] 
            });           
        }    </script> 


For your convenience we have prepared a JS playground sample using detail Template 


Refer our help documentation for your reference  


Regards, 
Vignesh Natarajan  



SH Shalini July 11, 2018 06:18 AM UTC

Details template becomes a lot complicated when going with 2 or more than 2 levels of data set. Hence I changed my data itself and went along with Hierarchical grid binding. It works but I wanted to know how can I make an instance of the child grid inside a parent grid ? In my case I want paging to come at top hence I am doing that as below:



$("#AgencyScreeningQuestions").ejGrid({                           
                           
                            allowPaging: true,
                            pageSettings: {
                                pageSize: 20
                            },
                            create: "FlatGridComplete",
                            dataSource: screeningquestions,
                            columns: [
                                { field: "categoryName" }
                            ],
                            childGrid: {
                                create: "FlatGridComplete",
                                allowPaging: true,
                                pageSettings: {
                                    pageSize: 20
                                },
                                dataSource: child1,
                                queryString: "screeningQuestionCategoryId",
                                columns: [
                                    { field: "questionDesc" },
                                    { template: "#EditTemplate", width: 40 },
                                    { template: "#ModificationTemplate", width: 40 }
                                ],
                                childGrid: {
                                    dataSource: child2,
                                    queryString: "agencyScreeningQuestionId",
                                    columns: [
                                        //{ field: "optionName" },
                                        { template: "#ChildColumnNameTemplate" }
                                    ],
                                },
                            },
                            detailsExpand: function (args) {   
                                
                            },
                        });    





 function FlatGridComplete(args) {
        var gridObj = $('#AgencyScreeningQuestions').data("ejGrid");
        var pager = gridObj.getPager().detach();
        gridObj.element.prepend(pager);
    }




So this brings the paging at top of the grid and not below. I want to do the same with both the child grid inside the parent grid. If I give the pagin inside child grid it comes below and not above. Hence i want to create an instance of child so that i can prepend just like i am doing for parent grid.Please help.

VN Vignesh Natarajan Syncfusion Team July 12, 2018 12:39 PM UTC

Hi Shalini, 

According to your query you need to render the ejPager at top of Grid for all the Grids (parent and child). We suggest you to achieve your requirement in the dataBound event of ejGrid.  

Refer the below code snippet 

$("#Grid").ejGrid({ 
                dataSource: data, 
                allowSorting: true, 
                allowPaging: true, 
                dataBound:  function(args) {             
                              var pager = this.getPager().detach(); 
                              this.element.prepend(pager); 
                                                           }, 
                columns: [ 
.                      .                  .                     .                   .  
                ], 
                childGrid: { 
                    dataSource: dataManger, 
                    queryString: "EmployeeID", 
                    allowPaging: true, 
                    dataBound: function(args) {             
                               var pager = this.getPager().detach(); 
                              this.element.prepend(pager); 
                                                                         }, 
                    columns: [ 
.                  .                  .                .               .  
                    ], 
                    childGrid: { 
                        dataSource: dataManger2, 
                        queryString: "CustomerID", 
                        allowPaging: true, 
                        dataBound:  function(args) {             
                              var pager = this.getPager().detach(); 
                              this.element.prepend(pager); 
                                                                        }, 
                        columns: [ 
.                 .                  .                   .                 .  
                        ], 
                    }, 
                }, 
               
            });           
        });        

Refer the below screenshot for the output 

 


For your convenience we have prepared a JS playground sample. 



Refer our help documentation for your reference 


Regards, 
Vignesh Natarajan  


Loader.
Up arrow icon