Kendo Grid Column Width + Scrollable

我想綁定到一個可滾動的劍道網格從JavaScript和有幾個問題的列寬。這fiddle演示了這個問題（代碼在問題的最後）。我在html中指定了標題，併爲其中一個標題添加了一個寬度。然後javascript設置dataSource（在生產代碼中，這是通過ajax調用完成的）。Kendo Grid Column Width + Scrollable

我想避免設置columns.width財產，因爲

我有許多網格，由於我的ViewModels是精心構造能夠自動識別所需的所有列的JavaScript。我們的應用程序中有超過100個網格，並且必須指定所有這些網格列表將是笨拙的。
無論如何感覺不對，這是造型信息。

我明白，功能是由於kendo創建兩個網格，一個用於標題，一個用於滾動內容。然而，我在過去使用過的其他類似的控件庫一直在兩個網格之間複製樣式信息，以便於聲明樣式，同時保持兩個表同步 - 我只是不確定「kendo」是什麼，這是一種方式。從小提琴

<table> 
    <thead> 
     <th class="p20" data-field="status">Status</th> 
     <th data-field="description">Description</th> 
    </thead> 
</table>

的Javascript

$('table').kendoGrid({ 
    dataSource: [ 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' } 
    ], 
    scrollable: true 
});

CSS

.k-grid-content { 
    height: 100px; 
} 
.p20 { 
    width: 20%; 
}

來源

2013-07-09 Chris Meek

這裏

HTML與水平滾動條相當直截了當格（忽略虛擬化）http://demos.kendoui.com/web/grid/virtualization-remote-data.html。其寬度在網格或它的父和寬度與它們的和在實際電網寬度每一列，那麼你得到你的滾動條：

{ field: "OrderID", title: "Order ID", width: 60 },

已經在你的其他職位昨天回答： Column lines are not in sync in a Kendo grid

或者

http://jsfiddle.net/vojtiik/2ApvC/3/

注意我用的劍道位新版本和jQuery，那麼你做的。

來源

2013-07-09 08:31:18 Vojtiik

當然，這是可行的，但我想在標記中指定寬度而不是在javascript中。不得不爲每一個網格指定每一列的細節是一項繁重的任務，而且它是錯誤的地方（語義上講）是指定樣式。 –

是的，我後來才意識到你在說什麼，與昨天的問題有點不同。你打算如何處理文本/數值寬度超過20％的網格？你是否總是在列中顯示相同的數據。您可以根據需要設置所有列和標題的寬度，並部署省略號（「我的不完整值...」）以避免寬度/同步差異。 – Vojtiik

基本上，kendo將表格佈局設置爲「固定」用於可滾動網格（這非常令人討厭），這意味着我們的某些列太寬了。我們有幾列只是狀態指示器圖標，我想將它們設置爲只有幾個像素寬。其他所有的省略號，網格也設置爲可調整大小，並在必要時顯示水平滾動條（請參見天藍色管理門戶網站上有關這種功能類型的示例）。令人遺憾的是，劍道採用「兩格」方法，而不會讓消費者看不到複雜性 –

另一種選擇是使用具有樣式/類屬性的<colgroup/>和<col/>元素。

來源

2015-05-13 14:20:45 deepakjg

Kendo Grid Column Width + Scrollable

回答

相關問題