Data not binding properly

[Lory]

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]

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]

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

[Balaji Marimuthu]

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