在IE10中不適合的劍道網格列的動態調整大小

我正在嘗試使用彈出框來調整劍道網格列的大小。除了IE10以外，它在所有瀏覽器中運行良好。標題列不會隨網格中的內容列一起調整大小。在IE10中不適合的劍道網格列的動態調整大小

我已經創建了一個示例。當我們在IE 10運行它，鉻

的樣品具有3列的網格的差異就可以看出。彈出的列索引可以是0,1,2以調整相應列的大小。 $（document）.ready（function（）{ var window = $（「＃window」）， undo = $（「＃undo」） .bind（「click」，function（）{ window.data （「kendoWindow」）開（）; 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); 


      });

對這個問題的任何解決方案

來源

2013-07-19 user2600461

對於有類似問題的人，這裏的快速解決辦法我用處理列大小調整問題

該問題的關鍵觀察是，一旦用戶手動調整列，網格列將會重新對齊。

因此，在我的解決方法中，我基本隱藏並顯示第一列，並強制網格列重新調整大小並自動重新對齊列。在網格收到所有數據後，列必須重新調整大小。我使用amplify進行自定義消息傳遞，但只要代碼能夠在收到數據後自動強制在網格上重新調整列大小，那麼實現細節並不重要。

例如，

var dataSource = new kendo.data.DataSource({ 
      type: 'json', 
      transport: { 
       read: config.AppBasePath + '/Home/GetSomething', 
       parameterMap: function (data, type) { 
        if (type == 'read') { 
         return { 
          id: messageId 
         }; 
        } 
       } 
      }, 
      pageSize: 10, 
      requestEnd: function (e) { 
       amplify.publish(config.Messages.ShowWindowComplete); 
      } 
     }),   

    .... 


    amplify.subscribe(config.Messages.ShowWindowComplete, function() { 
     messageHistoryKendoGridElem.data('kendoGrid').hideColumn(1); 
     messageHistoryKendoGridElem.data('kendoGrid').showColumn(1); 
    });

希望誰正面臨着類似的問題，這幫助任何人。

來源

2013-10-29 18:05:45 parkjs972

在IE10中不適合的劍道網格列的動態調整大小

回答

相關問題