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

Question

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

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;
}

Answer 1

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

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

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版本。

Answer 2

我不知道逻辑在哪里，但是如果您首先初始化网格，那么它就可以工作的窗口...

这是Telerik Dojo中的示例