剑道网格,水平滚动和列大小
Kendo Grid, Horizontal scrolling and column sizing
默认情况下,kendo网格将展开以填充其包含的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条目将开始被删除,搞乱一切。
我能做些什么来阻止这一切吗?有没有更好的方法来做我想做的事?
谢谢。
我有一个表的容器:
<div id="myWindow">
<div id="myGrid"></div>
</div>
,并应用以下样式:
#myWindow {
width: 400px;
overflow-x: scroll;
}
你可以看到我将宽度设置为400px,并隐藏(并滚动)溢出的部分。
然后定义以下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");
我得到的效果是网格水平溢出了它的容器的大小。
看它在这里运行
注意它甚至是好的是paging
保持为400px拟合总是在可见区域,而网格实际上是100 + 200 + 300 = 600
(columns
的width
)
EDIT:如果您希望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');
循环计算总宽度,然后将表设置为它(不需要更改列,因为它们是正确的)。
设置在这里
你只需要确保Grid是可滚动的,并设置创建Grid的元素的宽度。
<div id="myGrid" style='width:500px;'></div>
var grid = $("#myGrid").kendoGrid({
scrollable:true,
//...
})
相关文章:
- 如何创建一个具有固定左右列和水平滚动的表
- 通过水平滚动将页眉固定到页面顶部
- 水平视差滚动从头开始-没有插件(jQuery)
- 具有Twitter引导程序的水平滚动表
- 如何避免鼠标水平滚动选项卡面板溢出
- 使用鼠标滚轮水平滚动页面
- 水平滚动不适用于jquery单击
- 每次单击按钮时水平滚动元素
- 动画滚动100%(水平)
- 简单的一页水平滚动
- 移动浏览器-如何删除拖动到水平滚动
- 如何避免在自由jqgrid中单击单元格进行水平滚动编辑
- 网站水平滚动,但单独的页面
- 滚动水平幻灯片
- 单方向滚动:水平或垂直
- 垂直滚动.水平移动
- 背景颜色添加在特定的滚动水平
- 无限滚动水平向左
- Javascript滚动-水平和垂直-到页面上的特定位置
- 自动滚动水平链接跳转