Linked Grids with BatchDataSource

3 Replies
3 Participants

Created by
PR Prasanth

Platform
ASP.NET MVC

Platform
ASP.NET MVC

Control
Grid

Created On
Jan 29, 2016 11:00 AM UTC

Last Activity On
Feb 15, 2016 12:36 PM UTC

Want to subscribe?
SIGN IN

Hi there,

I have couple of related Grids which uses Batch ds/ update to display & update the data. I want to be able to update (filter) the second grid based on first grid selected row. E.g. in the following code sample if an Employee is selected then only the orders attended by that particular employee should be displayed. Is it possible

(Html.EJ().Grid<EmployeeViewModel>("EmployGrid")

.Datasource(ds =>

ds.URL("BatchEmployDataSource")

.BatchURL("BatchEmployUpdate")

.Adaptor(AdaptorType.UrlAdaptor))

....

(Html.EJ().Grid<OrderViewModel>("OrderGrid")

.Datasource(ds =>

ds.URL("BatchOrderDataSource")

.BatchURL("BatchOrderUpdate")

.Adaptor(AdaptorType.UrlAdaptor))

....

Regards

Prasanth

3 Replies

SR Sellappandi Ramu Syncfusion Team February 1, 2016 09:41 AM UTC

Hi Prasanthan,

Thanks for contacting Syncfusion support.

We can achieve this requirement by using rowSelected event and query property. While selecting the row in parent grid, we need to bound the filtered datasource to child grid using dataManager option in rowSelected event.

Please refer to the code example and sample,

<h2>Master Grid</h2>

@(Html.EJ().Grid<object>("MasterGrid")

.Datasource(ds => ds.URL("/Home/EmployeeDataSource").Adaptor("UrlAdaptor").BatchURL("/Home/EmployeeUpdate"))

.SelectedRowIndex(0)

.ClientSideEvents(c => c.RowSelected("rowSelected"))

.AllowPaging()

.Columns(col =>

{

. . . .

}))

<h2>Detail Grid1</h2>

@(Html.EJ().Grid<object>("ChildGrid")

.AllowPaging()

.Columns(col =>

{

. . . .

})

)

$(function () {

window.rowSelected = function (args) {

var dataManger = ej.DataManager({

url: "/Home/OrderDataSource",

batchUrl: "/Home/OrderUpdate",

adaptor: new ej.UrlAdaptor()

});

$("#ChildGrid").ejGrid({

dataSource: dataManger,

query: new ej.Query().addParams("EmployeeID", args.data.EmployeeID)

});

}

});

</script>

The addParams in query option will helps to send the additional parameter in server side,

public ActionResult OrderDataSource(DataManager dm, int EmployeeID)

{

var DataSource = OrderRepository.GetAllRecords().Where(e => e.EmployeeID == EmployeeID);

DataResult result = new DataResult();

result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();

result.count = DataSource.Count();

return Json(result, JsonRequestBehavior.AllowGet);
}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample_121830MasterGrid-1095806778504863246.zip

Refer to the online help documentation for dataManager, rowSelected event,

Document for Datamanager: https://help.syncfusion.com/js/datamanager/overview

Document for rowSelected: https://help.syncfusion.com/api/js/ejgrid#events:rowselected

Regards,
Sellappandi R

PR Prasanth February 12, 2016 08:22 PM UTC

Hi Sellapandi,

Thanks for the reply and source code / links. I have managed to implement linked data grids.

Couple of things

One page load how do I make the first row selected and hence show the related records on the second linked grid
Second grid is also uses BatchUrl / UrlAdaptor to retrieve and edit data so on the Update ActionResult controller method currently I have no way of finding the selected/current employee id, I am just passing empty string to retrieve the orders (data = OrderData.Orders(manager, "");) at this stage it doesn't seems to create any issues, probably I haven't tested thoroughly. Mind you I kind of copied the code from sample solutions on the web

public ActionResult OrderDataUpdate(List<order> changed, List<order>added, List<order> deleted)

{

var manager = new Models.DataManager();

if (changed != null)

{

manager.OrderData.Update(changed);

}

//if (deleted != null)

// OrderData.Delete(deleted);

if (added != null)

manager.OrderData.Add(added);

var data = OrderData.Orders(manager, "");

return Json(data, JsonRequestBehavior.AllowGet);

}

RU Ragavee U S Syncfusion Team February 15, 2016 12:36 PM UTC

Hi Prasanthan,

Query #1: One page load how do I make the first row selected and hence show the related records on the second linked grid

We can set the default selected row while the grid is initially rendered using the SelectedRowIndex property of the Grid. Please refer to the below api reference documentation.

https://help.syncfusion.com/api/js/ejgrid#members:selectedrowindex

Query #2: Second grid is also uses BatchUrl / UrlAdaptor to retrieve and edit data so on the Update ActionResult controller method currently I have no way of finding the selected/current employee id

We can get the modified record details in the parameter of the BatchUpdate controller action. Please refer the below screenshot.

But since the controller action (to obtain dataSource) will be triggered by default with the EmployeeID bound to it after the update action, it is not necessary to pass the employeeID and obtain the data explicitly as in the code snippets that you have shared.