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

Data not binding properly

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();

        }

3 Replies

BM Balaji Marimuthu Syncfusion Team 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



LO Lory September 8, 2015 01:23 PM UTC

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


BM Balaji Marimuthu Syncfusion Team 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


Loader.
Live Chat Icon For mobile
Up arrow icon