title: dxDataGrid - Use column header filter with CustomStore
body: <p>I use devexpress and headerFilter option having a problem when select some options from dropdown and do OK :
  The header filter doesn't pass the selected value to the loadOptions object and it works if I replace lookup with headerFilter but I DON't want lookUp.</p>
  
  <p>Basically I want to call another api for loading Data in headerFilter</p>
  
  <p>here is my code:</p>
  
  <pre><code>    var store = new DevExpress.data.CustomStore({
          key: "ID",
          load: function (loadOptions) {// loadOptions does not contains the selected value
              var d = $.Deferred(),
                  params = {};
              [
                  "sort", 
                  "filter"
              ].forEach(function(i) {
                  if(i in loadOptions &amp;&amp; isNotEmpty(loadOptions[i])) 
                      params[i] = JSON.stringify(loadOptions[i]);
              });
              $.getJSON(dataTable.replace("{numberOfRow}", loadOptions.take).replace("{page}", (loadOptions.skip / loadOptions.take) + 1), params)
          .done(function (result) {
              d.resolve(result.UserTasks, {
                  totalCount: result.Count
              });
          });
              return d.promise();
          }
      });
      opt = {
          dataSource: store,
          remoteOperations: { filtering: true, sorting: true, paging: true, grouping: false },
          showBorders: true,
          allowColumnReordering: true,
          rowAlternationEnabled: true,
          filterRow: {
              visible: true,
              applyFilter: "auto"
          },
          searchPanel: {
              visible: true,
              width: 240,
              placeholder: "Search..."
          },
          headerFilter: {
              visible: true
          },
          paging: {
              pageSize: 10
          },
          pager: {
              showPageSizeSelector: true,
              allowedPageSizes: [10, 20, 30],
              showInfo: true
          },
          columns: [{
          dataField: "Title",
          dataType: "string",
          caption:idea,
              width:180,
              //allowFiltering: false,
              //allowSearch: true,
              cellTemplate: function (element, info) {
                  url = url.replace("/Ideas/View", "/Ideas");
                  element.append("&lt;a class='view-task' href=" + url + "/" + info.data.ID + " data-task-id=" + info.data.ID + "&gt;" + info.data.Title + '-' + ideano + info.data.IdeaId + "&lt;/a&gt;");
              }
          },
          {
              dataField: "FormName",
              caption: form,
              dataType: "string",
              headerFilter: { //here its bringing all data properly
                  dataSource:{
                      store: new DevExpress.data.CustomStore({
                          key: "Id",
                          load: function (loadOptions,i) {
                              var d = $.Deferred(),
                                      params = {};
                              [
                                  "sort",
                                  "filter"
                              ].forEach(function (i) {
                                  if (i in loadOptions &amp;&amp; isNotEmpty(loadOptions[i]))
                                      params[i] = JSON.stringify(loadOptions[i]);
                              });
                              $.getJSON(filterDataTable.replace("{filter}", form).replace("{numberOfRow}", loadOptions.take).replace("{page}", (loadOptions.skip / loadOptions.take) + 1), params)
                                  .done(function (result) {
                                      d.resolve(result.Items);
                                  });
                              return d.promise();
                          }
                      })
                  }
              }
          }]
      }
      $("#gridContainer").dxDataGrid(opt).dxDataGrid("getDataSource");
  </code></pre>