Как обернуть колонку сетки Kendo

Столбцы 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',
            }]

ОТВЕТЫ

Ответ 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

Ответ 2

Вы можете установить свойства CSS Grid для включения обхода столбца.

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

Взгляните на эту документацию для установки атрибутов заголовка столбца.

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

Ответ 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; }

Ответ 5

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

Ответ 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;
}

Работает идеально для меня.

Ответ 7

Вы можете добавить это в свой собственный CSS, если вам нужен текст основы заголовка столбца конкретной сетки. Это сработало для меня.

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