Category / Section
How to pass parentkey from parent to childgrid
1 min read
Solution:
We can pass the parent grid’s primary key field value to child grid using “parentKeyFieldValue” property of the parentDetails.
The following code snippet explain the above behavior:
MVC:
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.Columns(col =>
{
col.Field("EmployeeID").Width(75).Add();
col.Field("FirstName").Width(100).Add();
col.Field("Title").Width(120).Add();
col.Field("City").Width(100).Add();
col.Field("Country").Width(100).Add();
})
.ChildGrid(child =>
{
child.QueryString("EmployeeID")
.AllowPaging()
.ClientSideEvents(eve => eve.Load("load"));
})
)
JS:
$("#Grid").ejGrid({
dataSource: data,
columns: [
{ field: "EmployeeID",width: 75 },
{ field: "FirstName", width: 100 },
{ field: "Title", width: 120 },
{ field: "City", width: 100 },
{ field: "Country", width: 100 }
],
childGrid: {
queryString: "EmployeeID",
allowPaging: true,
load: "load"
}
});
JavaScript:
<script type="text/javascript">
function load(args) {
var data = this.model.parentDetails.parentKeyFieldValue;
this.model.dataSource = ej.DataManager({ url: "/Grid/DataSource?employeeID=" + data + "", updateUrl: "/Grid/Update", insertUrl: "/Grid/Insert", removeUrl: "/Grid/Delete", adaptor: "UrlAdaptor" });
}
</script>
Here we have assigned the dataSource for the childGrid in load event of the child grid with passing the parentKeyFieldValue as an additional parameter (employeeID is an additional parameter).
Result:
Figure: Passing parent grid’s primary key value to the child grid
