如何在Kendo网格中启用或禁用滚动条?

时间:2013-12-31 09:22:22

标签: javascript html kendo-ui kendo-grid

这是我创建网格的代码:

@{
    if (Model.GenericEntityList.Count > 0)
    {
        @(Html.Kendo().Grid(Model.GenericEntityList).Name(screenNames.ToString()).Columns(
              columns =>
                  {
                      columns.Bound(a => a.ID).Title("<input id='checkAll' type='checkbox' />").ClientTemplate("<input type='checkbox' id=#=genericCheckbox(ID,ViewFlag)#").Width(7);
                      columns.Bound(a => a.Name).Title(screen.ToString() + " Name").Width(93);
                  }
              ).Selectable().Scrollable().DataSource(
                  datasource =>
                  datasource.Ajax().Read(read => read.Action("CompSetHide", "Compset"))
              ).Events(a => a.Change("rowclick")
              )
              .HtmlAttributes(new {style = "height: 185px;"}) 
              )
    }
}

如何禁用并启用自动出现在kendo网格内的垂直滚动条?

5 个答案:

答案 0 :(得分:10)

您可以使用类似的内容来显示垂直滚动条:

$("#grid .k-grid-content").css({
    "overflow-y": "scroll"
});

这是为了隐藏它:

$("#grid .k-grid-content").css({
    "overflow-y": "hidden"
});

其中grid是网格元素的ID。

答案 1 :(得分:1)

您可以添加 .Scrollable(scrollable =&gt; scrollable.Virtual(true))

@{
if (Model.GenericEntityList.Count > 0)
{
    @(Html.Kendo().Grid(Model.GenericEntityList).Name(screenNames.ToString()).Columns(
          columns =>
              {
                  columns.Bound(a => a.ID).Title("<input id='checkAll' type='checkbox' />").ClientTemplate("<input type='checkbox' id=#=genericCheckbox(ID,ViewFlag)#").Width(7);
                  columns.Bound(a => a.Name).Title(screen.ToString() + " Name").Width(93);
              }
          )
.Selectable()
.Scrollable(scrollable => scrollable.Virtual(true))
.DataSource(
              datasource =>
              datasource.Ajax().Read(read => read.Action("CompSetHide", "Compset"))
          ).Events(a => a.Change("rowclick")
          )
          .HtmlAttributes(new {style = "height: 185px;"}) 
          )
}
}

答案 2 :(得分:1)

使用k-scrollable属性

<kendo-grid k-scrollable="false" ... />

答案 3 :(得分:1)

CSS下面应该解决问题并删除http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#scrolling所述的垂直滚动。

#GridID .k-grid-header
{
   padding: 0 !important;
}

#GridID .k-grid-content
{
   overflow-y: visible;
}

答案 4 :(得分:0)

如果您使用的剑道网格每行都有嵌套的剑道网格并进行虚拟滚动(使用角度5) 情况1:展开后,滚动跳过最后一个计数。

sol:在父网格中使用[detailRowHeight] =“ 36”