Binding Child Grid

Hi,

I've been trying to implement the use of a child grid, however I can't get any child entries to load...

Currently my parent grid is set out as follows:

<ejs-grid id="grd-1"
                                  height="210px"
                                  enableHover="true"
                                  allowSorting="true"
                                  allowGrouping="true"
                                  allowTextWrap="true"
                                  rowSelected="rowSelected"
                                  dataBound="dataBound"
                                  allowFiltering="true"
                                  allowPaging="false"
                                  actionComplete="storeComment"
                                  detailDataBound="detailDataBound"
                                  load='load'>

                              <e-grid-columns>

                               

                              </e-grid-columns>

</ejs-grid>

With my child grid looking like:

function load(args)
        {  
           
            this.childGrid =
            {
                id: 'grd-2',
                dataSource:
                queryString: 'result',
                height: '150px',
                enableHover: 'true',
                editSettings: { allowEditOnDblClick: false },
                columns:
                    [
                        { field: 'rule', headerText: 'Rule', allowEditing: 'false', editType: 'dropdownedit', width: '100px' },
                        { field: 'result', headerText: '', width: '27px', allowEditing: 'false', allowFiltering: 'false' },
                        { field: 'logComments', headerText: 'Log Comments', allowEditing: 'false', width: '300px' },

                    ]
            };
        }

I have tried implementing detailDataBound, with the following:

 

function detailDataBound(args) {
            var lookingFor = args.data.object_Id;
            alert('Detail data bound - ' + lookingFor + ' index: ' + args.data.Index);
            debugger;
            try {
                //this.childGrid.dataSource = objectStatus[args.data.Index].rules;
                //this.childGrid.refresh();
            }
            catch (e) {

            }
          
        }

This returns the correct lookupId and index, however I cant seem to find the correct way to set my dataSource to point to it.

Thanks in advance.

Hi Jack, 

Greetings from Syncfusion support. 

Based on your query we suspect that you want to do hierarchical binding to Grid. Also in your given cod example you have mentioned for detailDataBound event when we are using childGrid property to render child Grid in every then no need to mention those events in Grid.     

We have prepared a sample with hierarchical binding in EJ 2 Grid component and sample can be downloadable from the below location. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/230969/ze/WebApplication1_(13)229849116.zip 

 

In the below code example we have render the hierarchical binding Grid using the load event and childGrid property of Grid. 

 

[code example] 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#childgrid 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#querystring 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#load 

Please let us know if you need further assistance on this. 

Regards, 

Thavasianand S. 

Hi,

Thanks for the response, the problem was that my data was stored as JavaScript Objects, not externally.

Instead what was needed was to write a custom adaptor on an extension of the JsonAdaptor to pull out what I needed.

Here is the solution found, by looking here https://help.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor, my child grid looking like this:

 this.childGrid =
            {
                id: 'grd-1',
                queryString: 'Index',
                dataSource: new ej.data.DataManager({ adaptor: new RuleAdaptor() }),

                columns: 

                    ]   

                    }

And the custom adaptor:

class RuleAdaptor extends ej.data.JsonAdaptor {

            processResponse(data,ds,query,xhr) {

                let x = {
                    aggregates: {},
                    count: objectStatus[query.queries[0].e.value].rules.length,
                    result: objectStatus[query.queries[0].e.value].rules
                };

                return x;
            }
        }

Regards,

Hi Jack, 

 

We are glad to hear that you have found the solution and We thank you for taking the time to share the solution with us. 

 

Please get back to us if you need any further assistance on this. As always We are always happy to assist you. 

 

Regards, 

Pavithra S. 

I have to create hierarchical grid upto 5 levels.

e.g Parent  grid contain "Courses" -> It's child grid will have "Classes" related to selected Course -> Class will have child grid "Subjects" -> Subject will have child grid with "Topics" -> and finally Topics will have child grid "SubTopics".

All child grid will load on demand.

I could bind upto 2 levels using "load" event on parent grid. 

Please help me.

I will be grateful If you provide me solution with example/sample project.

Hi Jack, 

 

Greetings from the Syncfusion support. 

 

As per your query, we have created a sample with HierarchyGrid in 5 levels of childGrid. To achieve the mentioned requirement in HierarchyGrid in ASP .Net Core platform and we suggest you to use the mapping field (parent and child) in queryString to render the child grid table. Please refer the below code example and sample for more information. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/143402/ze/TestSample1258414143.zip  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar