Not able to bind onDemand Data

[Rushikesh Joshi]

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]

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]

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]

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]

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