Slickgrid Rendering Problems in IE

Question

I habe a rendering Problem with Slickgrid in IE9. (As allways all other browsers are working fine). It's a bit hard to explain so i took some screenshots.

1.) I have a standard Slickgrid displaying a lot of data:

Everything looks perfect (In IE9 too).

What i implemented is that when the overall width of the table goes under 600px it will change its display style. I changed the column model to two columns and implemented formatters for this columns myself. If i make the grid smaller it looks like this:

That seems okay but they should look all like the first entry (as they do in any other browser). And the next thing i notice is that some of the entries are "bolder" than others. It seems like they are drawn twice or something.

If i change the width back to normal the problems are getting worse:

It seems like the old (thinner) table style (or some parts of it) are still rendered in the table.

And everytime i change now from thin to wide or back it will get worse:

In some part of my code i instanciate the table like this:

this.grid = grid = new Slick.Grid(this.el, dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());

The grid is held in a module and this instanciation code is executed only once when the module is started.

After that on that module there is a render method taking care of the grid:

render : function() {

    var data = this.model.get('data'),      
        dataView = this.options.dataView,
        columns = [],
        tableData = [],
        columnModel = data[0].columnModel ? data[0].columnModel : null,
        k, r, u, v, d;              
        //renderMode 0 = wide, 1 = compact
    if(this.renderMode === 0){
        this.grid.setOptions({
            rowHeight: this.grid.otrStandardRowHeight
        });
        //is there a columnModel received from the server?
        if(columnModel != null){
            var modelColumns = columnModel.columns;
            /* go through the columns of the columnModel and find the corresponding column
             * in the data columns to keep the order of the columnModel. Also add the column width. 
             * */
            for (u = 0; u < modelColumns.length; u++){
                //get the index of the modelColumn's field value inside the data columns array
                var idx = $us.indexOf(data[0].columns.keys, modelColumns[u].field);
                if(idx >= 0){
                    columns.push( {
                        otrColumnIndex : idx + 1,
                        id : data[0].columns.keys[idx],
                        field : data[0].columns.keys[idx],
                        name : data[0].columns.labels[idx],
                        width: modelColumns[u].width,
                        sortable : true
                    } );
                }
            }
        }else{
            //if there is no column model add all columns in the order they arrive
            for (k = 0, size = data[0].columns.keys.length; k < size; k++) {                
                columns.push( {
                    otrColumnIndex : k + 1,
                    id : data[0].columns.keys[k],
                    field : data[0].columns.keys[k],
                    name : data[0].columns.labels[k],
                    sortable : true
                } );
            }
        }                       
    }else if(this.renderMode === 1){            
        this.grid.setOptions({
            rowHeight: 78
        });
        columns.push({id: "dataCell",
                      name: "Beschreibung",
                      formatter: this.getRenderFunction(data, 0),
                      width: 300,
                      cssClass: "compactCell",},
                      {id: "dateCell",
                       name: "Datum",
                       width: 150,
                       formatter: this.getRenderFunction(data, 1),
                       cssClass: "compactCell"} 
                     );

    }

    //add rowdata to the table  
    var nextIndex = 0;
    for(d = 0; d < data.length; d++){
        nextIndex = data[d].nextIndex ? data[d].nextIndex : nextIndex;
        for (r = 0, size = data[d].rows.length ; r < size; r++) {
            var rowData = {};
            rowData.id = data[d].rows[r].key;
            for (v = 0; v < data[d].rows[r].values.length; v++) {
                rowData[data[d].columns.keys[v]] = data[d].rows[r].values[v];               
            }
            tableData.push(rowData);
        }
    }


    this.grid.setColumns(columns);
    //this.grid.setData(tableData);
    dataView.beginUpdate();
    dataView.setItems(tableData);
    dataView.endUpdate();       
    var range = this.grid.getRenderedRange();
    var viewport = this.grid.getViewport();
    var diff = viewport.bottom - range.bottom;

    //if there is more space to fill with rows, retrieve the next page
    if(diff > 0){                               
        this.trigger("retrieveNextPage", nextIndex);
    }

}

EDIT: Here's a jsfiddle to show the problem:

http://jsfiddle.net/EmSPU/26/

It wasn't that easy to isolate the problem from the actual application so you have to hit the "switchMode" button which does exactly the same as a resize event would do in the application.

Again: All this is working in FF, Chrome and Safari like a charm!

Any idea on this? Thanks in advance for reading this long question!

Answer 1

The answer is painfully simple. There was a closing </p> tag missing in the custom formatter function. Which leeds to this effects in the IE because it cannot remove the old cells correctly. The other browsers are working correctly because they correct such errors themselves.