Slickgrid - Header Row Filter

HTML

<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.dataview.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.core.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://6pac.github.io/SlickGrid/lib/firebugx.js"></script>

<script src="http://6pac.github.io/SlickGrid/lib/jquery-1.11.2.min.js"></script>
<script src="http://6pac.github.io/SlickGrid/lib/jquery-ui-1.11.3.min.js"></script>
<script src="http://6pac.github.io/SlickGrid/lib/jquery.event.drag-2.3.0.js"></script>

<script src="http://6pac.github.io/SlickGrid/slick.core.js"></script>
<script src="http://6pac.github.io/SlickGrid/slick.dataview.js"></script>
<script src="http://6pac.github.io/SlickGrid/slick.grid.js"></script>
<div id="myGrid" style="width:600px;height:500px;"></div>

JavaScript

var columns = [{
    id: "2",
    name: "ID",
    field: "id"
}, {
    id: "1",
    name: "Text",
    field: "someText"
}];

var options = {
    enableCellNavigation: true,
    editable: true,
    forceFitColumns: true,
    showHeaderRow: true,
    headerRowHeight: 30,
    explicitInitialization: true
};

var columnFilters = {};

var data = [{
    'id': 'IdOfEntry1',
    someText: 'Some Text',
    }, {
    'id': 'ADifferentId',
    someText: 'More Text'}
    ]

    function filter(item) {
        
        for (var columnId in columnFilters) {
            if (columnId !== undefined && columnFilters[columnId] !== "") {
                var c = grid.getColumns()[grid.getColumnIndex(columnId)];

                if (item[c.field].toLowerCase().indexOf(columnFilters[columnId]) != 0) {
                    return false;
                }
            }
        }
        return true;
    }


dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);

dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});


$(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
    var columnId = $(this).data("columnId");
    if (columnId != null) {
        columnFilters[columnId] = $.trim($(this).val());
        dataView.refresh();
    }
});

grid.onHeaderRowCellRendered.subscribe(function (e, args) {
    $(args.node).empty();
    $("<input type='text'>")
        .data("columnId", args.column.id)
        .val(columnFilters[args.column.id])
        .appendTo(args.node);
});

grid.init();

dataView.beginUpdate();
dataView.setItems(data);
dataView.setFilter(filter);
dataView.endUpdate();