如何在kendo ui网格中启用滚动条

时间:2016-04-16 20:24:30

标签: kendo-ui

我创建了一个带有网格的剑道窗口。我想只在网格上创建一个滚动条,而不是在kendo窗口上创建。我无法在网格上创建滚动条。 请为我提出适当的解决方案。

HTML part is as follows :
<html>
<body>
<div id = "mywindow">
<h1>Work Order</h1>
<div id="grid"></div>  
</div>  
<a href="#" id="btnGO">Go</a>
</body>
</html>

javascript部分如下:

$(document).ready(function () {[screenshot for error in scrollbar][1]
jQuery('#mywindow').kendoWindow({
width:300,
height:400,
animation: false,
autoFocus: true,
visible:false,
resizable : false
});
$('#btnGO').click(function(){
$('#mywindow').data('kendoWindow').center().open();
});
$("#grid").kendoGrid({
height : 100,
selectable: "multiple cell",
allowCopy: true,
columns: [
{ field: "student", title: "student"},
{ field: "student", title:"Mins"}
],
scrollable : true,
dataSource : [
{student: 10,mins: 120},
{student: 11,mins:100},
{student: 12,mins: 90},
{student: 12,mins: 90},
{student: 12,mins: 90},
{student: 12,mins: 90},
{student: 12,mins: 90},
{student: 12,mins: 90},
{student: 12,mins: 90},
{student: 12,mins: 90}
]
});

$('#grid .k-grid-content').scroll(function () 
{ alert('I am scrolling ...');               });
});

css部分如下:

.k-window  div.k-window-content
{
overflow: hidden;
}

2 个答案:

答案 0 :(得分:0)

假设您想让剑道网格填充<H1>之后的剑道窗口的其余部分。

添加一个窗口activate事件处理程序,该事件处理程序将计算网格的高度。所需的高度为height of containing parent-top position of grid。注意:包含父项是窗口的内容。

jQuery('#mywindow').kendoWindow({
  ... ,
  activate: function (e) {
    var H = $("#grid").offsetParent().height(); // height of containing parent in which grid is placed
    var T = $("#grid").position().top; // top of grid relative to containing parent
    $("#grid").getKendoGrid().setOptions ({height: H-T});        
  },
  ...
});

其他一切都是自动的,您的网格将具有滚动条。

此外,在问题代码中,错误地指定了其中一列:

  { field: "student", title:"Mins"}

如果应该是

  { field: "mins", title: "Mins"}

如果仍然有问题,请向该问题添加更多信息,例如Kendo版本,浏览器和版本,jQuery版本。

答案 1 :(得分:-1)

我不知道逻辑在哪里,但如果你首先初始化网格,那么它的工作窗口......

以下是Telerik Dojo

中的示例