Reordering SlickGrid Columns Resets Column Header HTML

Question

I have a grid of data where we have added a filter icon to the header of each column after initializing the grid like so:

function selectHeaderIcon(searchActive){
        if (searchActive) {
            return "ui-icon-zoomin";
        } else {
            return "ui-icon-search";
        }
    }

function updateColumnHeader(searchActive){
        self.grid.updateColumnHeader(column.id, name + '<span class="ui-icon '+selectHeaderIcon(searchActive)+' slick-resizable-handle searchLink  ' + columnCss + '" ></span>', 'Search');
    }

I have also enabled column reordering on the grid. However, whenever I reorder the columns, my search icons disappear! I did some further testing in chrome debugger by manually adding text to change a column name as well as adding a random new span to the html. After reordering the columns, both changes disappeared. Is SlickGrid storing a different copy of my column headers somewhere instead of using what is displayed to do the reordering? If so, why? How do I get around this issue?

Mark Mark · Accepted Answer · 2012-02-01T19:34:08

It sounds like you need to subscribe to the onColumnsReordered event, something like the following:

GridName.onColumnsReordered.subscribe(function(e, args) {
    updateColumnHeader(searchActive);
});

Reordering SlickGrid Columns Resets Column Header HTML

1 Answers