I have an igGrid with the dataSource property set, but I can't find a way to add a custom HTTP Header.
For example, see below for my grid:
$("#GRIDUsers").igGrid({ columns: [ { headerText: "Options", key: "Options", dataType: "string", width: "100px", unbound: true, template: optionString }, { headerText: "ID", key: "ID", dataType: "string", hidden: true }, { headerText: "Effective Date", key: "EffectiveDate", dataType: "date", width: "130px" }, { headerText: "Frequency", key: "Frequency", dataType: "string", hidden: true }, { headerText: "Client", key: "ClientName", dataType: "string" }, { headerText: "Status", key: "Status", dataType: "string", width: "120px" }, { headerText: "Service", key: "ServiceType", dataType: "string", hidden: true }, { headerText: "Action", key: "ActionType", dataType: "string" }, { headerText: "Notes", key: "Notes", dataType: "string", template: "<p class='grid-fixed-row-height'>${Notes}</p>" }, { headerText: "Created By", key: "CreatedBy", dataType: "string" }, { headerText: "Created On", key: "CreatedTS", dataType: "date", width: "120px" } ], responseDataKey: "0.d", autoCommit: true, width: "auto", height: "400px", autoGenerateColumns: false, renderCheckboxes: true, primaryKey: "ID", dataSource: "https://mywebsite.com/api/Users" });
The problem is that my API is expecting an HTTP Header called "APIKey" with a string value such as "12345". How can I add this HTTP Header?
Hello Jack,
Thank you for posting in our forum.
Currently the grid’s ajax requests are not public and there’s no option out of the box to set custom headers to them.
As you don’t seem to have any remote features enabled and are simply binding the grid to a the data from a remote service, you could make your own ajax request with the necessary custom headers and bind the result data from the service directly to the grid. For example:
$.ajax({ url: url, headers: { "Custom": "Value" } }).done( function(data) { $("#grid").igGrid({ ... dataSource: data }); });
Let me know if you have any questions.
Regards,
Maya Kirova
I actually removed the "features" array from my grid to keep the example simple. I am using remote Filtering, Sorting and AppendRowsOnDemand.
Is it possible to do this?
In that case if this header should be added to all requests you could set it globally via ajaxSetup - https://api.jquery.com/jQuery.ajaxSetup/ . For example:
$.ajaxSetup({ headers: { "Custom" : "Value" } });
If it should be applied only to some requests on the page then you could use the beforeSend event (via the global ajax setup) and apply it selectively for requests where you need it.
$.ajaxSetup({ beforeSend: function( xhr ) { xhr.setRequestHeader("Custom", " Value ") } });
Let me know if that solves your issue.
Yes this did fix my problem.
I used $.ajaxSetup to add the header on dataBinding as follows:
dataBinding: function (evt, ui) { $.ajaxSetup({ beforeSend: function (xhr) { xhr.setRequestHeader("APIKey", APIKey) } }); }
Then I used $.ajaxSetup to remove the header on dataBound as shown below:
dataBound: function (evt, ui) { $.ajaxSetup({ beforeSend: function (xhr) { // do nothing } }); }
Thank you very much for your help.