Transport and basic authentication

[Emanuele]

I need to call web api with basic authentication  inside trasport section of datasource, is it possible and how?
In detail, my api controller could retrieve from a third source just a page of datas so i need to use server pagination for grid values and pass the page i need, the only way to link to pagination mechanism is just to call directly the json web api, but i need to add basic+credentials to header. I'm working with angular and for http$ i iniect credential in header automatically, but i don't think it could work with transport in datasource. Any help? thanks in advance.

[Daniel]

Hello Emanuele,

You can add headers to the request the same way as with the jQuery ajax method. By using the headers option:

read: {
  url: "url",
  headers: { key: value}
}

or with the beforeSend callback:

read: {
  url: "url",
  beforeSend: function (request){
    request.setRequestHeader(key, value);
  }
}

Regards,
Daniel
Telerik

 

 

[Emanuele]

Daniel thanks for solution it works! :)
I find a strange issue i will post.

var anyvar = [{ "var[0].a":x, "var[0].b":y, "var[0].c": "k" }];
 $scope.ds = new kendo.data.DataSource({
        type:"json",
        transport: {
            read: {
                url: my_web_api_url,
                type: 'GET',
                dataType: "json",
                beforeSend: function (req) {
                    req.setRequestHeader('Authentication', value);
                },
                data: function () {
                    return {
                        'id':z
                    }
                }
            },
            parameterMap: function (o, operation) {
                var _lo = {"id":o.id}
                if (anyvar ) {
                    for (var i = 0; i <anyvar .length; ++i)
                        angular.extend(_lo,anyvar );

                }
                _lo.page = o.page;
                _lo.pageSize = o.pageSize;
                return _lo;
          }
        },
      etc

where anyvar is a parameter= IEnumerable<T> var  the call is ok as it takes "var[0].a" as just simply a variable name.
But if i define this

var var= [{ "a":x, "b":y, "c": "k" }];
   anyvar = { 'var': var};

and in parametermap i say

parameterMap: function (o, operation) {
                var _lo = {"id":o.id}
                if (anyvar ) {
                  angular.extend(_lo, anyvar);

                }
                _lo.page = o.page;
                _lo.pageSize = o.pageSize;
                return _lo;
          }

or i use stringfy or angularjs.toJson  it loose the header i set.

[T. Tsonev]

Hello,

The code seems to contain syntax errors:
var var= [{ "a":x, "b":y, "c": "k" }];

Using var as variable name is not valid.
Perhaps the JS error is preventing the code from executing further? Hence you lose the headers.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Emanuele]

Hello,
 sorry for my late answer. The variable's name you are referring is just my fault in writing the case, i don't use that name at all. The point is that if i use a complex parameter in parameter map it clears what i write in the "beforeSend" parameter so it losts the basic authentications token. I rewrite my javascript function in order to work but i want to report this strange case, i don't know it could be a bug. Just to know there is not javascript error signal. Thank you again for your help.

[Daniel]

Hello again Emanuele,

There are not any known reasons for any request data to clear the headers and at least when I tested with the provided setup, the header was still sent. Could you check this example and this screen cast and let me know if I am missing something?

Regards,
Daniel
Telerik

 

 

[Emanuele]

I test

var items = [{ "a": "x", "b": "y", "c": "k" }];
    var anyvar = { items: items };
    $scope.ds1 = new kendo.data.DataSource({
        transport: {
            read: {
                url: service.mywebapiurl(),
                beforeSend: function (req) {
                    req.setRequestHeader('Authentication', "value");
                },
                data: function () {
                    return {
                        'id': 1
                    }
                }
            },
            serverPaging: true,
            parameterMap: function (o) {
                var _lo = { "id": o.id }
                if (anyvar) {
                    for (var i = 0; i < anyvar.length; ++i)
                        angular.extend(_lo, anyvar);
                }
                _lo.page = o.page;
                _lo.pageSize = o.pageSize;
                return _lo;
            }
        }
    });

    $scope.ds1.read();

just changing the url and calling read() method, and result on my pc (chrome network debug) is

Remote Address:::1:54420
Request URL:http://localhost:54420/scripts/jquery-1.9.1.js
Request Method:GET
Status Code:404 Not Found
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:54420
Referer:http://localhost:54420/Index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36
Response Headersview source
Cache-Control:private
Content-Length:5054
Content-Type:text/html; charset=utf-8
Date:Wed, 03 Sep 2014 07:46:06 GMT
Server:Microsoft-IIS/8.0
X-Powered-By:ASP.NET

as you see no "Authorization" row on header (don't care error 404, it's not important in test).
Jquery as i saw is the same version ver. jQuery v1.9.1
kendo.all. min ver  Kendo UI v2014.2.716
Angularjs ver. AngularJS v1.2.16

[Daniel]

Hello Emanuele,

Does the problem occur on your side with the dojo example? If it occurs only in your actual project then could you provide the full code for the page or a runnable sample?

Regards,
Daniel
Telerik