kendoui固定宽度_Web开发：看如何定义Kendo UI Grid Width

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;

}

kendoui固定宽度_Web开发：看如何定义Kendo UI Grid Width相关推荐

kendo ui grid选中行事件，获取combobox选择的值
背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的teleri ...
Kendo UI Grid 用法详细整理
目录一. kendo UI grid结构结构实例二. kendo UI grid常用属性 1.new kendo.data.DataSource()中常见属性: 2.$("#grid& ...
在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI 是Telerik推出的一套based on jQuery 的 Framework,提供了很多控件(Menu .Grid .Combox等...), 底层以Html5 + jQuery ...
Kendo UI Grid 样式改变控制
目录一. 单元格颜色控制 1. 改变单元格背景颜色 2. 改变单元格边框 3. 改变行背景色二. 单元格内容控制 1. 单元格换行控制 a. css控制不换行 b. JS控制指定换行 2. 表格以 ...
Kendo UI开发教程 2 准备Kendo UI开发环境
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 首先你需 ...
kendo ui 动态隐藏列_Kendo UI使用教程：Kendo UI Grid中的动态数据（一）
本教程将为大家介绍如何逐步创建具有动态数据的Kendo UI grids.当您在一遍又一遍输入相同代码时,可以知道有些是可以关闭的,您输入的代码正在获取WET.创建具有动态数据的可编辑Kendo UI ...
Kendo UI grid 表格数据更新
1.整行数据更新 //获取grid表格var table0 = $(updateTableID).data("kendoGrid");//删除第一条 var lastTableDa ...
kendoui固定宽度_KendoUi 学习笔记(二) Grid
Kendo.ui.Grid Kendo Ui Grid控件,继承至Widget. 一.构造 allowCopyBoolen|Object (默认:false) 当他设置true,用户就可以选中行点击 ...
实例：用户界面控件Kendo UI vs DevExpress对比评测一
在一次使用ASP.NET MVC进行开发的Web项目中,我们需要用户界面控件来帮助实现界面的大部分功能.由于项目比较复杂,我们最终确定对 Kendo UI 和 DevExpress 这两款国际知名的用 ...

kendoui固定宽度_Web开发：看如何定义Kendo UI Grid Width

kendoui固定宽度_Web开发：看如何定义Kendo UI Grid Width相关推荐

最新文章

热门文章