What is preventing this search filter from updating the display?

Question

In attempt to use the search feature from SlickGrid example 4 (https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example4-model.html), in a modified grid with custom data, the dataView display does not change when typing in the search box.

The following appears to be working:

• The searchString variable updates properly within myFilter() when typing in the search box, and items from the correct column are passed.

• myFilter() shows to be defined when passed into the dataView.

Notes:

• if any item is selected, selection jumps to the first item on the grid which is deselected when typing if the text does not match the initially selected item

• the filter was modified to not be filtered by percentCompleteThreshold

Is this problem related to the components' scope?

Please note whether something else needs posting.

The starting line of each search component and wrapping function is noted below.

<span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel"
                                onclick="toggleFilterRow()"></span>

<div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;">
  Search: <input type="text" id="txtSearch2">
  <div style="width:100px;display:inline-block;"></div>
</div>


// line #'s paired with each search component

// 361: 
<script type="text/javascript"> // encapsulates all

// 901: var dataView;

// 1062: 
var searchString = "";

// 1348: 
function myFilter(item, args) {

  if (args.searchString != "" && item["file_name"].indexOf(args.searchString) == -1) {
    return false;
  }

  return true;
}


// 1379:
    function toggleFilterRow() {
         grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
        }

// 1632: 
jQuery(document).ready(function() { … // ends at line 2556


// 1841: getJSON call
// 2000: grid is created and its data retrieved
grid = new Slick.Grid("#myGrid", data, columns, options);

// 2029:
dataView = new Slick.Data.DataView({ inlineFilters: true });

// 2035:
// move the filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
    .appendTo(grid.getTopPanel())
    .show();

// 2462:
$("#txtSearch2").keyup(function (e) {
        Slick.GlobalEditorLock.cancelCurrentEdit();

        // clear on Esc
        if (e.which == 27) {
          this.value = "";
        }

        searchString = this.value;
        updateFilter();
      });
      $("#txtSearch2").click(function (e) {
          inSearchBox = true;
      });

      function updateFilter() {
        dataView.setFilterArgs({
          searchString: searchString
        });
        dataView.refresh();

      }


// 2502:
dataView.beginUpdate();
dataView.setItems(data);

dataView.setFilterArgs({
          searchString: searchString
      });
dataView.setFilter(myFilter);
dataView.endUpdate();


   }); // 2517: ends getJSON call

}); // 2556: ends jQuery(document).ready call

Answer 1

The dataView is not being updated because 'data' is passed into the grid initialization call instead of dataView.