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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind the Child Grid datasource through ajax call?

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:

JS

 

MVC

 

loadEvent code:

JS

 

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:

JS

 

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

Result:

Figure 1:Binding dataSource dynamically to child grid

Article ID: Published Date: Last Revised Date: Platform: Control:
4713 04/27/2015 01/20/2017 JavaScript ejGrid
Did you find this information helpful?
Comments
Lory 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. 

Reply
Add Comment
You must log in to leave a comment

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