CODEWITHSUNDEEP
kendo-uikendo-grid
user1078749
user1078749

Reputation: 263

How to wrap Kendo Grid Column

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

Upvotes: 21

Views: 45915

Answers (8)

Tasnim Fabiha
Tasnim Fabiha

Reputation: 1238

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>

Upvotes: 0

mxasim
mxasim

Reputation: 2193

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

Upvotes: 7

Eugene Jr Subrado
Eugene Jr Subrado

Reputation: 11

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

Upvotes: 1

GOPAL SHARMA
GOPAL SHARMA

Reputation: 687

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.

Upvotes: 0

Ricardo Fran&#231;a
Ricardo Fran&#231;a

Reputation: 3003

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

Upvotes: 5

abuumar
abuumar

Reputation: 81

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

Upvotes: 1

Mahib
Mahib

Reputation: 4063

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

Upvotes: 27

IceMan
IceMan

Reputation: 1426

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

Upvotes: 20

Related Questions