Telerik UI for ASP。网络核心?下载30天免费试用

高度

默认情况下,Grid没有设置高度,并展开以适应所有表行。

开始

仅当网格的滚动被启用时,才将高度设置为网格。有关Grid支持的滚动模式的更多信息,请参阅关于滚动的文章

要设置网格的高度,可以使用以下任何一种方法:

  • 样式应用内联高度样式< div >从中初始化网格。
  • 使用高度属性,该属性将对Grid包装器应用内联样式—与前一个选项相同。
  • 使用外部CSS。例如,使用ID或.k-grid类来应用高度样式。

当设置了Grid的高度时,它会计算其可滚动数据区域的适当高度,以便标题行、过滤器行、数据、页脚和页导航的总和等于Grid的预期高度。这就是为什么如果在创建网格后通过JavaScript更改网格的高度,则必须调用调整方法之后。通过这种方式,Grid重新计算其数据区域的高度。

var gridWidget = $("# griddid ").data("kendoGrid");//应用新的高度并触发布局调整。gridWidget.wrapper.height (800);gridWidget.resize ();//强制布局重新调整而不设置新的高度。gridWidget.resize(真正的);

在特定的场景中,您可以使用JavaScript或外部CSS为可滚动的数据区域设置高度样式div.k-grid-content元素。在这种情况下,避免为Grid设置高度。

< div风格= "宽度:500 px;"> @(Html.Kendo().Grid() .Scrollable() .HtmlAttributes(new {style = "height: 200px;"}) /*其他配置*/)
. {/div> .

用户界面的ASP。网络核心A Grid with a fixed height and scrolling functionality enabled

设置最小高度

当启用虚拟滚动时,设置最小高度不适用。有关Grid支持的滚动模式的更多信息,请参阅关于滚动的文章

您可以根据网格的行数,在一定的限制范围内,使网格垂直地展开和收缩。要实现这一点,请对可滚动数据区域应用最小和/或最大高度样式,并且不要设置Grid的任何高度删除默认的数据区域高度.而不是GridID,你也可以使用.k-grid类以所有Grid实例为目标。

#GridID .k-grid-content {min-height: 100px;max-height: 400 px;}

启用自动调整大小

启用自动调整大小功能只适用于可滚动的网格。有关Grid支持的滚动模式的更多信息,请参阅关于滚动的文章

  1. 若要允许网格与其父元素一起调整大小,请对其应用100% height样式< div class = " k-grid”>包装。根据web标准,以百分比为单位设置高度的元素要求显式地设置其父元素的高度。此要求递归应用,直到元素具有像素高度或超文本标记语言元素。100%高的元素不能有边距、填充、边框或兄弟元素。这就是为什么还要删除Grid的默认边框的原因。
  2. 的高度变化,确保网格的内部布局适应< div >包装。如果这些更改是由浏览器窗口的大小调整触发的,请订阅该窗口调整事件,并执行调整()方法。的调整方法测量网格的高度< div >并调整可滚动数据区域的高度。

    • 如果网格被放置在剑道UI分配器或剑道UI窗口内,则不需要调用调整方法,因为这些小部件将自动执行它。此外,如果使用锁定列,则没有必要应用该方法。
    • 如果网格可用的垂直空间依赖于由用户控制的自定义布局大小调整,则使用与布局更改相关的适当事件或方法来执行调整方法。在这种情况下,调用调整方法,即使您使用锁定列。

      美元(窗口)。调整(function (e) { var grid = $("#GridID").data("kendoGrid"); grid.resize(); });

配置加载指示灯

在内部,网格使用kendo.ui.progress方法在远程监视期间显示加载叠加请求。如果禁用滚动,则覆盖显示在整个Grid上。如果启用滚动,则在可滚动的数据区域上显示覆盖。如果启用了滚动,并且Grid没有设置高度,则数据区域最初的高度将为零,这将使加载覆盖在第一个远程请求期间不可见。要可视化加载叠加,可以使用以下方法之一:

另请参阅

在本文中
Baidu
map