EditableGrid - Using a JS array to filter

I have been using the EnditableGrid library for some time now, but I am stuck on this one part. I have a group of checkboxes, all with different values. when checked, those values go into a JS array.

ScreenShot of page

<td width="25%" align="left" valign="top">
<label for="shiftBox"><strong>Shifts:</strong> <span class="ie_practice"><?php echo '('.$totalRows_shifts.')'; ?></span></label>
<br />
<div id="shiftBox" class="checkBoxDiv lightgray_border">
<ul>
  <li hidden><input id="allShift" name="allShifts" type="checkbox" value="" checked="checked" />All Shifts</li>
<?php $sc = 1; mysql_data_seek($shifts, 0); while ($row_shifts = mysql_fetch_assoc($shifts)) { ?>
  <li><?php $shiftShort = $row_shifts['short_name']; ?><input id="shiftChkBx" name="shiftCheckBox" type="checkbox" value="<?php echo $row_shifts['shift_name']; ?>" onchange="shiftCheckBoxes();" /><?php echo $row_shifts['shift_name']; ?>
  <div id="count<?php echo $sc; ?>" class="ie_practice" style="display:inline;">
  <?php 
  mysql_select_db($database_connect_time_keeping, $connect_time_keeping);
   $shiftQuery = "SELECT COUNT(*) AS resultCount FROM `schedule` WHERE `shift_short_name` = '$shiftShort' AND `practice_id` = '$p'";
   $shiftCounts = mysql_query($shiftQuery, $connect_time_keeping) or die(mysql_error());
   $data = mysql_fetch_assoc($shiftCounts); 
   echo '- ('.$data['resultCount'].')'; 
   ?>
  </div>
  </li>
    <?php $sc++; } ?>
</ul>
</div>
</td>

function shiftCheckBoxes() {
  //SHIFT CHECKBOXES
  //create array
  var shiftArray = [];
  //add all checked checkboxes into the array
  $("input:checkbox[name=shiftCheckBox]:checked").each(function() {
    shiftArray.unshift($(this).val());
  });
  //convert the array to a string
  var shiftArrayFinal = shiftArray.join(',');
  //print stringarray to field to view formatting.
  document.getElementById('testField').innerHTML = shiftArrayFinal;
  if (typeof shiftArrayFinal != '') {
    //filter the grid using the array converted to a string
    timeGrid.filter(shiftArrayFinal);
    //encounterGrid.filter(shiftArrayFinal);
  }

}

That portion works fine. Now, when 2 or more checkboxes are checked, it stops displaying records in the grid(or maybe its not filtering). Below is the JS code for the filter. It does appear to be splitting the string up into the correct words, before filtering.

EditableGrid.prototype.filter = function(filterString, cols)
{
        with (this) {

                if (typeof filterString != 'undefined') {
                        this.currentFilter = filterString;
                        this.localset('filter', filterString);
                }

                // if filtering is done on server-side, we are done here
                if (serverSide) return setPageIndex(0);

                // un-filter if no or empty filter set
                if (currentFilter == null || currentFilter == "") {
                        if (dataUnfiltered != null) {
                                data = dataUnfiltered;
                                dataUnfiltered = null;
                                for (var r = 0; r < getRowCount(); r++) data[r].visible = true;
                                setPageIndex(0);
                                tableFiltered();
                        }
                        return;
                }               

                var words = currentFilter.toLowerCase().split(',');
                
                // work on unfiltered data
                if (dataUnfiltered != null) data = dataUnfiltered;

                var rowCount = getRowCount();
                var columnCount = typeof cols != 'undefined' ? cols.length  : getColumnCount();

                for (var r = 0; r < rowCount; r++) {
                        var row = data[r];
                        row.visible = true;
                        var rowContent = ""; 

                        // add column values
                        for (var c = 0; c < columnCount; c++) {
                                if (getColumnType(c) == 'boolean') continue;
                                var displayValue = getDisplayValueAt(r, typeof cols != 'undefined'  ? cols[c] :  c);
                                var value = getValueAt(r, typeof cols != 'undefined'  ? cols[c] : c);
                                rowContent += displayValue + " " + (displayValue == value ? "" : value + " ");
                        }

                        // add attribute values
                        for (var attributeName in row) {
                                if (attributeName != "visible" && attributeName != "originalIndex" && attributeName != "columns") rowContent += row[attributeName];
                        }

                        // if row contents do not match one word in the filter, hide the row
                        for (var i = 0; i < words.length; i++) {
                                var word = words[i];
                                var match = false;

                                // a word starting with "!" means that we want a NON match
                                var invertMatch = word.startsWith("!");
                                if (invertMatch) word = word.substr(1);

                                // if word is of the form "colname/attributename=value" or "colname/attributename!=value", only this column/attribute is used
                                var colindex = -1;
                                var attributeName = null;
                                if (word.contains("!=")) {
                                        var parts = word.split("!=");
                                        colindex = getColumnIndex(parts[0]);
                                        if (colindex >= 0) {
                                                word = parts[1];
                                                invertMatch = !invertMatch;
                                        }
                                        else if (typeof row[parts[0]] != 'undefined') {
                                                attributeName = parts[0];
                                                word = parts[1];
                                                invertMatch = !invertMatch;
                                        }
                                }
                                else if (word.contains("=")) {
                                        var parts = word.split("=");
                                        colindex = getColumnIndex(parts[0]);
                                        if (colindex >= 0) word = parts[1];
                                        else if (typeof row[parts[0]] != 'undefined') {
                                                attributeName = parts[0];
                                                word = parts[1];
                                        }
                                }

                                // a word ending with "!" means that a column must match this word exactly
                                if (!word.endsWith("!")) {
                                        if (colindex >= 0) match = (getValueAt(r, colindex) + ' ' + getDisplayValueAt(r, colindex)).trim().toLowerCase().indexOf(word) >= 0;
                                        else if (attributeName !== null) match = (''+getRowAttribute(r, attributeName)).trim().toLowerCase().indexOf(word) >= 0;
                                        else match = rowContent.toLowerCase().indexOf(word) >= 0; 
                                }
                                else {
                                        word = word.substr(0, word.length - 1);
                                        if (colindex >= 0) match = (''+getDisplayValueAt(r, colindex)).trim().toLowerCase() == word || (''+getValueAt(r, colindex)).trim().toLowerCase() == word; 
                                        else if (attributeName !== null) match = (''+getRowAttribute(r, attributeName)).trim().toLowerCase() == word; 
                                        else for (var c = 0; c < columnCount; c++) {
                                                if (getColumnType(typeof cols != 'undefined'  ? cols[c] : c) == 'boolean') continue;
                                                if ((''+getDisplayValueAt(r, typeof cols != 'undefined'  ? cols[c] : c)).trim().toLowerCase() == word || (''+getValueAt(r, typeof cols != 'undefined'  ? cols[c] : c)).trim().toLowerCase() == word) match = true;
                                        }
                                }

                                if (invertMatch ? match : !match) {
                                        data[r].visible = false;
                                        break;
                                }
                        }
                }

                // keep only visible rows in data
                dataUnfiltered = data;
                data = [];
                for (var r = 0; r < rowCount; r++) if (dataUnfiltered[r].visible) data.push(dataUnfiltered[r]);

                // refresh grid (back on first page) and callback
                setPageIndex(0);
                tableFiltered();
        }
};

I must be missing something. I have created it this way because the data being selected isn't going to be the same every time, and the data populating the checkboxes are not static either. The checkboxes are created dynamically with data from the mysql db.