如何包装Kendo Grid Column

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

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的官方论坛Header Wrapping/Height以及如何包装kendo网格列中找到更多文档

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

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

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