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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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.