Kendo Autocomplete Authorization Headers

836
December 10, 2016, at 12:49 PM

I can't figure out why my Kendo Autocomplete widget is not sending the authorization headers in the request to the server:

var dataSource = new kendo.data.DataSource({
    type: 'odata',
    serverFiltering: true,
    transport: {
        read: {
            url: myApiUrl,
            type: 'GET',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', myAuthorizationValue);
            }
        }
    }
});
$('#myAutocompleteField').kendoAutoComplete({
    dataTextField: 'fieldName',
    filter: 'contains',
    minLength: 3,
    dataSource: dataSource
});

When I check the server response in dev tools, I am getting a 401 Unauthorized error from the server. Looking at the Request Headers, I don't see the Authorization property at all.

What do I need to do to get the Authorization header to be included with the request?

Update:

I've continued to explore this problem. If I just do a typical $.ajax request with the same object as transport.read in the Kendo DataSource parameter, it sends the headers and I get a successful response.

$.ajax({
    url: myApiUrl,
    type: 'GET',
    beforeSend: function (xhr) {
        xhr.setRequestHeader('Authorization', myAuthorizationValue);
    },
    success: function(res) {
        console.log('success!');
        console.log(res);
    }
});
Answer 1

According to this forum post on Telerik forum, when using type: 'odata' the server expects to be working with JSONP and will not send Auth headers.

Commenting out that line, as below, will send the Auth headers, but it sends the searched query using a filters array, instead of typical ODATA parameters (which makes sense):

var dataSource = new kendo.data.DataSource({
    //type: 'odata',  // this causes the auth headers to not be sent
    serverFiltering: true,
    transport: {
        read: {
            url: myApiUrl,
            type: 'GET',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', myAuthorizationValue);
            }
        }
    }
});
// Parameters sent
filter[filters][0][value]:sprint
filter[filters][0][operator]:contains
filter[filters][0][field]:fieldName
filter[filters][0][ignoreCase]:true
filter[logic]:and

Interestingly, I found elsewhere on the Internet someone using type: 'odata-v4', which does sent the Auth headers and sends the ODATA filter parameters properly.

var dataSource = new kendo.data.DataSource({
    type: 'odata-v4',
    serverFiltering: true,
    transport: {
        read: {
            url: myApiUrl,
            type: 'GET',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', myAuthorizationValue);
            }
        }
    }
});
// Parameters Sent
$format:json
$filter:contains(tolower(fieldName),'sprin') // sprin is the search string
$count:true
Rent Charter Buses Company
READ ALSO
Validation for dynamic form - progressing before all conditions met

Validation for dynamic form - progressing before all conditions met

I have created a form and I am trying to add validation for a set of select fields that are 'doubly' dynamic - that is to say that, depending on user input, there may be x number of groups with y number of select fields in eachAn answer is required for each of the select...

256
How do I generate html using jQuery element creation/appending?

How do I generate html using jQuery element creation/appending?

I need to generate HTML for a checkboxI generate the checkbox using the following function that uses js string concatenation to generate a large block of HTML:

368
Disable Prev Control on first slide and disable Next control on last slide

Disable Prev Control on first slide and disable Next control on last slide

using Slick and looking for a way to have the prev control disabled and hidden until the user clicks the next arrowSimilarly I want the Next control to become disabled and hidden once the user reaches the last slide

372
How to hide a div on mobile but make it visible with jQuery

How to hide a div on mobile but make it visible with jQuery

I have a project with ZURB Foundation 5 and jQuery

414