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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Offline datamanager for sub/detail grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121271 Nov 25,2015 01:45 PM UTC Nov 30,2015 05:00 AM UTC JavaScript 3
loading
Tags: ejGrid
rodwin
Asked On November 25, 2015 01:45 PM UTC

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

Balaji Marimuthu [Syncfusion]
Replied On 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

rodwin
Replied On November 27, 2015 03:42 AM UTC

Hi Balaji,

This is really helpful

Thanks.

Balaji Marimuthu [Syncfusion]
Replied On 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

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

;