How can I get SlickGrid header filters to appear on grid load?

Question

I'm using MVC C#/Razor, my filtering works completely, the header inputs just don't appear when the page loads. I used the following snippet to set up the inputs:

    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);
    });

However, in order to get the inputs to appear, I need to reorder a column first. I'm assuming that the reorder column function is calling the onHeaderRowCellRendered function, which is then creating these inputs. My question is, why isn't the onHeaderRowCellRendered function getting called when the grid loads in the first place, and how can I get it to run when the grid is created, or alternatively, how can I just get the input text boxes to appear?

More code below:

    grid = new Slick.Grid("#versionGrid", filteredData, columns, options);
    $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
        var columnId = $(this).data("columnId");
        if (columnId != null) {
            columnFilters[columnId] = $.trim($(this).val());
            var localData = JSON.parse(JSON.stringify(slickdata));
            filteredData = filterData(columnFilters, localData);
            grid.setData(filteredData);
            $("#versionGrid").show();

        }
    });

    grid.autosizeColumns();
    $("#versionGrid").show();

    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);
    });

Answer 1

To achieve this I just call the filters creation code once by myself.

function appendFiltersCreators(e, sender){
    ...
}

$(function () {
    slickgrid.onColumnsReordered.subscribe(appendFiltersCreators);
    appendFiltersCreators(null, {"grid": slickgrid});
});

I use different event but it should work in Your case too.