title: jQuery Grid error on 2nd filter: Uncaught TypeError: Cannot read property 'value' of undefined
body: <p>I'm using jQWidgets v3.8.0 (2015-Apr) version to take some JSON from my database and display it. However, when I filter for example <code>role_id</code> it works fine. If I filter the same column for the 2nd time, I get this error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'value' of undefined
  a.extend._addfilterwidget @ jqx-all.js:7
  a.extend._updatefilterrow @ jqx-all.js:7
  b.extend._rendercolumnheaders @ jqx-all.js:7
  b.extend.rendergridcontent @ jqx-all.js:7
  b.extend._render @ jqx-all.js:7
  b.extend.databind.dataview.update @ jqx-all.js:7
  b.jqx.dataview.databind.z @ jqx-all.js:7
  b.jqx.dataview.databind.k @ jqx-all.js:7
  i.jqx.dataAdapter.callDownloadComplete @ jqx-all.js:7
  i.jqx.dataAdapter.dataBind.xhr.i.jqx.data.ajax.success @ jqx-all.js:7
  n.Callbacks.j @ jquery-2.1.1.js:2
  n.Callbacks.k.fireWith @ jquery-2.1.1.js:2
  S @ jqx-all.js:7
  i.jqx.data.ajaxTransport.send.H @ jqx-all.js:7
  </code></pre>
  
  <p>Or when switching to separate files</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'value' of undefined
  a.extend._addfilterwidget @ jqxgrid.filter.js:584
  a.extend._updatefilterrow @ jqxgrid.filter.js:558
  b.extend._rendercolumnheaders @ jqxgrid.js:7
  b.extend.rendergridcontent @ jqxgrid.js:7
  b.extend._render @ jqxgrid.js:7
  b.extend.databind.dataview.update @ jqxgrid.js:7
  b.jqx.dataview.databind.z @ jqxgrid.js:7
  b.jqx.dataview.databind.k @ jqxgrid.js:7
  i.jqx.dataAdapter.callDownloadComplete @ jqxdata.js:7
  i.jqx.dataAdapter.dataBind.xhr.i.jqx.data.ajax.success @ jqxdata.js:7
  n.Callbacks.j @ jquery-2.1.1.js:2
  n.Callbacks.k.fireWith @ jquery-2.1.1.js:2
  S @ jqxdata.js:7
  i.jqx.data.ajaxTransport.send.H @ jqxdata.js:7
  </code></pre>
  
  <p>Does anyone have any idea what might cause this? Here's the function I'm using</p>
  
  <pre><code>function initJQGrid($grid, datafields, gridCols, url, editable) {
  var source = {
      datatype: "json",
      datafields: datafields,
      url: url,
      root: "data",
      cache: false,
      beforeprocessing: function (data) {
          source.totalrecords = data.params.filtered;
      },
      formatData: function (data) {
          var newData = {}, i = 0, columnData;
          var field = "", value = "", condition = "";
  
          newData["length"] = data.pagesize;
          newData["page"] = data.pagenum + 1;
  
          if (data.filterscount &gt; 0) {
              for (i = 0; i &lt; data.filterscount; i++) {
                  field = data["filterdatafield" + i];
                  value =  data["filtervalue" + i];
                  columnData = $grid.jqxGrid('getcolumn', field);
  
                  if (columnData.cellclassname == "satoshicell") value = parseFloat(value) * 100000000;
  
                  switch (data["filtercondition" + i]) {
                      case "EQUAL":
                          condition = "{val}";
                          break;
                      case "LESS_THAN":
                          condition = "&lt; {val}";
                          break;
                      case "GREATER_THAN":
                          condition = "&gt; {val}";
                          break;
                      case "LESS_THAN_OR_EQUAL":
                          condition = "&lt;= {val}";
                          break;
                      case "GREATER_THAN_OR_EQUAL":
                          condition = "&gt;= {val}";
                          break;
                      case "NULL":
                          condition = "IS NULL";
                          break;
                      case "NOT_NULL":
                          condition = "IS NOT NULL";
                          break;
                      case "CONTAINS_CASE_SENSITIVE":
                      case "CONTAINS":
                          condition = "LIKE \'%{val}%\'";
                          break;
                      case "DOES_NOT_CONTAIN_CASE_SENSITIVE":
                      case "DOES_NOT_CONTAIN":
                          condition = "NOT LIKE \'%{val}%\'";
                          break;
                      case "STARTS_WITH_CASE_SENSITIVE":
                      case "STARTS_WITH":
                          condition = "LIKE \'{val}%\'";
                          break;
                      case "ENDS_WITH_CASE_SENSITIVE":
                      case "ENDS_WITH":
                          condition = "LIKE \'%{val}\'";
                          break;
                      case "EMPTY":
                          condition = "LIKE \'\'";
                          break;
                      case "NOT_EMPTY":
                          condition = "NOT LIKE \'\'";
                          break;
                  }
  
                  if (newData.hasOwnProperty(field)) {
                      if (!$.isArray(newData[field])) {
                          newData[field] = [newData[field], condition.replace("{val}", value)];
                      } else newData[field].push(condition.replace("{val}", value));
                  } else newData[field] = condition.replace("{val}", value);
  
                  if (!newData.hasOwnProperty("mode")) newData["mode"] = [];
  
                  if (data.hasOwnProperty("filteroperator" + i)) {
                      if (data["filteroperator" + i] == 0) {
                          if ($.inArray("AND " + field, newData["mode"]) &lt; 0) newData["mode"].push("AND " + field);
                      }
                      else if (data["filteroperator" + i] == 1) {
                          if ($.inArray("OR " + field, newData["mode"]) &lt; 0) newData["mode"].push("OR " + field);
                      }
                  }
              }
          }
  
          if (data.hasOwnProperty("sortdatafield") &amp;&amp; data.sortdatafield != "") {
              newData["order"] = data.sortdatafield + " " + data.sortorder.toUpperCase();
          }
  
          return newData;
      },
      filter: function () {
          // update the grid and send a request to the server.
          $grid.jqxGrid("updatebounddata");
      },
      sort: function () {
          // update the grid and send a request to the server.
          $grid.jqxGrid("updatebounddata");
      }
  };
  
  if (typeof editable == "undefined" || editable == undefined) editable = false;
  
  var dataadapter = new $.jqx.dataAdapter(source);
  
  var width = 0;
  $.each(gridCols, function (k, v) { width += v.width; });
  if (width == 0) width = 1000;
  
  // initialize jqxGrid
  $grid.jqxGrid({
      theme: "theme",
      //rowsheight: 35,
      //width: width,
      showfilterrow: true,
      width: "100%",
      source: dataadapter,
      autoheight: true,
      pageable: true,
      virtualmode: true,
      filterable: true,
      sortable: true,
      columnsresize: true,
      editable: editable,
      selectionmode: "multiplecellsadvanced",
      pagesizeoptions: ["20", "50", "100", "500", "1000"],
      pagesize: 20,
      rendergridrows: function() { return dataadapter.records; },
      columns: gridCols
  });
  }
  </code></pre>
  
  <p>And calling it with: </p>
  
  <pre><code>initJQGrid($("#jqxgrid"), [
          {name: "id", type: "number"},
          {name: "email", type: "string"},
          {name: "first_name", type: "string"},
          {name: "last_name", type: "string"},
          {name: "role_id", type: "number"},
          {name: "created", type: "date"},
      ], [
          {
              text: "ID", datafield: "id", width: 50, pinned: true,
              cellsrenderer: function (row, column, value, defaulthtml, columnproperties) {
                  return '&lt;a href="/admin/users/view/' + value + '/" target="_blank"&gt;' + value + "&lt;/a&gt;";
              }
          },
          {text: "Email", datafield: "email", pinned: true, width: 250},
          {text: "First Name", datafield: "first_name", width: 100},
          {text: "Last Name", datafield: "last_name", width: 100},
          {text: "Role", datafield: "role_id", filtertype: "checkedlist", width: 50},
          {text: "Registered", datafield: "created", editable: false, filtertype: "date", width: 100, cellsformat: "dd.MM.yyyy HH:mm:ss"},
        ], "/admin/users.json", true
  );
  </code></pre>
  
  <p>I tried removing the ID field's <code>cellsrenderer</code>, and that didn't make a difference. Tried googling around, but still have no idea what might be causing this. It seems that the data source's <code>formatData</code> gets called fully, and the error happens some time after it.</p>