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

Binding child grid from MVC Actions

Hello,

I have been having a hard time in getting to bind a child grid from an MVC Action that returns Json. Here is my code.


View:

Html.EJ().Grid<Gedeihen.nGageHealth.Dto.RecallReminderDto>("RecallGrid").Datasource(Model).Columns(c =>
        {
            c.Field("Id").HeaderText("Id").IsPrimaryKey(true).Visible(false).Add();
            ....
        }).ChildGrid("/MyController/MyAction?paramId={Id}")

Controller:

public JsonResult MyAction(int paramId)
{
     return Json(viewModel, JsonRequestBehavior.AllowGet);
}

Any help will be greatly appreciated.


Thanks,

Krishna




10 Replies

KR Krishna replied to Krishna August 22, 2015 01:51 AM UTC

Hello,

I have been having a hard time in getting to bind a child grid from an MVC Action that returns Json. Here is my code.


View:

Html.EJ().Grid<Gedeihen.nGageHealth.Dto.RecallReminderDto>("RecallGrid").Datasource(Model).Columns(c =>
        {
            c.Field("Id").HeaderText("Id").IsPrimaryKey(true).Visible(false).Add();
            ....
        }).ChildGrid("/MyController/MyAction?paramId={Id}")

Controller:

public JsonResult MyAction(int paramId)
{
     return Json(viewModel, JsonRequestBehavior.AllowGet);
}

Any help will be greatly appreciated.


Thanks,

Krishna




Correction to the code posted.

Html.EJ().Grid<Gedeihen.nGageHealth.Dto.RecallReminderDto>("RecallGrid").Datasource(Model).Columns(c =>
        {
            c.Field("Id").HeaderText("Id").IsPrimaryKey(true).Visible(false).Add();
            ....
        }).ChildGrid(c => {c.DataSource("/MyController/MyAction?paramId={Id}")})


AS Alan Sangeeth S Syncfusion Team August 24, 2015 07:06 AM UTC

Hi Krishna,

Thanks for using Syncfusion products.

We have analyzed your code snippets and found that you have given controller action url directly to Grid DataSource property which was the cause of the issue.

Only for OData service, we can provide URL directly to Grid DataSource property. For fetching data from mvc controller, we need to provide the controller name with action to the URL property of Grid DataSource and we need to mention the adaptor type as “UrlAdaptor”. Please refer the following code snippets.

@(Html.EJ().Grid<EJGrid.Models.EmployeeView>("HierarchyGrid")


.ChildGrid(child =>

                 {

                     child.Datasource(ds => ds.URL("Home/ChildData").Adaptor(AdaptorType.UrlAdaptor).Offline(true))

}

})


public JsonResult ChildData(DataManager dm)

        {

            IEnumerable data = OrderRepository.GetAllRecords();

            DataOperations ds = new DataOperations();

            data = ds.Execute(data, dm);

            return Json(data, JsonRequestBehavior.AllowGet);

        }



For your convenience we have created a sample and the same can be downloaded from below link.
Sample: http://www.syncfusion.com/downloads/support/forum/120006/ze/EJGrid178673517

Please refer the following documentation link for further reference on data binding to Grid
http://help.syncfusion.com/ug/aspnetmvc/Documents/databinding2.htm

Please let us know if you need any further assistance.

Regards,
Alan Sangeeth S


KR Krishna August 26, 2015 02:10 PM UTC

Thanks Alan,

Can you also help me understand how the code below handles the case of sending the Primary Key of the Master grid to the controller method that fills the Child grid.

Warm regards,
Krishna


AS Alan Sangeeth S Syncfusion Team August 27, 2015 05:16 AM UTC

 Hi Krishna,
In the previous update, we have provided you the sample with ChildGrid using Load at Once technique i.e, by using Offline property set as true. Please refer the following code snippets.

@(Html.EJ().Grid<EJGrid.Models.EmployeeView>("HierarchyGrid")


.ChildGrid(child =>

                 {

                     child.Datasource(ds => ds.URL("Home/ChildData").Adaptor(AdaptorType.UrlAdaptor).Offline(true))

}

})




With offline mode as true, the entire child Grid data would be fetched from server at initial Grid rendering and on expanding child Grid, it would be processed in client-side and so no request would be sent to server with Primary Key of Master Grid.

We have now modified the sample with childGrid using On-demand technique i.e, by not using Offline property and the same can be downloaded from below link.

Sample: http://www.syncfusion.com/downloads/support/forum/120006/ze/EJGrid-874972191

With On-demand technique, when we expand child Gird, a request would be sent to server with Primary key details passed along params “where” which could be bound to DataManager in servers-side. Please refer the following screenshot.





Regards,
Alan Sangeeth S



SD Sandesh Daddi June 12, 2016 09:15 AM UTC

Thanks a lot Alan Sangeeth S, this really helped me. 


VA Venkatesh Ayothi Raman Syncfusion Team June 13, 2016 04:01 AM UTC

Hi Sandesh, 

Thanks for your feedback. 

We are happy to hear that your requirement is achieved. 

Thanks, 
Venkatesh Ayothiraman. 



ME Megatron July 1, 2016 02:22 AM UTC

Hello, I am trying this with ODATA, can you explain the difference in client side call - and any advantages with using ODATA.

thanks


VA Venkatesh Ayothi Raman Syncfusion Team July 1, 2016 12:46 PM UTC

Hi Megatron, 

URL adaptor is just like a AJAX call, in every action AJAX post will send to the specified data service. But OData is a webservice and it is extended from URL adaptor. Odata service is mainly used for consuming the data through Odata service.  
We can also use offline property in Odata adaptor. As we have already mentioned if we enable the offline mode as true, then entire child grid data will be fetch from the server side while expanding the Grid. So, initially Grid takes some more time to load the data after that it will works fine. 
Rather if we set offline mode as false then post request will be send by each and every action of child Grid. Please refer to the online forum for advantages of Odata, 

Regards, 
Venkatesh Ayothiraman. 



JA Jibran Ahmed Sheikh replied to Alan Sangeeth S October 14, 2020 12:03 PM UTC

 Hi Krishna,
In the previous update, we have provided you the sample with ChildGrid using Load at Once technique i.e, by using Offline property set as true. Please refer the following code snippets.

@(Html.EJ().Grid<EJGrid.Models.EmployeeView>("HierarchyGrid")


.ChildGrid(child =>

                 {

                     child.Datasource(ds => ds.URL("Home/ChildData").Adaptor(AdaptorType.UrlAdaptor).Offline(true))

}

})




With offline mode as true, the entire child Grid data would be fetched from server at initial Grid rendering and on expanding child Grid, it would be processed in client-side and so no request would be sent to server with Primary Key of Master Grid.

We have now modified the sample with childGrid using On-demand technique i.e, by not using Offline property and the same can be downloaded from below link.

Sample: http://www.syncfusion.com/downloads/support/forum/120006/ze/EJGrid-874972191

With On-demand technique, when we expand child Gird, a request would be sent to server with Primary key details passed along params “where” which could be bound to DataManager in servers-side. Please refer the following screenshot.





Regards,
Alan Sangeeth S


Thanks for sharing. I really appreciate it.


GL Gowri Loganathan Syncfusion Team October 15, 2020 07:18 AM UTC

Hi Jibran Ahmed, 
 
You are most welcome.  
 
Please get back to us, if you need further assistance. 
 
Regards, 
Gowri V L 
 


Loader.
Live Chat Icon For mobile
Up arrow icon