JSGrid Dependent Filters

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="sort-panel">
  <label>
    Sort By:
    <select id="sortingField">
      <option>IdNumber</option>
      <option>Description</option>
    </select>
    <button type="button" id="sort">Sort</button>
  </label>
</div>

<div class="sort-panel">
  <label>
    Search by:
    <select id="searchField">
      <option>IdNumber</option>
      <option>Description</option>
    </select>
    <input name="searchData" type="text" id="searchData" />
    <button type="button" id="search">Search</button>
  </label>
</div>
<div id="docstypes"></div>

CSS

.sort-panel {
  padding: 10px;
  margin: 10px 0;
  background: #fcfcfc;
  border: 1px solid #e9e9e9;
  display: inline-block;
}

JavaScript

var docstypes = [{
  "id": 1,
  "IdNumber": "1",
  "Description": "Driver's License"
}, {
  "id": 2,
  "IdNumber": "2",
  "Description": "SSN"
}, {
  "id": 3,
  "IdNumber": "3",
  "Description": "Passport"
}];

function loadData(filter) {

  /* i need to filter this function */

  //var data = $.Deferred();
  //$.ajax({
  //    type: "GET",
  //    url: "/api/DocsTypes/",
  //    async: false
  // }).done(function (response) {
  //    data.resolve(response);
  // });
  // var result = data.promise();
  var result = $.grep(docstypes, function(item) {
  	return !filter.id || filter.id == item.id;
  });;
  return result;
}



var fields = [{
  name: "IdNumber",
  title: "Id Number",
  type: "text",
  width: 50,
  sorting: true,
  validate: {
    message: "You must enter a valid code",
    validator: function(value) {
      return value > 0;
    }
  }
}, {
  name: "Description",
  title: "Description",
  type: "text",
  width: 150
}, {
  type: "control"
}];

$("#docstypes").jsGrid({
  height: "auto",
  width: "100%",

  filtering: false,
  inserting: true,
  editing: true,
  sorting: true,
  paging: true,
  pageSize: 10,
  pageButtonCount: 5,
  controller: {
    loadData: loadData
      //[...]
  },
  fields: fields
});


$("#sort").click(function() {
  var field = $("#sortingField").val();
  $("#docstypes").jsGrid("sort", field);
});


//I don't know what to do to filter when i click button?
$("#search").click(function() { 
	$("#docstypes").jsGrid("search", {
  	id: $("#searchData").val()
  })
});