title: Using basic authentication with SyncFusion ej.DataManager
body: <p>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 <a href="https://help.syncfusion.com/js/grid/data-binding#remote-data" rel="nofollow noreferrer">examples</a> seem sparse.</p>
  
  <p>I've got some examples below of what I've tried. Given the following setup code:</p>
  
  <pre><code>var ticket = "Basic " + Base64.encode("username:password");
  
  $('#Grid').ejGrid({
      dataSource: dataManager,
      allowPaging: true,
      columns: ["AccountName", "CompanyName"]
  });
  </code></pre>
  
  <p>This code brings up chrome basic auth prompt:</p>
  
  <pre><code>var dataManager = ej.DataManager({
      url: "/api/app/imports/3",
      adaptor: new ej.WebApiAdaptor()
  });
  </code></pre>
  
  <p>This code brings up chrome basic auth prompt.</p>
  
  <p>Attempted because there is a "headers" object used in data.min.js</p>
  
  <pre><code>var dataManager = ej.DataManager({
      url: "/api/app/imports/3",
      adaptor: new ej.WebApiAdaptor(),
      headers: {
          Authorization: ticket
      }
  });
  </code></pre>
  
  <p>This code errors: Uncaught TypeError: this.adaptor.processQuery is not a function</p>
  
  <p>Attempted due to <a href="https://www.syncfusion.com/forums/117024/does-datamanager-support-odata-v4" rel="nofollow noreferrer">https://www.syncfusion.com/forums/117024/does-datamanager-support-odata-v4</a></p>
  
  <pre><code>var dataManager = ej.DataManager({
      url: "/api/app/imports/3",
      adaptor: new ej.WebApiAdaptor().extend({
          beforeSend: function() {
              request.setRequestHeader("Authorization", ticket);
          }
      })
  });
  </code></pre>
  
  <p>This code brings up chrome basic auth prompt:</p>
  
  <pre><code>var dataManager = ej.DataManager({
      url: "/api/app/imports/3",
      adaptor: new ej.WebApiAdaptor(),
      beforeSend: function() {
          request.setRequestHeader("Authorization", ticket);
      }
  });
  </code></pre>
  
  <p>This code brings up chrome basic auth prompt:</p>
  
  <pre><code>var dataManager = ej.DataManager({
      url: "/api/app/imports/3",
      adaptor: new ej.WebApiAdaptor()
  });
  
  dataManager.dataSource.beforeSend = function() {
      request.setRequestHeader("Authorization", ticket);
  }
  </code></pre>