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.

Not able to bind onDemand Data

Thread ID:

Created:

Updated:

Platform:

Replies:

119322 Jun 4,2015 04:18 PM Jun 8,2015 09:14 AM JavaScript 4
loading
Tags: ejGrid
Rushikesh Joshi
Asked On June 4, 2015 04:18 PM

Hi There,

I have ejGrid implementation which loads all data at onetime, this increases resonse time and bandwidth of my website.

Earlier I was directly adding a json formated data to DataSource of my grid. After doing some search and demo I have implemented below code and I can see that functions are getting triggered but grid is not showing any data.

Am I missing anything?

            var dataManager = ej.DataManager({ url: config.serviceUrl + '/GetAllProjectsPageData/1', adaptor: new ej.WebApiAdaptor(), crossDomain: true });

$("#ProjectsListGrid").ejGrid({
                dataSource: dataManager,
                allowPaging: true,
                columns: ["ProjectID","ProgramName","Location","Description"],
           });


I check Network traffic and my WebAPI responding back data but I think it has something with Formatter as my WebAPI is responding data in OData form and I guess I need to convert them back to JSON form.

How can I achieve this without changing formation on my WebAPI side?

I appreciate your help.

Thanks
Rushi 

Rushikesh Joshi
Replied On June 4, 2015 04:40 PM

Hi There,

I have ejGrid implementation which loads all data at onetime, this increases resonse time and bandwidth of my website.

Earlier I was directly adding a json formated data to DataSource of my grid. After doing some search and demo I have implemented below code and I can see that functions are getting triggered but grid is not showing any data.

Am I missing anything?

            var dataManager = ej.DataManager({ url: config.serviceUrl + '/GetAllProjectsPageData/1', adaptor: new ej.WebApiAdaptor(), crossDomain: true });

$("#ProjectsListGrid").ejGrid({
                dataSource: dataManager,
                allowPaging: true,
                columns: ["ProjectID","ProgramName","Location","Description"],
           });


I check Network traffic and my WebAPI responding back data but I think it has something with Formatter as my WebAPI is responding data in OData form and I guess I need to convert them back to JSON form.

How can I achieve this without changing formation on my WebAPI side?

I appreciate your help.

Thanks
Rushi 

On thing I have noticed is same code is working fine if I will add offline=True, but this stops on-demand pagination.

Regards
Rushi

Prasanna Kumar Viswanathan [Syncfusion]
Replied On June 5, 2015 07:32 AM

Hi Rushikesh,

Thanks for using Syncfusion Products.

We analyzed your requirement and created a sample in web API adaptor using ODataQueryOptions. In Web API Adapter we bind the dataSource using ej.DataManager. In ODataQueryOptions when we return the data using pageresult it automatically converts the data to JSON form.  ODataQueryOptions parameter in server side controller which contains all the required parameters for  performing server side operations such as paging, sorting and filtering. So, we suggest you to use odataqueryoptions in the controller.

Please find the code snippet

<div id="Grid"></div>

<script type="text/javascript">

    $(function () {

        var DataManager = ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor(), crossDomain: true, });

            $("#Grid").ejGrid({

                dataSource: DataManager,

                allowPaging: true,

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },

                        { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },

                        { field: "EmployeeID", headerText: 'Employee ID',  textAlign: ej.TextAlign.Right, width: 80, validationRules: { number: true } },

                        { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" },

                        { field: "ShipCountry", headerText: 'Ship Country', width: 90 }

                ]

        });

        });
</script>

--------------------------------------------------------------------------------------

public class OrdersController : ApiController

    {

        // GET api/orders

        NorthwindDataContext db = new NorthwindDataContext();

        public PageResult<Order> Get(ODataQueryOptions opts)

        {

            List<Order> ord = db.Orders.ToList();


            return new PageResult<Order>(opts.ApplyTo(ord.AsQueryable()) as IEnumerable<Order>, null, ord.Count);
        }

 
We have attached the sample in the following link.

Sample Link : http://www.syncfusion.com/downloads/support/forum/119322/ze/WebApiSample_Modified935495117

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

Regards,
Prasanna Kumar N.S.V

Rushikesh Joshi
Replied On June 5, 2015 10:06 AM

Thanks Prasanna for your response.

Is it something that this feature can only work with OData, can I do it without OData?

My server response back data in JSON form.

If I use, offline=true then data is getting load but if not then it is not loading in grid, but when I see network traffic, I can see that data is coming?

Thanks
Rushi

Prasanna Kumar Viswanathan [Syncfusion]
Replied On June 8, 2015 09:14 AM

Hi RushiKesh,

Thanks for the Update.

We analyzed the query and we suggest you to use URL adaptor. In URL adaptor we need to return the data as JSON and the JSON object must contain field name as “result” with its value as dataSource and one more field name as “count” with its value as dataSource total records count.   The Skip and Take methods are helping to achieve the load on demand feature of ejGrid. They are used to get the records of the particular page from server side. If we ignore the skip and take methods, then it will bind the whole records.

We have already created a UG documentation for the URL Adaptor. So, please refer the UG documentation from the below link

Link : http://help.syncfusion.com/ug/js/Documents/urladaptor.htm

Please find the below code snippet :


<script type="text/javascript">

    $(function () {

        var DataManager = ej.DataManager({ url: "/api/Orders", adaptor: new ej.UrlAdaptor() });

            $("#Grid").ejGrid({

                dataSource: DataManager,

                allowPaging: true,

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },

                        { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },

                        { field: "EmployeeID", headerText: 'Employee ID',  textAlign: ej.TextAlign.Right, width: 80, validationRules: { number: true } },

                        { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" },

                        { field: "ShipCountry", headerText: 'Ship Country', width: 90 }

                ]

        });

        });

</script>


---------------------------------------------------------------------------------------------------------


public class OrdersController : ApiController

    {


        // GET api/orders

        NorthwindDataContext db = new NorthwindDataContext();

        [HttpPost]

        public DataResult Post(DataManager dm)

        {

            DataResult result = new DataResult();

            result.result = db.Orders.Skip(dm.Skip).Take(dm.Take).ToList();

            result.count = db.Orders.Count();

            return result;

        }


         //GET api/orders/5

        [HttpGet]

        public string Get(int id)

        {

            return "value";

        }

        public class DataResult

        {

            public IEnumerable<Order> result { get; set; }

           public int count { get; set; }
        }



For your convenience we have created a sample and same can be downloaded from the below link

Sample Link : http://www.syncfusion.com/downloads/support/forum/119322/ze/WebApiSample_Modified_(2)-432519807

Please get back to us if you have any further assistance,

Regards,
Prasanna Kumar N.S.V

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.

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.

;