Hi Lory,
We can achieve your requirement using the
detailsExpand event of the parent grid.
In the
detailsExpand event of the grid, we can get the inner array object corresponding to the parent record and assign that data to the childGrid in the
create event of the childgrid.
Please refer to the following code example.
|
<script type="text/javascript">
var data = [
{ OrderID: 1, EmployeeName: 'James', Details: [{ "CustomerName": "Sam", CustomerID: 1 }, { "CustomerName": "Nancy", CustomerID: 2 }] },
. . .
]
$(function () {
$("#Grid").ejGrid({
dataSource: data,
. . . .
detailsExpand: expandDetails,
childGrid: {
dataSource: [],
queryString: "EmployeeID",
allowPaging: true,
create: 'childCreate',
. . . .
},
});
});
//detail expand event of the parent grid
function expandDetails(args) {
window.childData = args.masterData.Details; //get the inner array object and store in a variable
}
//create event of the childgrid
function childCreate(args) {
this.dataSource(window.childData); //assigning the child grid dataSource using the dataSource method of the grid
}
</script>
|
For your convenience, we have created a sample with the above solution, which can be downloaded from the below location.
Sample Link:
http://jsplayground.syncfusion.com/05l5riis
Regards,
Ragavee U S.
