5

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

4

7 回答 7

3

在应用以下样式之前，这是我的引导式 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;
}
}
于 2018-04-19T21:09:49.773 回答
2

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

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

于 2017-02-07T10:42:15.983 回答
1

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

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

在媒体查询中请像这样使用

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

   .k-grid-content > table  {
}
}
于 2016-06-01T06:22:17.290 回答
0

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

于 2013-09-15T20:46:36.940 回答
0

我通过 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");
}

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

于 2015-03-08T13:55:07.983 回答
0

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

您可以在此处获取小部件：https ://github.com/loangburger/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
});

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

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

于 2017-08-24T08:55:17.673 回答
-1

是的，您可以通过设置 Grid 列的宽度来实现。

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

于 2013-10-29T05:49:05.950 回答