title: Dynamic resize of kendo grid column not proper in IE10
body: <p>I am trying to resize the kendo grid column using a popup. It works well in all browsers except IE10. The header columns won't resize along with content columns in the grid.</p>
  
  <p>I have created a sample. The difference can be seen when we run it on IE 10 and chrome</p>
  
  <p><a href="http://jsfiddle.net/pavancbz1/6LFYM/4/" rel="nofollow noreferrer">http://jsfiddle.net/pavancbz1/6LFYM/4/</a></p>
  
  <p>The sample has a grid with 3 columns. The column indexes can be 0,1,2 in the pop up to resize the respective column.</p>
  
  <pre><code>   $(document).ready(function() {
          var window = $("#window"),
              undo = $("#undo")
                      .bind("click", function() {
                          window.data("kendoWindow").open();
                          undo.hide();
                      });
  
          var onClose = function() {
              undo.show();
          }
  
          if (!window.data("kendoWindow")) {
              window.kendoWindow({
                  width: "280",
                  title: "Pop up",
                  actions: [
                     "Minimize",
                      "Maximize",
                      "Close"
                  ],
                  close: onClose
              });
          }
            $("#grid").kendoGrid({
              dataSource: {
                  transport: {
                      read: {
                          url: "http://demos.kendoui.com/service/Products",
                          dataType: "jsonp"
                      }
                  },
                  pageSize: 5,
  
              },
              selectable: "multiple row",
              pageable: {
                  buttonCount: 5
              },
              scrollable: true,
              groupable: false,
               resizable: true,
              columns: [
                  {
                      field: "ProductName",
                      width: 'auto',
                      title: "Product Name"
                  },
                  {
                      field: "UnitPrice",
                      width: 'auto',
                      title: "Unit Price",
                      format: "{0:c}"
                  },
                  {
                      field: "UnitsInStock",
                      width: 'auto',
                      title: "Units In Stock"
                  }
              ]
          });
           var IncreaseWidth = function (e) {
              if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                  var grid = $("#grid"),
                          Index = $("#index").val(),
                          tablewidth = grid.find('table').width();
                          grid.find('table').width(tablewidth+20);
                           columnwidth = grid.find('colgroup:first').find('col:eq(' + Index + ')').width();
                            grid.find('colgroup').find('col:eq(' + Index + ')').width(columnwidth+20);
  
              }
          },
              DecreaseWidth = function (e) {
                  if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                     var grid = $("#grid"),
                          Index = $("#index").val(),
                          tablewidth = grid.find('table').width();
                          grid.find('table').width(tablewidth-20);
                           columnwidth = grid.find('colgroup:first').find('col:eq(' + Index + ')').width();
                            grid.find('colgroup').find('col:eq(' + Index + ')').width(columnwidth-20);
                  }
              };
  
  
          $(".Increase").click(IncreaseWidth);
  
          $(".Decrease").click(DecreaseWidth);
  
  
      });
  
  </code></pre>
  
  <p>Any solutions to this problem ?</p>