如何以編程方式設置Kendo UI網格列寬度

我想以編程方式設置Kendo UI網格列寬度。我使用下面的代碼：如何以編程方式設置Kendo UI網格列寬度

function setColumnWidths(grid, options) { 
    for (var i = 0; i < options.columns.length; i++) { 
     grid.columns[i].width = options.columns[i].width; 
    } 
}

當語句執行後，在調試鉻，grid.columns [I] .WIDTH似乎被適當地設置爲新值，但是沒有在GUI變化，列寬度保持不變。我錯過了什麼？

來源

2015-05-10 g.pickardou

我這個結束。 Dion的解決方案讓我開始瞭解使用羣組，但是該解決方案僅限於沒有鎖定的列，不同的羣組中有什麼。

另外請注意：我不想用grid.setOptions，因爲它的侷限性，破壞附着事件和報頭（在使用ASP MVC助手來解析網格的情況下）

function setColumnWidths(grid, options) { 
    var lockedCount = 0; 
    for (var i = 0; i < options.columns.length; i++) { 
     if (options.columns[i].hasOwnProperty('locked')) { 
      if (options.columns[i].locked) { 
       lockedCount++; 
      } 
     } 
    } 

    for (var i = 0; i < options.columns.length; i++) { 
     var width = options.columns[i].width; 
     grid.columns[i].width = width; 
     if (options.columns[i].hasOwnProperty('locked') && options.columns[i].locked) { 
      $("#grid .k-grid-header-locked").find("colgroup col").eq(i).width(width); 
      $("#grid .k-grid-content-locked").find("colgroup col").eq(i).width(width); 

     } else { 
      $("#grid .k-grid-header-wrap").find("colgroup col").eq(i-lockedCount).width(width); 
      $("#grid .k-grid-content").find("colgroup col").eq(i - lockedCount).width(width); 
     } 
    } 
    // Hack to refresh grid visual state 
    grid.reorderColumn(1, grid.columns[0]); 
    grid.reorderColumn(1, grid.columns[0]); 
}

來源

2015-05-12 19:24:47

用於查找col的JQuery可能不再正確。我只需要做這樣的事情，我的結局就像這樣：$（「＃grid .k-grid-header .k-grid-header-wrap」）。find ... – Echostorm

您需要通過其元素而不是其定義來更改網格的寬度。 Kendo網格包含標題和內容，因此您需要更改兩個元素。

使用此代碼，而不是

$("#grid-id .k-grid-header-wrap").find("colgroup col").eq(xx).width(yy); 
$("#grid-id .k-grid-content").find("colgroup col").eq(xx).width(yy);

Sample

來源

2015-05-11 04:31:27

謝謝。我想我們有一個網格API和對象模型，而不是操縱HTML ...無論如何，它的工作原理。 –

提醒：請記住跳過隱藏的列，因爲它們沒有「col」標籤。這是如果你嘗試應用到所有列 – Gherman

如何以編程方式設置Kendo UI網格列寬度

回答

相關問題