Unable to display the Children of a Parent Hierarchical view.

[Ailiam Attobra]

Hello,

I am trying to display a Parent-and-Child type relashionship. I followed your examples and I was able to display the parent but unable to display the child.
SEEBELOW FOR THE CODE. Please notethat the data come from the ASP.MVC controller Action.Can you tell me what I am missing ?

IMPORTANT:

Both Actions (OSWData and OSWDetail) return a JSON Data

JS CODE

<script type="text/javascript">

$(function () {

var ElecInformation = ej.DataManager({ url: "OSWData", adaptor: new ej.UrlAdaptor() });
var ElecDetail = ej.DataManager({ url: "OSWDetail", adaptor: new ej.UrlAdaptor() });

var detailQuery = new ej.Query();
var detailPromise = ElecDetail.excuteQuery(detailQuery);

var query = new ej.Query();
var promise = ElecInformation.executeQuery(query)
.done(function (e) {

$("#grid").ejGrid({

dataSource: e.result,

allowSorting: true,

allowPaging: true,

columns: [

{ field: "WorkOrder", headerText: 'Work order', width: 75 },

{ field: "Tera", headerText: 'ZZ84 Tera', textAlign: ej.TextAlign.Left, width: 100 },

{ field: "Terc", headerText: 'ZZ84 Terc', textAlign: ej.TextAlign.Left, width: 120 },

{ field: "TotalHrs", headerText: 'Total hours', textAlign: ej.TextAlign.Left, width: 100 },

{ field: "HrsRemaining", headerText: 'Hours remainaing', textAlign: ej.TextAlign.Left, width: 100 }

],

childGrid: {

dataSource: ElecDetail,

queryString: "Order",

allowPaging: true,

columns: [

{ field: "Operation", headerText: 'Operation', width: 75 },

{ field: "Order", headerText: 'Ordre', width: 75 },

{ field: "Item", headerText: 'Article', width: 75 },

]

}

})

})

script>

Thank you in advance

A.A

[Vignesh Natarajan]

Hi Ailiam, 

  

Thanks for contacting Syncfusion support. We have analyzed your code snippet. The QueryString property field should present in both parent and child grids and querystring act as foreignKey relantionship. So, please ensure that field exist in both the grids. Please refer the below link for help documentation on hierarchical bindings. 

  

Link: https://help.syncfusion.com/js/grid/hierarchy-grid . 

  

 Please refer the below code snippet. 

  

            $("#Grid").ejGrid({ 

                dataSource: data, 

  

                allowSorting: true, 

                columns: [ 

                       { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 }, 

                       { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 }, 

                       { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 }, 

                       { field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100 }, 

                       { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 } 

                ], 

                childGrid: { 

                   dataSource: dataManger, 

                    queryString: "EmployeeID", 

                    allowPaging: true, 

                    columns: [ 

                      { field: "OrderID", headerText: 'Order ID', textAlign: ej.TextAlign.Right, width: 75 }, 

                      { field: "ShipCity", headerText: 'Ship City', textAlign: ej.TextAlign.Left, width: 100 }, 

                      { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Left, width: 120 }, 

                      { field: "ShipName", headerText: 'Ship Name', textAlign: ej.TextAlign.Left, width: 100 } 

                    ], 

  

Please refer our online example for your reference.  

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

  

If we misunderstood your query or If your issue is not resolved, please get back to us with 

1. both the table schema of both the grid and full code sample. 

2. share screenshot of script error(if any) . 

  

Regards, 

Vignesh Natarajan.