title: Slickgrid Rendering Problems in IE
body: <p>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.</p>
  
  <p>1.) I have a standard Slickgrid displaying a lot of data:</p>
  
  <p><img src="https://i.stack.imgur.com/x9zTI.gif" alt="Slickgrid working"></p>
  
  <p>Everything looks perfect (In IE9 too).</p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/H5V3L.gif" alt="enter image description here"></p>
  
  <p>That <em>seems</em> 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.</p>
  
  <p>If i change the width back to normal the problems are getting worse:</p>
  
  <p><img src="https://i.stack.imgur.com/FFpG8.gif" alt="enter image description here"></p>
  
  <p>It seems like the old (thinner) table style (or some parts of it) are still rendered in the table.</p>
  
  <p>And everytime i change now from thin to wide or back it will get worse:</p>
  
  <p><img src="https://i.stack.imgur.com/XG05x.gif" alt="enter image description here"></p>
  
  <p>In some part of my code i instanciate the table like this:</p>
  
  <pre><code>this.grid = grid = new Slick.Grid(this.el, dataView, columns, options);
  grid.setSelectionModel(new Slick.RowSelectionModel());
  </code></pre>
  
  <p>The grid is held in a module and this instanciation code is executed only <em>once</em> when the module is started.</p>
  
  <p>After that on that module there is a render method taking care of the grid:</p>
  
  <pre><code>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 &lt; 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 &gt;= 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 &lt; 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 &lt; data.length; d++){
          nextIndex = data[d].nextIndex ? data[d].nextIndex : nextIndex;
          for (r = 0, size = data[d].rows.length ; r &lt; size; r++) {
              var rowData = {};
              rowData.id = data[d].rows[r].key;
              for (v = 0; v &lt; 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 &gt; 0){                               
          this.trigger("retrieveNextPage", nextIndex);
      }
  
  }
  </code></pre>
  
  <p><em>EDIT</em>: Here's a jsfiddle to show the problem:</p>
  
  <p><a href="http://jsfiddle.net/EmSPU/26/" rel="nofollow noreferrer">http://jsfiddle.net/EmSPU/26/</a></p>
  
  <p>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.</p>
  
  <p>Again: All this is working in FF, Chrome and Safari like a charm!</p>
  
  <p>Any idea on this? Thanks in advance for reading this long question!</p>