劍道網格，水平滾動和列大小

默認情況下，劍道網格將展開以填充其包含的div。它只是一個表格元素，所以本質上。劍道網格，水平滾動和列大小

<table role="grid"> 
<colgroup> 
<col style="width:200px"> // etc 
<colgroup> 
<thread> 
// content 
</thread> 
</table>

但是，當您添加更多列（或有太多）時，它們會來回縮放以適合。我想在溢出時使用水平滾動條。

爲此，我添加了一些在啓動，添加和重新排序時運行的代碼。

this._initWidths = function() { 
    var totalWidth = 0; 
    for (var i = 0; i < grid.columns.length; i++) { 
     var width = grid.columns[i].width; 
     $('#myGrid .k-grid-header-wrap colgroup col').eq(i).css('width', width + 'px'); 
     $('#myGrid .k-grid-content colgroup col').eq(i).css('width', width + 'px'); 
     totalWidth = totalWidth + width; 
    } 
    table.css('width', totalWidth + 'px'); 
    };

然而劍道似乎有自己的邏輯，碰到這個。 Colgroup條目將開始被刪除，搞亂了一切。

我能做些什麼來阻止它？有沒有更好的方式去做我想要的？

謝謝。

來源

2013-01-16 Tim

我對錶作爲容器：

<div id="myWindow"> 
    <div id="myGrid"></div> 
</div>

並應用以下樣式：

#myWindow { 
    width: 400px; 
    overflow-x: scroll; 
}

在這裏你可以看到，我強迫寬度400像素和隱藏（和滾動）什麼溢出。

然後我定義以下grid：

var grid = $("#myGrid").kendoGrid({ 
    dataSource : { 
     data : entries, 
     schema : { 
      model: { 
       id: "city" 
      } 
     }, 
     pageSize: 5 
    }, 
    columns : [ 
     { field: "city", title: "City", width: 100 }, 
     { field: "time", title: "Time", format: "{0:HH:mm}", width: 200}, 
     { field: "datetime", title: "Date - Time", format: "{0:yyyy-MM-dd HH:mm}", width: 300 } 
    ], 
    sortable : { 
     mode  : "single", 
     allowUnsort: false, 
     field  : "city" 
    }, 
    editable : "popup", 
    navigatable: true, 
    pageable : true 
}).data("kendoGrid");

我得到電網水平溢出其容器的大小的影響。

看到它運行here

注意甚至有不錯的那是什麼paging住宿爲400像素始終安裝於可視區域，而電網實際上是100 + 200 + 300 = 600（該columns的width）

編輯：如果你想grid的width與columns的總和相同，那麼你應該添加（初始化網格後）。

var totalWidth = 0; 
for (var i = 0; i < grid.columns.length; i++) { 
    var width = grid.columns[i].width; 
    totalWidth = totalWidth + width; 
} 
grid.element.css('width', totalWidth + 'px');

該循環計算總寬度，然後我將它設置爲它（不需要更改列，因爲它們是正確的）。

將其設置here

來源

2013-01-16 18:14:05 OnaBai

好的，謝謝這是我想要的一半。如果欄寬非常短，我怎樣才能防止劍道擴張以填充空間？假設你將時間降到50，日期時間降到100.劍道會擴展它們。我怎麼能阻止呢？再次感謝。 – Tim

請參閱**編輯**基本上是你在'for'循環中做了什麼，但稍微簡化了一下。 – OnaBai

讓我知道它是否無效！ – OnaBai

你只需要確保電網是滾動並設置從中創建網格元素的寬度。

<div id="myGrid" style='width:500px;'></div> 

var grid = $("#myGrid").kendoGrid({ 
    scrollable:true, 
    //... 
})

Here它在行動中。

來源

2013-01-16 22:08:46

「可滾動」的默認值不是「true」嗎？你爲什麼把它作爲答案的一部分？在你的回答中，唯一重要的是定義包含表格的'div'的寬度。 – OnaBai

@OnaBai快速瀏覽Kendo文檔會產生大量關於'scrollable'的警告：「默認情況下，除了部件MVC包裝器」。這是一個很好的提醒，並不總是依賴於違約，而且無論如何，在回答中明確地設置它有什麼危害？ – ProfK

@ProfK，我的評論是因爲初始化某些東西到默認值不應該解決問題。如果問題得到解決，實際上是因爲別的。在這種情況下，解決問題的方法是使用「div」來包含網格，這是我以前的答案（及時）已經包含的內容。 – OnaBai

劍道網格，水平滾動和列大小

回答

相關問題