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:
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!
