Offline datamanager for sub/detail grid

[rodwin]

I am using a offline datamanager for may main grid. This grid has detail grid for each row. When expanding the detail, i would like to query the data from the main grid and not query again in the server.

Existing code:

var dataManager = ej.DataManager({

        url: "/TherapyLog/Data",

        adaptor: "UrlAdaptor",

        offline: true

    });

$("#Grid").ejGrid({

            // the datasource "window.employeeView" is referred from jsondata.min.js

            dataSource: dataManager,

            detailsTemplate: "#tabGridContents",

            detailsDataBound: "detailGridData",

            create: "onCreate",

            columns: [

                      { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 },

                      { field: "FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 },

                      { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left, width: 120 },

                      { field: "City", headerText: 'City', textAlign: ej.TextAlign.Left, width: 100 },

                      { field: "Country", headerText: 'Country', textAlign: ej.TextAlign.Left, width: 100 }

            ]

        });

var query = ej.Query()

            .from("Orders").select("OrderID", "CustomerID", "EmployeeID", "Freight", "ShipCountry").take(5);

function detailGridData(e) {

            var filteredData = e.data["EmployeeID"];

            // the datasource "window.ordersView" is referred from jsondata.min.js

            //var data = ej.DataManager({ url: "/TherapyLog/Data", adaptor: new ej.UrlAdaptor() }).executeQuery(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true));

            e.detailsElement.find("#detailGrid").ejGrid({

                dataSource: dataManager.executeQuery(query),

                allowSelection: false,

                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 80, textAlign: ej.TextAlign.Right },

                        { field: "CustomerID", headerText: 'Customer ID', width: 80, textAlign: ej.TextAlign.Left },

                        { field: "CompanyName", headerText: 'Company Name', width: 120, textAlign: ej.TextAlign.Left },

                        { field: "ShipCity", headerText: 'City', width: 120, textAlign: ej.TextAlign.Left },

{ field: "Freight", headerText: 'Freight', width: 90, textAlign: ej.TextAlign.Right }

                ]

            });

C# code:

public JsonResult Data()

        {

            List<Object> data = new List<object>();

            for (int i = 1; i <= 10; i++)

            {

                List<Object> orders = new List<object>();

                for (int x = 1; x <= 5; x++)

                {

                    orders.Add(new

                    {

                        OrderID = 10240 + x,

                        CustomerID = "Customer" + x,

                        EmployeeID = x,

                        OrderDate = DateTime.Now,

                        ShipName = "Vins et alcools Chevalier",

                        ShipCity = "Reims",

                        ShipAddress = "59 rue de l'Abbaye",

                        ShipRegion = string.Empty,

                        ShipPostalCode = "51100",

                        ShipCountry = "France",

                        Freight = 32.38,

                        Verified = false

                    });

                }

                data.Add(new

                {

                    EmployeeID= 1+i,

                    LastName = "Davolio",

                    FirstName = "Nancy",

                    Title = "Sales Representative",

                    TitleOfCourtesy = "Ms.",

                    BirthDate = DateTime.Now,

                    HireDate = DateTime.Now,

                    Address = "507 - 20th Ave. E.\r\nApt. 2A",

                    City = "Seattle",

                    Region = "WA",

                    PostalCode = "98122",

                    Country = "USA",

                    HomePhone = "[phone]",

                    Extension = "5467",

                    Orders = orders

                });

            }

            var records = data; 

            return Json(records, JsonRequestBehavior.AllowGet);

        }

Since all data are already fetch during the loading of main grid, I dont want to query again for the details of each row.

Thank you

[Balaji Marimuthu]

Hi Rodwin,

Thanks for contacting Syncfusion support.


In provided code example, you have used the complex data in controller. The from query is used to select the table from database but Orders used as a property of data and it’s not a table name. So we suggest you to use the select query to retrieve data from the Orders.
http://help.syncfusion.com/js/datamanager/query#select
http://help.syncfusion.com/js/datamanager/query#from

  var dataManager = ej.DataManager({

        url: "/Home/Data1",

        adaptor: "UrlAdaptor",

        offline: true

    });

    var query = ej.Query().select("Orders");

ExecuteQuery is used to perform query operation on server side data. So If we use the executeQuery, the data can be retrieved in the done function. We have already retrieved data, so we can use the executeLocal method which is used to perform query operation on local data to perform the query. Please refer to the modified sample and code example as below.

Sample: Sample

    function detailGridData(e) {

        var filteredData = e.data["EmployeeID"];

        var index = this._excludeDetailRows().index(e.detailsElement.prev("tr"));

        var data = dataManager.executeLocal(query)[index];

        e.detailsElement.find("#detailGrid").ejGrid({

            dataSource: data,

            allowSelection: false,

            . . .

        });

    }

In above code example, we bound dataSource to detailGrid by using the index of expanded row element and to perform operation based on the filteredData you can use the below code example.

var dataManager = ej.DataManager({

        url: "/Home/Data",

        adaptor: "UrlAdaptor",

        offline: true

    });

   

    function detailGridData(e) {

        var filteredData = e.data["EmployeeID"];

      

        var data = dataManager.executeLocal(new ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true))[0].Orders;

        e.detailsElement.find("#detailGrid").ejGrid({

         ..

    }

[Controller]

public JsonResult Data()

        {

            List<Object> data = new List<object>();

            for (int i = 1; i <= 10; i++)

            {

                List<Object> orders = new List<object>();

                for (int x = 1; x <= 5; x++)

                {

                    orders.Add(new

                    {

                        OrderID = 10240 + x,

                        CustomerID = "Customer" + x,

                       EmployeeID = 1 + i,

                        OrderDate = DateTime.Now,

                        ShipName = "Vins et alcools Chevalier",

                    });

                }

                . . .

            return Json(records, JsonRequestBehavior.AllowGet);
        }

Please refer to the following link for further information about Query:
http://help.syncfusion.com/js/datamanager/query


Regards,
Balaji Marimuthu

[rodwin]

Hi Balaji,

This is really helpful

Thanks.

[Balaji Marimuthu]

Hi Rodwin,

We are happy that the provided solution helped you.

Please get back to us if you need any further assistance. We will be happy to assist you.

Regards,
Balaji Marimuthu