滚动的概述

默认情况下，网格的滚动功能是禁用的。当启用滚动时，小部件对其数据区域应用默认高度200px。这可以通过在网格中设置可选的高度样式来更改或删除可滚动()方法。

滚动模式是面向ASP的Telerik UI。网络核心一个专业级的UI库，包含 110+ 组件，用于构建现代和功能丰富的 应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

@(Html.Kendo(). grid () . name ("grid") . scrollable (s => s. height(400)) //设置一个400px-height样式)//或者:@(Html.Kendo(). grid () . name ("grid") . scrollable (s => s. height ("auto")) //移除默认高度。)

的虚拟滚动总是显示一页数据。滚动只会改变当前显示的数据。的没完没了的滚动模式将新的数据页附加到已经呈现的记录上。的没完没了的滚动适用于有限数量的记录，因为在某个点之后浏览器将开始冻结(由于页面上DOM元素的数量)。对于大量的记录，建议使用虚拟滚动或标准分页。

有关网格滚动模式的更多信息，请参阅以下文章:

• 虚拟滚动
• 无尽的滚动

根据启用的滚动模式，网格的尺寸和布局的呈现会有所不同。有关更多信息，请参阅以下文章:

• 网格高度
• 网格的宽度
• 行
• 隐藏的容器
• 响应设计

开始

为了通过辅助技术实现最大程度的可访问性，必须禁用网格的滚动特性。

默认情况下，当启用滚动时，Grid呈现两个表—一个用于标题区域，另一个用于可滚动的数据区域。当您需要手动对Grid表进行JavaScript或CSS更新时，这两个表非常重要。

 
 
 …< /表> < / div > < / div > < div class = " k-grid-content " > <表>… 
 

下面的示例演示了带有虚拟滚动的网格中的HTML输出。有关更多信息，请参阅文章关于虚拟滚动。

 
 
 … 
 
 
 ... 
 
 

设置滚动条

默认情况下，当启用滚动时，网格不显示滚动条。要呈现滚动条并实现垂直或水平滚动，请定义网格的以下维度。您可以独立控制垂直和水平滚动。

• 要实现垂直滚动，请设置网格的高度。否则，它将垂直展开以显示所有行。
• 要实现水平滚动，请显式地以像素为单位定义所有列的宽度，并确保它们的总和超过网格的宽度。

当启用滚动时，即使不需要，Grid的垂直滚动条也总是可见的，这简化了实现并提高了小部件的性能。要删除垂直滚动条，请使用CSS规则并确保Grid及其数据区域都不应用固定高度，以便它们能够根据表的行数缩小和扩展。在下面的示例中，# GridID只允许对特定的网格实例应用样式。要在所有Grid实例中使用这些样式，请替换ID与.k-gridCSS类。

#GridID .k-grid-header {padding: 0 !important;} #GridID .k-grid-content {overflow-y:可见;}

只显示水平滚动条

为了激活水平滚动条，为网格的列设置宽度，使它们的总和大于网格的总宽度。要隐藏垂直滚动条，使用以下CSS(替换# GridID输入网格的Id。所需的Id是网格的名称):

#GridID .k-grid-content {overflow-y: hidden;} .k-grid-header {padding: 0px !important;}

恢复滚动位置

在某些情况下，当小部件反弹时，网格的滚动位置可能会重置。防止滚动位置的恢复:

1. 将滚动位置保存在数据绑定()事件处理程序。
2. 中恢复滚动位置数据绑定()事件处理程序。

可滚动容器是div.k-grid-content并且可以将其作为小部件的子元素检索包装器。如果启用了虚拟滚动，则显示可滚动的数据容器div.k-virtual-scrollable-wrap它只能水平滚动。

@(Html.Kendo(). grid () . name ("grid") . scrollable() /*其他配置。*/ . events (events=>events . databound ("onGridDataBound") . databinding ("onGridDataBinding"))) $(function(){//初始化保存滚动位置的变量。var scrollOffset ={左:0，上:0};//在呈现新数据之前保存滚动位置。函数onGridDataBinding (e) {var container = e.p sender.wrapper.children(".k-grid-content");//或".k-virtual-scrollable-wrap"。scrollOffset。left = container.scrollLeft();scrollOffset。top = container.scrollTop(); // Use only if virtual scrolling is disabled. } // Restore the scroll position after the new data is rendered. function onGridDataBound (e) { var container = e.sender.wrapper.children(".k-grid-content"); // Or ".k-virtual-scrollable-wrap". container.scrollLeft(scrollOffset.left); container.scrollTop(scrollOffset.top); // Use only if virtual scrolling is disabled. } });

调整滚动条和页面布局的缩放

当一个网页被缩放时，浏览器会改变所有页面的内容大小，除了滚动条。这将导致启用了滚动功能的网格中的标题和数据区域之间的不对齐。要调整布局，请在上执行以下代码window.resize。

如果Grid处于从右到左(RTL)模式，则使用“padding-left”而不是“padding-right”配置。

美元(窗口)。resize(function (e) {var grid = $('#GridID').data("kendoGrid");grid.thead.closest(“.k-grid-header”). css(“padding-right kendo.support.scrollbar(真));}）;

另请参阅

• 滚动一个网格HtmlHelper为ASP。. NET Core with Locked Columns (Demo)
• 服务器端API