Wrap Query Grid Column Header Text

customaware

Now we have Kendo it is possible to easily allow for wrapping Column Header text in a Query grid.

Placing this in you css file works great....

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

However, say I only wanted to apply that the a single column in a single Query rather than universally across the app.
How would I do that please?

johntalbott

Assuming you want to allow wrapping in the 2nd column header only .. the quickest way is ....

Init Script

config.columns[1].headerAttributes = {style: "white-space: normal"};

customaware

Legend John.

You must have had a lot of previous experience in js, jquery etc stuff.

You seem to totally "get it" so very thankful for you contributions.

May have to get you thinking of doing a Workshop at the next Conference? 😉

BenHayat

eagles9999 wrote
Legend John.

You must have had a lot of previous experience in js, jquery etc stuff.

You seem to totally "get it" so very thankful for you contributions.

May have to get you thinking of doing a Workshop at the next Conference? 😉

I've avoided JS, jQuery, CSS & HTML and now it's hunting me... :oops:

BLOMASKY

wait! I have a new car. Road Trip to John's house and we can all learn from the expert!

Bruce

RLJB

To apply it to all cols in a grid in the initialisation script try:

for (var i = 1; i < config.columns.length; i++) {
config.columns.headerAttributes = {style: "white-space: normal"}
}