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.
Syncfusion Feedback

Loading grid via DataManger with secure Odata calls

Thread ID:

Created:

Updated:

Platform:

Replies:

120266 Sep 16,2015 04:23 AM UTC Sep 17,2015 11:41 AM UTC JavaScript 4
loading
Tags: ejGrid
Jim Woods
Asked On September 16, 2015 04:23 AM UTC

To make our Odata calls and populate our grid we need to run each query through a specific function, which ensures the user is properly authenticated.  I have found no way to achieve this using the dataManager because it specifically requires a url.

For example:
$(function () {// Document is ready.
      //oData Adaptor with DataManager
      var dataManager = ej.DataManager({
          url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Products",
          offline: true
      });
  
      $("#Grid").ejGrid({
          dataSource: dataManager,
          allowPaging: true,
          columns: ["ProductID", "ProductName", "SupplierID", "UnitPrice"]
      });
  });
  
The only workaround I have found is to 'preload' the datasource and then apply it to the grid.  For example:

function getGridData() {
            
            var getData = secureOdataCall.loadItems(ServiceEndPoint + "myOdataURL/Data");

            $.when(getData).done(function (e) {
                $("#Grid").ejGrid("dataSource", e);                
            }
 });
 
 Is there a better way to do this?  I need to use the above function secureOdataCall.loadItems() to make a secure call.  It does not work if I add this to the DataManager, and I would like to take advantage of the dataManager's functionality and assign it from within the grid.  This will help especially when dealing with large amounts of data/records as I don't want to retrieve everything at once.
 
 Thanks.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 16, 2015 10:19 AM UTC

Hi Jim,

Thanks for contacting Syncfusion Support.

We saw your code snippet and you have changed the dataSource dynamically. Hence, we have created a sample in JS playground based on your requirement. Please check the below example,
http://jsplayground.syncfusion.com/3xwqz2w2

In the above example, based on the dropdown values, we are changing the dataSource of Grid dynamically.
                       

<select id="Data" class="e-ddl" data-bind="value: field">

                                <option value="Orders" selected="selected">Orders</option>

                                <option value="Order_Details">OrderDetails</option>

                            </select>


$("#Data").ejDropDownList({

        width: "115", selectedItemIndex: 0, select: function (args) {


            var data = ej.DataManager({

                url: args.value == "Order_Details" ? "http://mvc.syncfusion.com/Services/Northwnd.svc/Order_Details" : "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"

            });

            var obj = $("#Grid").ejGrid("instance")

            obj.dataSource(data)

        }
    });


In the update, you have quoted about the secure call or request for the data in secure manner and you are calling loadItem method  to get the Data for grid. Please share us the functionality behind the loadItem Method or else explain us the type of data that you would like to pass along with the DataManager. It will help us to serve you better and we will try to achieve your requirement through the dataManager.

Regards,
Seeni Sakthi Kumar S.

Jim Woods
Replied On September 17, 2015 12:35 AM UTC

Thanks for your reply.

The loadItems() call is proprietary code that makes an authenticated call to the OData 4 service.  Unfortunately, I cannot share this code, but all OData URLs must be run through this.

I would like to use the DataManager in order to take advantage of the 'load on demand' functionality -- rather than doing a 'load at once' with the dynamic datascource method and managing the data manually.

Is there anything that can be done?

Jim Woods
Replied On September 17, 2015 03:26 AM UTC

So, it looks like the only way to use dataManager is to send the call through my Controller and apply authentication there.  As shown here:

Madhu Sudhanan P [Syncfusion]
Replied On September 17, 2015 11:41 AM UTC

Hi Jim,

We can achieve the load on demand using dataSource method in which the data from server is retrieved using your secureODataCall  as follows. Please refer to the below code example.


$("#Grid").ejGrid({

                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData.slice(0,f),

                allowPaging: true,

                columns: [

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

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

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

                              { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80, format: "{0:C}" },

                              { field: "ShipCity", headerText: "Ship City", width: 110 },

                              { field: "ShipCountry", headerText: "Ship Country", width: 110 }

                ],

                actionBegin: function (args) {                    

                    if (args.requestType == "paging") {

                        current = this.model.pageSettings.currentPage;       

             

                        //Perform data request using secureODataCall

                        getData = secureOdataCall.loadItems(ServiceEndPoint + "myOdataURL/Data");


                        args.cancel = true; //Cancel paging

                    }                                          

                },

                actionComplete: function(args) {

                    if (this.initialRender && args.requestType == "refresh")

                        refreshPager(this);

                }

            });


            $.when(getData).done(function (e) {

                //Update grid and refresh page.

                $("#Grid").ejGrid("dataSource", e.result);

                refreshPager($("#Grid").ejGrid("instance"), current, e.count);

            });


        });



        //Method to refresh grid`s pager

        function refreshPager(obj, current, total) {

            var pager = obj.getPager().ejPager("instance");

            pager.model.totalRecordsCount = total;

            pager.model.currentPage = current || 1;

            pager.refreshPager();
        }

 
Please try the above solution and let us know if you have any query.

Regards,
Madhu Sudhanan. P

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.

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

;