Angular ChildGrid not showing with hierarchical data

[Rob ONeill]

Hi,

I am trying to show a childgrid with angularjs using hierarchical data (ie a list within a list). I have used an example found on the forum to populate the child on the detailsExpand event.

           

            var childData = [];

            function expandDetails(args) {
                childData = args.masterData.components;
           };

            function childCreate(args) {
               this.dataSource(childData);
                this._trigger("refresh");
            }

 I can see the child data is set, and added to the dataSource but the ChildGrid always states .... No records to display

I have even tried to add a trigger refresh but to no avail.

http://jsplayground.syncfusion.com/c0t1jssa

I will also in the future want to be able to update the values in each dataSource, both main and child grids.

Cheers .... Rob.

[Rob ONeill]

I think I have found a bug with the Child Grid. When the queryString is set to the realistic value (either parentId or id) it doesn't render the Grid. When it is change to some gibberish like queryString: "asdasdasd" the ChildGrid renders fine. Something very strange there !!

On another area if I update the main dataSource and refresh the Grid, can you tell how to keep the Child Grids expanded ?

Cheers ... Rob.

[Saravanan Arunachalam]

Hi Rob,

Thanks for contacting Syncfusion Support.

Query 1: When the queryString is set to the realistic value (either parentId or id) it doesn't render the Grid?

The Hierarchical binding can be used to create the Grid with parent and child relation. The queryString property of childGrid is used to filter the child Grid datasource based on the queryString (field in parent and child data) and that field value in the expanded row then the filtered datasource bound to the child Grid.

So, the queryString property of childGrid is used to define the relationship between the parent and child Grid controls. Please refer to the online sample link and documentation links.

http://js.syncfusion.com/demos/web/#!/azure/grid/relationalbinding/hierarchygrid

http://help.syncfusion.com/js/grid/hierarchy-grid

http://help.syncfusion.com/js/api/ejgrid#members:childgrid

Note: The queryString property should contains any one of the field name which is present in both parent and child Grid datasorce.

Ex: If you are using “parentId” as a queryString then the parentId field should be in both parent and child grid datasource

In your provided sample, you have used “components” field value of parent Grid’s row as a datasource of child Grid it doesn’t contain parentId field and hence the child grid data was not showed and in such case we can use “DetailTemplate” feature of Grid control to achieve your requirement. Please refer to the below online sample link.

http://js.syncfusion.com/demos/web/#!/azure/grid/rows/detailtemplate

And we have created a sample in JsPlayGround using detailTemplate feature of Grid control and refer to the below link.

http://jsplayground.syncfusion.com/lwcjva0k

Query 2: Can you tell how to keep the Child Grids expanded?

We can expanded the rows in parent Grid after refresh the Grid control in following ways.

1.       expandAll method:

The expandAll method of Grid used to expand all the rows in parent Grid and refer to the below online documentation link.

http://help.syncfusion.com/js/api/ejgrid#methods:expandall 

2.       expandCollapse method:

We can expand or collapse the particular row based on that row state and refer to the below online documentation link.

http://help.syncfusion.com/js/api/ejgrid#methods:expandcollapse

Regards,

Saravanan A.

[Rob ONeill]

Hi,

Query 1

You have stated ...

Note: The queryString property should contains any one of the field name which is present in both parent and child Grid datasorce.

Ex: If you are using “parentId” as a queryString then the parentId field should be in both parent and child grid datasource

In your provided sample, you have used “components” field value of parent Grid’s row as a datasource of child Grid it doesn’t contain parentId field and hence the child grid data was not showed

Beg to differ but the main Service has an "id" and "parentId" and the each component has an "id" and "parentId" ... the component "parentId" matches the service "id" (eg hierarchical data), but being able to put in rubbish into the queryString field as the js playground sample shows ..... queryString: "this is rubbish", .... and that works shows there is a bug in your code !!

http://jsplayground.syncfusion.com/incjxmq2

Query 2

Yes, the expandall works but i cannot seem to get the expandcollapse method to work. From the example

$("#Grid").ejGrid("expandCollapse", $("tr td.recordplusexpand > div").first());

Looking through developer tools (the dom explorer) and debugging I can find no td like td.recordplusexpand !??

Please can you explain how I expand just one row at a time, so that if I only had the second row expanded before I have to refresh the grid content I can just expand the second row only.

Regards

Rob.

[Saravanan Arunachalam]

Hi Rob,

Query 1: The component “parentId” matches with the service “id”.

If you need to make the parent and child relation when using the two different field names (id and parenId), we suggest you to use “foreignKeyField” property of child Grid control and refer to the below code example and JsPlayground sample.

$("#Grid").ejGrid({

                        dataSource: result,

                        . . .

                        childGrid: {

                            dataSource: [],

                           //Field name in parent grid             

                            queryString: "id",

                            //Field name in child grid

                           foreignKeyField: "parentId",

                             . . .   

                            

                        }

                    });     

http://jsplayground.syncfusion.com/xopozkkl

And we considered this query “Child grid renders with whole datasource even the query string does not match with any of the columns” as a bug and a support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Query 2: Can you explain how I expand just one row at a time?

The expandCollapse method used to expand or collapse the row based on that row state (i.e either collapsed or expanded). Please refer to the below Jsplayground sample.

http://jsplayground.syncfusion.com/nxqnu11z

Query 3: I can’t find td like td.recordplusexpand?

The e-recordplusexpand class is added to expand button when enable the Grouping.  So, please use the e-detailrowexpand or e-detailrowcollapse classes to collapse or expand the child grid.

Regards,

Saravanana A.