We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding Child Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

143402 Mar 19,2019 09:29 AM UTC Aug 11,2020 08:05 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
Jack Taylor
Asked On March 19, 2019 09:29 AM UTC

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 [Syncfusion]
Replied On March 20, 2019 05:30 AM UTC

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. 
 
 
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. 




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

Regards, 
Thavasianand S. 


Jack Taylor
Replied On March 21, 2019 03:15 PM UTC

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 [Syncfusion]
Replied On March 22, 2019 07:04 AM UTC

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
Replied On August 8, 2020 08:51 PM UTC

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 [Syncfusion]
Replied On August 11, 2020 08:05 AM UTC

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> 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon