如何包装Kendo Grid列

Question

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',
            }]

- user1078749

Answer 1

可以使用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官方论坛中找到：标题换行/高度和如何换行kendo网格列

- Mahib

---

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

Answer 2

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

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

请查看此文档以设置列头属性。

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

- IceMan

Answer 3

这对我很有帮助

.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

请问您需要翻译的是什么内容？

- mxasim

Answer 4

包装标题：

.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; }

- Ricardo França

Answer 5

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

- abuumar

Answer 6

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

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

- Eugene Jr Subrado

Answer 7

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

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

- Tasnim Fabiha

Answer 8

你可以这样做：

   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;
}

适合我，完美运作。

- GOPAL SHARMA