How to wrap Kendo Grid Column

Question

Kendo Grid columns is given as below. After doing zoom screen column is getting hide, I want to do wrap column. Can we do it by giving some propery on gridColumns. Please tell me. I am not able to find it. Here 'Your Occupation Details' is getting hide. Here are some more fields, I have given only three here.

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

Mahib · Answer 1 · 2016-03-14T17:31:19.477

27

Use headerAttributes to wrap long column names in the JS columns declaration as follows;

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

Or for strongly typed grids you can use HeaderHtmlAttributes in Columns as well.

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

Further documentation can be found in the Telerik's official forum Header Wrapping / Height and How to wrap kendo grid column

edited Mar 14 '16 at 17:31

answered Aug 26 '14 at 15:48

Mahib

3,977
5
53
62

@user1078749 I do not know why this is not the answer already? – Immortal Oct 31 '16 at 03:58

IceMan · Answer 2 · 2014-06-21T19:50:22.807

20

You can set CSS properties of the Grid to enable column wrap.

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

Take a look at this documentation for setting column header attributes.

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

edited Jun 21 '14 at 19:50

answered Jun 21 '14 at 01:13

IceMan

1,398
16
35

score 7 · Answer 3 · edited Aug 09 '19 at 08:57

7

This worked for me

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

and this

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

source: http://www.telerik.com/forums/header-wrapping-height

edited Aug 09 '19 at 08:57

Ankit Das

640
4
16

answered Dec 09 '14 at 20:40

mxasim

2,153
21
15

score 5 · Answer 4 · answered Jul 01 '16 at 20:08

5

To wrap the header:

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

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

To wrap the rows:

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

answered Jul 01 '16 at 20:08

Ricardo França

2,923
2
18
18

score 1 · Answer 5 · edited Mar 21 '16 at 06:49

1

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

edited Mar 21 '16 at 06:49

Paritosh

11,144
5
56
74

answered Jan 27 '15 at 05:27

abuumar

81
1
4

score 1 · Answer 6 · answered Mar 02 '17 at 06:10

1

You can add this to your custom CSS if you need to the warp text of the column header of a specific grid. This worked for me.

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

answered Mar 02 '17 at 06:10

Eugene Jr Subrado

11
4

GOPAL SHARMA · Answer 7 · 2017-01-18T06:35:00.253

0

You can do it as:

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

Works Perfect for me.

edited Jan 18 '17 at 06:35

answered Jan 18 '17 at 06:17

GOPAL SHARMA

657
2
12
37

score 0 · Answer 8 · answered Aug 27 '21 at 05:21

Add the following css to you code, it will be applied to all grid columns and you won't need to add style attribute to individual grid column.

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

How to wrap Kendo Grid Column

8 Answers8