响应式Kendo UI网格示例

Question

我已经在我的WebApp中实现了KendoUI，有没有办法使网格响应？ 就像，在较小的分辨率上显示较少的列！

Answer 1

现在每列都有<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.modysoft.gridlayoutdemo.MainActivity"> <GridLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:text="Good Morning" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_row="0" android:layout_gravity="fill" android:layout_columnWeight="1" android:onClick="Buttontapped" android:layout_rowWeight="1" android:id="@+id/goodmorning" /> <Button android:text="Good Evening" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" android:layout_row="0" android:layout_gravity="fill" android:layout_columnWeight="1" android:layout_rowWeight="1" android:onClick="Buttontapped" android:id="@+id/goodevening" /> <Button android:text="HI / Bye" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_row="1" android:layout_gravity="fill" android:layout_columnWeight="1" android:layout_rowWeight="1" android:onClick="Buttontapped" android:id="@+id/hibye" /> <Button android:text="Good Bye" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" android:layout_row="1" android:layout_gravity="fill" android:layout_columnWeight="1" android:layout_rowWeight="1" android:onClick="Buttontapped" android:id="@+id/goodbye" /> <Button android:text="Please" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_row="2" android:layout_gravity="fill" android:layout_columnWeight="1" android:layout_rowWeight="1" android:onClick="Buttontapped" android:id="@+id/please" /> <Button android:text="Thank You &#10; Very Much" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" android:layout_row="2" android:layout_gravity="fill" android:layout_columnWeight="1" android:layout_rowWeight="1" android:onClick="Buttontapped" android:id="@+id/thankyou" /> <Button android:text="Welcome" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_row="3" android:layout_gravity="fill" android:layout_columnWeight="1" android:layout_rowWeight="1" android:onClick="Buttontapped" android:id="@+id/welcome" /> <Button android:text="How are you?" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" android:layout_row="3" android:layout_gravity="fill" android:layout_columnWeight="1" android:layout_rowWeight="1" android:onClick="Buttontapped" android:id="@+id/howareyou" /> </GridLayout> 设置，当浏览器宽度小于指定值时，它会隐藏列。在我们的应用程序中，我们设置了一些与Bootstrap媒体查询断点相对应的常量，因此我们不是每次都手动指定宽度，而是使用这些常量，因此当您在下面时，某些列会被隐藏。 Bootstrap minScreenWidth或sm断点。

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

Answer 2

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

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

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

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

   .k-grid-content > table  {
}
}

Answer 3

在使用以下样式

之前，这是我的自举风格的Kendo UI网格

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

以下是@ Vel的codepen启发的样式，来自此主题的早期版本。 他的codepen样式缺少一个隐藏colgroup元素的statemetn ..这对于这种方法是不可或缺的。 确保在主要的剑道CSS文件

之后的某个地方将这个CSS放在你的页面流中

import NodeEnvironment from 'jest-environment-node';

export default class IntegrationEnvironment extends NodeEnvironment {
  async setup() {
    await super.setup();
  }

  async teardown() {
    await super.teardown();
  }

  runScript(script) {
    return super.runScript(script);
  }
}

Answer 4

我担心Grid目前没有为您提供这种响应式设计。

Answer 5

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

如果设置列宽，则kendo会自动启用水平滚动以获得较小的分辨率。

Answer 6

我通过jQuery在bootstrap网站上工作。以下是我在浏览器较窄（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");
}

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

Answer 7

我编写了一个基于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
});

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

在大多数情况下，这对我来说很有用，我只是在显示数据而不是内联编辑或内嵌自定义控件 - 这些都会在以后发生..