How To Use Kendo UI Grid With Authentication

Introduction

When using Kendo Grid with authentication, you will need to tune up dataSource.transport correctly. For example:

dataSource: {
  type: "odata",
  transport: {
    read: {
      url: db.url + '/collections/' + this.query,
      beforeSend: function (request){
        request.setRequestHeader('Authorization', db.token);
      },
      dataType: "json"
    },
    create: {
      url: db.url + '/collections/' + this.query,
      headers: {
        Authorization: db.token,
        'content-type': 'application/json',
      }
    },
    update: {
      url: db.url + '/collections/' + this.query,
      headers: {
        Authorization: db.token,
        'content-type': 'application/json',
      }
    },
    destroy: {
      url: function(data) {
        return db.url + '/collections/allobjects' + "(" + data.id + ")";
      },
      headers: {
        Authorization: db.token,
        'content-type': 'application/json',
      }
    }
  },
  pageSize: 100,
  serverPaging: true,
  serverFiltering: true,
  serverSorting: true,
  schema: {
    errors: "error",
    model: {
      id: "id"
    }
  }
},

The most important thing is that header should contain:

Authorization: db.token

The example shows that it can be done two ways:

1. Specify headers:

   headers: {
     Authorization: db.token,
     'content-type': 'application/json',
   }

2. Specify a function that should run before sending message to the server. The headers should be set within that function:

   beforeSend: function (request){
     request.setRequestHeader('Authorization', db.token);
   },

Another important notice: Kendo Grid in OData mode uses jsonp by default for data reading. But jsonp request doesn’t allow headers changing. To be able to change headers, you need to set for read command:

dataType: "json"