Loading grid via DataManger with secure Odata calls

[Jim Woods]

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]

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]

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]

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:

http://help.syncfusion.com/js/datamanager/data-binding

[Madhu Sudhanan P]

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