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',
}]
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
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
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
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With