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
close icon

Offline datamanager for sub/detail grid

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 = "(206) 555-9857",
                    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

3 Replies

BM Balaji Marimuthu Syncfusion Team November 26, 2015 08:23 AM UTC

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


RO rodwin November 27, 2015 03:42 AM UTC

Hi Balaji,

This is really helpful

Thanks.


BM Balaji Marimuthu Syncfusion Team November 30, 2015 05:00 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon