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

Data not binding properly

Thread ID:

Created:

Updated:

Platform:

Replies:

120172 Sep 7,2015 08:35 PM UTC Sep 9,2015 03:59 AM UTC JavaScript 3
loading
Tags: ejGrid
Lory
Asked On September 7, 2015 08:35 PM UTC

Hi Team,

I am using javascript and mvc. When I use the sampleSrc as the datasource for PersonGrid, the pagesize applies well. but when I change the datasource to perSrc, it would display the data but it does not apply the pagesize atrribute.

[javascript]
var sampleSrc = [{ PersonId: "1", Name: "John" }, { PersonId: "2", Name: "Doe" }, { PersonId: "3", Name: "Jeremy" }
                    , { PersonId: "4", Name: "Mary" }, { PersonId: "5", Name: "Phillip" }, { PersonId: "6", Name: "Ashley" }]

    var perSrc = ej.DataManager({
        url: "../FileMaintenance/PersonnelGrid",
    });

    $("#PersonGrid").ejGrid({
        dataSource: sampleSrc,
        allowPaging: true,
        pageSettings: { pageSize: 3 },
        columns: [
                      { field: "PersonId", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 },
                      { field: "Name", headerText: "Name", width: 110 }
        ]
    });

[Controller]
[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public void PersonnelGrid()
        {
            System.Web.HttpContext.Current.Response.Clear();
            var data = fm.GetFacilityStaff().ToList();
            System.Web.HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
            JavaScriptSerializer serialize = new JavaScriptSerializer();
            System.Web.HttpContext.Current.Response.Write(String.Format("{{\"d\":{{\"results\":{0},\"__count\":{1}}}}}", serialize.Serialize(data), data.Count));
            System.Web.HttpContext.Current.ApplicationInstance.CompleteRequest();

        }

Balaji Marimuthu [Syncfusion]
Replied On September 8, 2015 09:35 AM UTC

Hi Lory,


Thanks for contacting Syncfusion Support.


We have analyzed your reported queries and provided code example. When using the Remote data (ex: oData Service) the data will be retrieved based on the query $top and $skip. 


But if we retrieve data from server side, we need to perform the skip and take operations manually. By using UrlAdaptor, we can get the required parameters (skip, take) in server side and perform skip and take operations. 


The working concept of UrlAdaptor is Load on Demand, it retrieves the data when performing the paging operation (based on the skip & take values) and not all the records. 


Please refer to the sample and Help documents,

Sample: Sample120172

Document: http://docs.syncfusion.com/js/grid/editing#crud-operation-with-server-side

https://www.syncfusion.com/kb/4300/server-side-api-for-datamanager-operations




var perSrc = ej.DataManager({

        url: "/Grid/DataSource",

        adaptor:"UrlAdaptor"

    });


    $("#Grid").ejGrid({

        dataSource: perSrc,

        allowPaging: true,

        pageSettings: { pageSize: 3 },

        columns: [

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

                      { field: "CustomerID", headerText: "Customer ID", width: 110 }

        ]

    });



[Controller]


public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm)

        {

            var Data = OrderRepository.GetAllRecords();

            int count = Data.AsQueryable().Count();

            Data = Data.Skip(dm.Skip).Take(dm.Take).ToList();

            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet);

        }



Instead of retrieving data from server based on load on demand, you can load all the data from server to browser and process records in client-side by setting the offline property as true in ej.DataManager.


//Load At once

    var perSrc = ej.DataManager({

        url: "/Grid/PersonnelGrid",

        offline:true

    });


    $("#PersonGrid").ejGrid({

        dataSource: perSrc,

        allowPaging: true,

        pageSettings: { pageSize: 3 },

        columns: [

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

                      { field: "CustomerID", headerText: "Customer ID", width: 110 }

        ]

    });



[Controller]


        [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public void PersonnelGrid()

        {

            System.Web.HttpContext.Current.Response.Clear();

            var data = OrderRepository.GetAllRecords().ToList();

            System.Web.HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";

            JavaScriptSerializer serialize = new JavaScriptSerializer();

            System.Web.HttpContext.Current.Response.Write(String.Format("{{\"d\":{{\"results\":{0},\"__count\":{1}}}}}", serialize.Serialize(data), data.Count));

            System.Web.HttpContext.Current.ApplicationInstance.CompleteRequest();


        }

 

Please refer to the demo and help document as follows,

Demo: http://js.syncfusion.com/demos/web/#!/azure/grid/DataBinding/Loadatonce

Document: http://docs.syncfusion.com/js/grid/data-binding

Regards,

Balaji Marimuthu


Lory
Replied On September 8, 2015 01:23 PM UTC

This is exactly what I'm looking for. Thanks!

Balaji Marimuthu [Syncfusion]
Replied On September 9, 2015 03:59 AM UTC

Hi Lory, 

We are happy that the provided suggestion helped you. 

Please get back to us if you need any further assistance.  

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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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

;