)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to use oAuth in Grid with ejDataManager

Platform: jQuery |
Control: ejGrid |
Published Date: July 13, 2018 |
Last Revised Date: April 28, 2020

Problem:

How can we use OAuth support in ej.DataManager?

Solution:

Here we have passed the “Authorization” token through headers (Customer Http Headers) property in ej. DataManager to authenticate the users. For example , we have used “OAuth1.0” in below code . So Please ensure followings:

 

  self.dataManager = function () {
        self.result('');
         var token = sessionStorage.getItem(tokenKey);
        if (token) {
            $("#Grid").ejGrid({
                dataSource:ej.DataManager({ url: '/api/values', headers: [{ Authorization: 'Bearer ' + token }], adaptor: new ej.WebApiAdaptor(), offline: true, crossDomain: true }),
                allowPaging: true,
            columns: [        
                    { field: "OrderID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
                    { field: "CustomerID", headerText: "Employee Name", width: 75, textAlign: ej.TextAlign.Left },
                    { field: "IsShipped", width: 80 },
                    { field: "ShipperCity",width:90 }
            ]
            })}    } [value controller]   [Authorize]
    public class ValuesController : ApiController
    {        public PageResult<Order> Get(ODataQueryOptions opts)
        {            List<Order> emp = CreateOrders();
             return new PageResult<Order>(emp as IEnumerable<Order>, null, emp.Count);}
        public static List<Order> CreateOrders()
        {
            List<Order> OrderList = new List<Order> 
            {
                new Order {OrderID = 10248, CustomerName = "Taiseer Joudeh", ShipperCity = "Amman", IsShipped = true },
                    . . .
            };
             return OrderList;       }
        public class Order
        {
            public int OrderID { get; set; }
            public string CustomerName { get; set; }
            public string ShipperCity { get; set; }
            public Boolean IsShipped { get; set; }        }  

 

  1. OAuth 1.0 requires client to send two security tokens for each API call, and the use both to generate the signature.
  2. Signatures are not required for the actual API calls once the token has been generated in OAuth2.0. It has only one security token.

For Your convenience we have attached the sample and the sample can be downloaded from the following link:
 
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ejDataManager_with_oAuth-314204440.zip
 

Steps to execute the sample as follows:
 
1. Run the sample and Register the credential. The “Register Module” is entry level of this application. Each user must be register in his credential in this module.
 

Register Module

Figure 1 Register Module

 

Password must be in combination of one alpha (capital and small) , numeric and non – numeric (minimum 6 letters)
 
 
2. success full register 

Successful registration

Figure 2 Registration success page

 

3. successfully login oAuth pass authorize token

Valildating Authentication

Figure 3 Check authentication token

 

4. The “DataMangerModule” we can access authorized through the ej. DataManager.

Edit Form

Figure 4 Access got throw dataManager

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon