如何在剑道网格中自动启用或禁用滚动条？

Posted 2023-05-07

【中文标题】如何在剑道网格中自动启用或禁用滚动条？

【英文标题】：How to make scrollbar auto enabled or disabled in a Kendo grid?

【发布时间】：2014-01-18 05:56:32

【问题描述】：

这是我创建网格的代码：

@
    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;") 
              )
    

如何禁用和启用自动出现在剑道网格内的垂直滚动条？

【参考方案1】：

你可以使用这样的东西来显示垂直滚动条：

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

然后隐藏它：

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

grid 是您的网格元素的 ID。

【讨论】：

这会导致网格列与其标题不对齐

【参考方案2】：

你可以添加 .Scrollable(scrollable => 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;") 
          )

【参考方案3】：

使用k-scrollable 属性

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

【参考方案4】：

下面的 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;

【参考方案5】：

如果您使用的剑道网格在每一行中都有嵌套的剑道网格并滚动虚拟。（使用角度 5） 案例1：展开并滚动后，跳过最后一次计数。

sol：在父网格中使用 [detailRowHeight] = "36"