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

Linked Grids with BatchDataSource

Thread ID:

Created:

Updated:

Platform:

Replies:

121830 Jan 29,2016 11:00 AM UTC Feb 15,2016 12:36 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Prasanth
Asked On January 29, 2016 11:00 AM UTC

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

Sellappandi Ramu [Syncfusion]
Replied On 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 =>

      {

          . . . .

      })

)

<script type="text/javascript">

    $(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: http://www.syncfusion.com/downloads/support/forum/121830/ze/Sample_121830MasterGrid-1095806778

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

Document for Datamanager: http://help.syncfusion.com/js/datamanager

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

Regards,
Sellappandi R

Prasanth
Replied On 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
  1. One page load how do I make the first row selected and hence show the related records on the second linked grid
  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, 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> changedList<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);

        }  



Ragavee U S [Syncfusion]
Replied On 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.

http://help.syncfusion.com/js/api/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.

public ActionResult OrderDataUpdate(List<order> changedList<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);

        }  


For your convenience, we have created a sample which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121830/ze/MasterDetailsGrid-1116666556

Regards,
Ragavee U S.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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

;