Using basic authentication with SyncFusion ej.DataManager

Question

I'm struggling to setup SyncFusions ej.Grid to use basic authentication when getting or updating data with my API. Has anyone had experience with this? Their examples seem sparse.

I've got some examples below of what I've tried. Given the following setup code:

var ticket = "Basic " + Base64.encode("username:password");

$('#Grid').ejGrid({
    dataSource: dataManager,
    allowPaging: true,
    columns: ["AccountName", "CompanyName"]
});

This code brings up chrome basic auth prompt:

var dataManager = ej.DataManager({
    url: "/api/app/imports/3",
    adaptor: new ej.WebApiAdaptor()
});

This code brings up chrome basic auth prompt.

Attempted because there is a "headers" object used in data.min.js

var dataManager = ej.DataManager({
    url: "/api/app/imports/3",
    adaptor: new ej.WebApiAdaptor(),
    headers: {
        Authorization: ticket
    }
});

This code errors: Uncaught TypeError: this.adaptor.processQuery is not a function

Attempted due to https://www.syncfusion.com/forums/117024/does-datamanager-support-odata-v4

var dataManager = ej.DataManager({
    url: "/api/app/imports/3",
    adaptor: new ej.WebApiAdaptor().extend({
        beforeSend: function() {
            request.setRequestHeader("Authorization", ticket);
        }
    })
});

This code brings up chrome basic auth prompt:

var dataManager = ej.DataManager({
    url: "/api/app/imports/3",
    adaptor: new ej.WebApiAdaptor(),
    beforeSend: function() {
        request.setRequestHeader("Authorization", ticket);
    }
});

This code brings up chrome basic auth prompt:

var dataManager = ej.DataManager({
    url: "/api/app/imports/3",
    adaptor: new ej.WebApiAdaptor()
});

dataManager.dataSource.beforeSend = function() {
    request.setRequestHeader("Authorization", ticket);
}

Answer 1

After much debugging of minified code I have found that the ej.DataManager constructor does accept a headers property, but requires a list of objects and uses each of the properties of each of those objects as HTTP headers. So the following code will include the header you are looking for:

var dataManager = ej.DataManager({
    url: "/api/app/imports/3",
    adaptor: new ej.WebApiAdaptor(),
    headers: [{
        Authorization: ticket
    }]
});