KendoUI網格欄autosizing

Question

我想創建一個網格，必須有自動調整大小的列（在一些限制內），其寬度不得超過父div的寬度。

我有4列：

 col1  col2 col3 col4 
------------------------------------------ 
| very long text | ... | ... | ... | 
|  ...  | ... | ... | ... | 
------------------------------------------ 

在第一列中的值非常長，所以我用造型：white-space: nowrap; text-overflow: ellipsis;文本停留在一行。我想col2爲105-170像素，col3 40-190px和col4 75-150px。我喜歡儘可能小，以避免出現巨大的空白。

我知道這樣的事情可以通過設置scrollable: true來實現，但我不需要滾動條，我真的不喜歡它如何坐在那裏沒有好用。

Answer 1

在玩過不同的選項和幾個小時的搜索之後，我決定使用一個不那麼優雅的解決方案，但是我已經實現了我在尋找的東西。如果有人面臨着類似的問題，這裏是我做過什麼：

• 當DOM負載（jQuery的$(document).ready(...)或$(...)），我調用代碼刪除右邊的.k-grid-headerpadding-right和刪除的.k-grid-contentoverflow-y。

我使用的代碼：

// jQuery code 
$(".k-grid-header").css("padding-right","0"); 
$(".k-grid-content").css("overflow-y","initial"); 

// JS (without jQuery) equivalent 
var gridHeaders = document.querySelectorAll(".k-grid-header"); 
for (var i = 0, element; element = gridHeaders[i++];) 
    element.paddingRight = "0"; 

var gridContent = document.querySelectorAll(".k-grid-content"); 
for (var i = 0, element; element = gridContent [i++];) 
    element.overflowY = "initial";