4

When using a fixed header row to implement column-level filters, how can I return cells with a partial match?

ie: search term: "omato"

returns: automator, tomato etc.

2 Answers 2

6

Under MyFilter in the example replace this loop...

for (var columnId in columnFilters) {
    if (columnId !== undefined && columnFilters[columnId] !== "") {
        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
        if (item[c.field] != columnFilters[columnId]) {
            return false;
        }
    }
}

with this..

for (var columnId in columnFilters) {
    if (columnId !== undefined && columnFilters[columnId] !== "") {
        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
        if (item[c.field].indexOf(columnFilters[columnId]) == -1) {
            return false;
        }
    }
}

Seems so obvious now :)

0

Here is the coffeescript code I use to acheive this:

filterGrid = (item) ->
    return true unless hasFilter
    grid.setSelectedRows([])
    columns = grid.getColumns()
    for columnId, filter of columnFilters
        if filter? 
            column = columns[grid.getColumnIndex(columnId)]
            field = item[column.field]
            return false unless (field? && field.toLowerCase().indexOf(filter.toLowerCase()) > -1) 
    return true

The line grid.setSelectedRows([]) just clears any selected rows before applying the filter. If you don't do this then the selected rows you see on-screen do not match the underlying selected rows.

More importantly the return true unless hasFilter line prevents any filtering work whilst the grid is loading, unless the user has actually typed into one of the boxes. I have found that this makes quite a difference to the performance of the grid when loading large datasets in batches of JSON data over http.

Here is the input box handler that sets the hasFilter flag:

$(grid.getHeaderRow()).delegate(':input', 'change keyup', (e) ->
    columnId = $(this).data('columnId')
    if columnId?
        columnFilters[columnId] = $.trim($(this).val())
        hasFilter = true
        dataView.refresh()
)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.