Binding Child Grid

[Jack Taylor]

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.

[Thavasianand Sankaranarayanan]

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] 

<div class="container"> 

    <ejs-grid id="Grid" allowPaging=true load='load'> 

        <e-grid-pagesettings pageSize="4"> </e-grid-pagesettings> 

        <e-data-manager url='https://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Employees/' adaptor="ODataAdaptor" crossdomain="true"></e-data-manager> 

        <e-grid-columns> 

            <e-grid-column field="EmployeeID" headerText="Employee ID" width="110"></e-grid-column> 

            <e-grid-column field="FirstName" headerText="First Name" width="110"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    function load(args) { 

 

        this.childGrid = { 

            dataSource: new ej.data.DataManager({ 

                url: "https://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Orders/", 

                adaptor: new ej.data.ODataAdaptor(), 

                crossDomain: true 

            }), 

            queryString: 'EmployeeID',       //queryString value will be same in both parent and child grid dataSource 

            allowPaging: true, 

            pageSettings: { pageSize: 5 }, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

                { field: 'ShipCity', headerText: 'Ship City', width: 150 }, 

                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 

            ], 

        }; 

    } 

 

</script> 

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. 

[Jack Taylor]

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: 

                    [ 

                        { field: 'FirstName', headerText: 'Rule', allowEditing: 'false', editType: 'dropdownedit', width: '100px' }, 

                        { field: 'EmployeeID', headerText: '', width: '27px', allowEditing: 'false', allowFiltering: 'false' }, 

                        { field: 'LasttName', headerText: 'Log Comments', allowEditing: 'false', width: '300px' },

                    ]   

                    }

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,

Jack

[Pavithra Subramaniyam]

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. 

[Suchita Salunkhe]

Hi,

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.

[Balaji Sekar]

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. 

[Index.cshtml] 

    <ejs-grid id="Grid" gridLines="Both" load="gridLoad" allowPaging="true"> 

            <e-data-manager url="/Home/CoursesDatasource" adaptor="UrlAdaptor" ></e-data-manager>                         

            <e-grid-columns> 

                <e-grid-column field="CourseId" isPrimaryKey="true" headerText="Cource ID"  textAlign="Right" width="120"> </e-grid-column> 

                <e-grid-column field="CourseName" headerText="Course Name"  width="150"></e-grid-column> 

                <e-grid-column field="Duration" headerText="Duration" width="170"></e-grid-column> 

            </e-grid-columns> 

        </ejs-grid> 

 

<script> 

       function gridLoad(args) { 

        this.childGrid = { 

 

            dataSource: new ej.data.DataManager({ 

                url: "Home/ClassesDatasource", 

                adaptor: new ej.data.UrlAdaptor(), 

                crossDomain: true 

            }), 

            allowPaging: true, 

            queryString: 'CourseId', 

            columns: [ 

                { field: 'ClassId', headerText: 'Class ID', width: 120 }, 

                { field: 'CourseName', headerText: 'Course Name', width: 120 }, 

                { field: 'Session', headerText: 'Session', width: 120 } 

            ], 

            childGrid: { 

                dataSource: new ej.data.DataManager({ 

                    url: "Home/SubjectsDatasource", 

                    adaptor: new ej.data.UrlAdaptor(), 

                    crossDomain: true 

                }), 

                queryString: 'ClassId', 

                columns: [ 

                    { field: 'SubId', headerText: 'Subject ID', width: 120 }, 

                    { field: 'SubjectName', headerText: 'Subject Name', width: 120 }, 

                ], 

                childGrid: { 

                    dataSource: new ej.data.DataManager({ 

                        url: "Home/TopicsDatasource", 

                        adaptor: new ej.data.UrlAdaptor(), 

                        crossDomain: true 

                    }), 

                    queryString: 'SubId', 

                    columns: [ 

                        { field: 'SubId', headerText: 'Subject ID', width: 120 }, 

                        { field: 'TopicName', headerText: 'Topic Name', width: 120 }, 

                        { field: 'TopicId', headerText: 'Topic ID', width: 120 }, 

                    ], 

                    childGrid: { 

                        dataSource: new ej.data.DataManager({ 

                            url: "Home/SubTopicsDatasource", 

                            adaptor: new ej.data.UrlAdaptor(), 

                            crossDomain: true 

                        }), 

                        queryString: 'TopicId', 

                        columns: [ 

                            { field: 'TopicId', headerText: 'Topic ID', width: 120 }, 

                            { field: 'SubtopicName', headerText: 'SubTopic Name', width: 120 }, 

                        ], 

                    } 

                } 

            } 

        }; 

    } 

</script> 

 

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