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

Loading grid via DataManger with secure Odata calls

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

4 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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,

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>



        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")



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.

Seeni Sakthi Kumar S.

JW Jim Woods 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?

JW Jim Woods 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:

MS Madhu Sudhanan P Syncfusion Team 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.


                // 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")




            $.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;


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

Madhu Sudhanan. P

Live Chat Icon For mobile
Up arrow icon