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和How to wrap kendo grid column

中找到更多文档。

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 { 身高：自动; }

.k-grid .k-grid-header .k-header { 白色空间：正常; }

来源：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; }

Answer 5

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

Answer 6

你可以这样做：

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

适合我的作品。

Answer 7

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

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

如何包装Kendo Grid Column

7 个答案: