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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to bind the Child Grid datasource through ajax call?

Platform: jQuery |
Control: ejGrid

You can bind the childGrid data source dynamically by using the following two ways.

  1. By using the ajax call in Load event of the child Grid.
  2. By using the detailsExpand client side event of the Grid.

By using ajax call in the Load event of the child grid:

You can bind the child Grid datasource through the ajax call by using load event of the child grid.

Grid Rendering Code:





loadEvent code:



By using the detailsExpand client side event of the Grid:

Child Grid is rendered once the parent Grid gets expanded. You can dynamically change/bind the data source to the child Grid after expanding the parent Grid by using the detailsExpand client side event of the Grid.

Refer to the following code example.

detailsExp Script code:



Here, the data source is bound to the child Grid through detailsExpand client side event of the Grid.


Figure 1:Binding dataSource dynamically to child grid

You must log in to leave a comment
May 19, 2016
For those confused with the statement .. childGrid: { dataSource:window.ordersView, childGrid: { dataSource: dataManger, .. It should be noted that there is only one child grid. The loadEvent is a method of the child grid but the detailsExpand event is binded to the parent grid $("#parentGrid").ejGrid({ dataSource: dataManager, columns: [ /*parent columns*/ ], childGrid: { dataSource: window.ordersView, queryString: "EmployeeID", columns: [ /*child fields*/ ], load: function (args) { var proxy = this; //Here we have passed the new query because while passing data source externally we need to pass the new query this.model.query = new ej.Query(); $.ajax({ url: "http://mvc.syncfusion.com /Services/Northwnd.svc/Orders/ ?$skip=12&$top=12", dataType: "json", success: function (e) { //Here we have passed the retrieved json data to the dataSource method of the child grid. proxy is duplicate of child grid proxy.dataSource(e); } }); } }, /*end of child grid info, detailsExpand is a method of Parent grid*/ detailsExpand: function (args) { this.option("model.childGrid.dataSource", window.ordersView); }, ... Reply
Colin Goss
Apr 13, 2017
There is no controller or back end method represented in this example. 


Please sign in to access our KB

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

Up arrow icon

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