响应式 Kendo UI 网格示例

Posted 2023-05-07

【中文标题】响应式 Kendo UI 网格示例

【英文标题】：Example for Responsive Kendo UI grid

【发布时间】：2013-09-18 17:37:39

【问题描述】：

我已经在我的 WebApp 中实现了 KendoUI，有什么方法可以让网格响应？ 就像，在较小的分辨率上显示更少的列！

【参考方案1】：

在应用以下样式之前，这是我的引导式 Kendo UI 网格

这就是你之后得到的。可能并不完美，或者有些人会认为“反应灵敏”。但是，对于我的用户来说，这是一种享受。无论如何，电话不是我们的目标平台，但是，现在我们至少可以看到网格中的内容，即使我们无法对其进行排序......等等。

以下是受@Vel 的 codepen 启发的样式，来自本线程的前面部分。 他的 codepen 样式缺少一个隐藏 colgroup 元素的语句。这对于这种方法是不可或缺的。 确保将此 CSS 放在页面流中主 kendo CSS 文件之后的某个位置

@media screen and (max-width: 800px) 

.k-widget table 
    border: 0;


.k-widget table thead, table colgroup 
    display: none;


.k-widget table tr 
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
    border-radius: 20px;

.k-widget table tr td:last-child 
    background-color: #313444;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

.k-widget table tr td:nth-child(2) 
    background-color: #313444;
    color: #FFF;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-weight: bold;
    padding-top:1em;


.k-widget table td 
    display: block;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;

.k-widget table td:before 
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;

【参考方案2】：

现在每列都有一个minScreenWidth 设置，当浏览器宽度小于指定时隐藏该列。在我们的应用程序中，我们设置了一些与 Bootstrap 媒体查询断点相对应的常量，因此我们不是每次都手动指定宽度，而是使用这些常量，因此当您在下方时，某些列会被隐藏，例如Bootstrap sm 或 xs 断点。

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.minScreenWidth

【参考方案3】：

是的。使用下面的链接，您可以实现 kenod 网格响应式设计。

http://codepen.io/anon/pen/QwPVNW

在媒体查询中请这样使用

  @media screen and (max-width: 600px) 

   .k-grid-content > table  

【讨论】：

这是如何被赞成的？引用的 codepen 是一个简单的表格，与 OP 要求的 Kendo UI 网格无关。

【参考方案4】：

恐怕Grid目前还没有为你提供这样的响应式设计。

【参考方案5】：

我通过 jQuery 在引导站点中工作。这是我在浏览器较窄（低于 768 像素）时隐藏第 3 列和第 4 列（索引 2 和 3）的方法。

dataBound: function () 
    $("#contacts tr > td:nth-child(2)").addClass("hidden-xs");
    $("#contacts tr > td:nth-child(3)").addClass("hidden-xs");
    $("#contacts thead th:nth-child(2)").addClass("hidden-xs");
    $("#contacts thead th:nth-child(3)").addClass("hidden-xs");
    $("#contacts colgroup col:nth-child(2)").addClass("hidden-xs");
    $("#contacts colgroup col:nth-child(3)").addClass("hidden-xs");

不幸的是，这会创建一个索引依赖项，因此您无法在不更新这些规则的情况下随机排列列。

【讨论】：

你也可以在相应的列定义中添加这些引导类，使用attributes和headerAttributes配置参数，但是你会在右边得到一个很大的空白，因为剩下的可见列未调整大小，如此 Kendo UI 论坛帖子中所述：telerik.com/forums/kendo-grid-responsive-behavior

你可以通过隐藏出现在主tbody正上方的colgroup来摆脱巨大的空白

【参考方案6】：

我编写了一个基于 JQuery 的小部件，可用于使 Kendo Ui Grid 响应。

您可以在此处获取小部件：https://github.com/loanburger/ResponsiveKendoGrid

用法：创建网格后添加以下代码：

$('#GridId').responsiveGrid(
  columnsToShow: ['date','name','surname'],  columns you want to show in responsive view
   mobileWidth: 860, // screen width to trigger the change
   idColumn: 'Id', //ID column
   tools: ['excel'] // if you have the excel export option or blank if not
);

它所做的基本上是只保留第一列并隐藏其他列，但更改使用的客户端模板。然后它使用您指定的列创建一个项目，然后自上而下堆叠。

这在大多数情况下对我有用，我只是显示数据而不是用于内联编辑或内联自定义控件 - 稍后会出现......

【参考方案7】：

是的。您可以通过设置网格列的宽度来做到这一点。

如果您设置列宽，kendo 将自动启用较小分辨率的水平滚动。

【讨论】：

那不是响应式设计。用户不需要水平滚动。