Kendo UI for jQuery数据管理使用教程:Grid Width

翻译|使用教程|编辑:龚雪|2020-09-02 10:17:22.147|阅读 17 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文将为大家介绍Grid Width的使用。

# 正版采购狂欢节,企业采购正当时 # # 31款JAVA开发必备控件和工具 #

相关链接:

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Width

默认情况下,Grid没有设置宽度,其操作类似于块级元素,并扩展为100%的宽度(父元素的宽度)。

入门指南

要控制Grid的宽度,请将CSS width属性设置为Grid本身或其某些父类, 如果您使用层次结构,并且明细模板是可滚动的,否则明细模板必须比所有主列的宽度之和窄。

如果启用滚动并且所有列宽的总和大于Grid的宽度,则会出现一个水平滚动条。 如果禁用滚动并且各列不适合,则它们会溢出Grid的div元素。div溢出导致窗口小部件的右边界穿过数据单元格,因为Grid是div元素内的table元素,而包围它们的内容表可以水平扩展到100%以上,而div元素缺乏这种操作。

为避免表溢出,请应用以下任一方法:

  • 启用滚动功能,在使用Kendo UI Grid MVC封装器时,默认情况下降禁用滚动功能。
  • 为Grid wrapper设置一个足够大的宽度或最小宽度的样式——div class =“ k-widget k-grid”元素。
  • (仅当前两个方法不可接受时才使用此方法)浮动Grid wrapper和清除小部件后的浮动,浮动元素会根据需要自动扩展和收缩以包围其内容。

应用最小宽度

根据特定的方案,您可以使用以下任何一种方法来定义网格的最小宽度。

如果禁用了滚动,请使用以下CSS。

#GridID
{
min-width: 800px;
}

如果启用了滚动并且Grid不是分层的(没有嵌套表),请使用以下CSS。

#GridID .k-grid-header-wrap > table, // A header table.
#GridID .k-grid-content table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table // A data table, with virtual scrolling.
{
min-width: 800px;
}

如果启用了滚动并且网格是分层的(具有嵌套表),请使用以下CSS。

#GridID .k-grid-header-wrap > table, // A header table.
#GridID .k-grid-content table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table // A data table, with virtual scrolling.
{
min-width: 800px;
}
#GridID .k-grid-content table table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table table // A data table, with virtual scrolling.
{
min-width: initial;
}


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat