Filters in GXT Grid headers

There is that great GWT 2.0 widget library GXT (current version 2.1.1). I stumbled upon it when I was looking for a suitable grid widget for a browser based application and found GXT to have the best one around. It handles large amounts of data pretty well and has a neat look and feel. Another requirement was to have filter fields in the table header – a missing feature in many other grid widgets. But even that worked out nicely – except not in Chrome/Safari (i.e. WebKit). Only posting a thread in GXT’s community forums pointed me to a solution.

It turns out the grid widget actually disables text selection for the header by default – and that makes it impossible to modify a text field’s content in there.You can enable text selection there using the following code snippet:

grid = new Grid(store, cm)) {
    protected void afterRenderView() {

That piece of code overloads the grid’s afterRenderView() method upon instantiation and forces text selection on the header. After inserting those few lines you are free to place any widget you like (GXT or not) in your grid’s header:

Since Firefox/Opera don’t require this modification and the actual desired behaviour seems to be the one exposed by WebKit I think that there might be a misbehaviour in GXT with this case. I will investigate this issue further and update this blog post if anything new comes up.

I hope that posting this blip of information can help some people out there that have the same problem – and like me spent a couple of hours messing around without getting any results.

Happy coding,



Maximilian Hainlein

I'm working for crealytics as Social Media and Marketing Manager since 2011. My motto: "It's better to be the needle than the haystack."

  • Hi Alex,

    Its great of you to share this. My question is – how do you get the text boxes into the top of the header in the first place? I’d like to add filter fields (text, date, selects) for each of my columns but can’t find any example in the API using the current GXT library that does this.



  • snso

    Hi Alex,

    How did you manage to put the textfield on top of the grid header?
    Could you share some code along with the resizeable widget?