如何包装剑道网格柱答案

【问题标题】：How to wrap Kendo Grid Column如何包装剑道网格柱
【发布时间】：2014-04-05 19:34:36
【问题描述】：

Kendo Grid 列如下所示。在做缩放屏幕列被隐藏之后，我想做换行列。我们可以通过在 gridColumns 上提供一些属性来做到这一点。请告诉我。我找不到它。在这里，“您的职业详细信息”正在隐藏。这里还有一些字段，我这里只给出了三个。

 gridColumns: [
            {
                title: 'FirstName',
                field: 'FirstName',
                width: '0', hidden: true
            },
            {
                title: 'FirstName',
                field: 'FirstName',
                width: '250px'
            },
            {
                title: 'Your Occupation Details',
                field: 'OccupationDetails',
                width: '100',
            }]

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

将以下css 添加到您的代码中，它将应用于所有网格列，您无需为单个网格列添加样式属性。

<style>
    .k-grid td {
        word-break: break-all !important;
        word-wrap: break-word !important;
    }
</style>

【讨论】：

【解决方案2】：

这对我有用

.k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
}

还有这个

.k-grid  .k-grid-header  .k-header {
    white-space: normal;
}

来源：http://www.telerik.com/forums/header-wrapping-height

【讨论】：

【解决方案3】：

如果您需要特定网格的列标题的扭曲文本，您可以将其添加到自定义 CSS 中。这对我有用。

#yourgrid .k-grid-header  .k-header .k-link {
    white-space: normal !important; 
}

【讨论】：

【解决方案4】：

你可以这样做：

   k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
    word-break:break-all !important;
    word-wrap:break-word !important;
}
.k-grid  .k-grid-header  .k-header {
    white-space: normal;
}

非常适合我。

【讨论】：

【解决方案5】：

包装标题：

.k-grid .k-grid-header .k-header .k-link { height: auto; }

.k-grid .k-grid-header .k-header { white-space: normal; }

包装行：

td[role="gridcell"] { white-space: nowrap; }

【讨论】：

【解决方案6】：

<style>
   .k-grid .k-grid-header .k-header .k-link {
      overflow: visible !important; white-space: normal !important; 
   }
</style>

【讨论】：

【解决方案7】：

使用 headerAttributes 在 JS 列声明中包裹长列名，如下所示；

columns: [
{
  title: 'Your Occupation Details',
  field: 'OccupationDetails',
  width: '100',
  headerAttributes: { style: "white-space: normal"}
},
...
]

或者对于强类型网格，您也可以在列中使用 HeaderHtmlAttributes。

columns.Bound(p => p.OccupationDetails).HeaderHtmlAttributes(
    new { style = "white-space: normal" }
);

更多文档可以在 Telerik 的官方论坛 Header Wrapping / Height 和 How to wrap kendo grid column 中找到

【讨论】：

@user1078749 我不知道为什么这不是答案？

【解决方案8】：

您可以设置 Grid 的 CSS 属性以启用列换行。

.k-grid-header .k-header {
    overflow: visible;
    white-space: normal;
}

查看此文档以设置列标题属性。

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.headerAttributes

【讨论】：