ExtJS Grid Multi-line rows

Yes, I heard you saying why there is no option or setting to force cell to wrap. Good news is that its very easy to achieve this.

Without me wasting much of you valuable time lets jump straight to the point.

Lets form a grid first.

ExtJS Grid code

Now when you look at the grid you will get something like this

The Markup

Above element is necessary because we are rendering our grid to #playcontainer. Outer #myGrid is there for a reason. I will tell you in a bit why.

What we get because of above is something like this

Extjs multiline grid example

 

Now lets add a very basic CSS rule as shown below

When we add above CSS rules on our page lets see what difference it will make

ExtJS Grid multiline example

That made a a huge difference. And we get what we expected. Anyway this solution will lead to affect all grids but making a very basic change to our CSS rule we can overcome this

[ltu]

As you see that in our markup we have a parent container with ID: myGrid so lets utilize that

[/ltu]

And that is it. Grid inside our marked id myGrid will be the only one that will get affected by our CSS change.

Demo

Demo is available for you to have a look from this link

If you know something better in terms of solutoin then do leave your solution in your comments so that other readers can benefit from it.

I hope this helps.

Cheers,

Comments

  1. Really good idea
    but if you filter column it will mess the user interface

  2. Oh my goodness! Amazing article dude! Thank you, However I am experiencing difficulties with
    your RSS. I don’t know why I cannot subscribe to
    it. Is there anybody getting similar RSS issues? Anyone who knows the answer can you
    kindly respond? Thanx!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.