Is there any way to remove the sort arrow decorator in a header of a CellTable?

[Xavier S.]

Hello,

I would like to remove the sort arrow from headers of a CellTable but I still want to keep the sorting capabilities of the CellTable. (the one in the red circle)

Is it possible? And how?

Regards,

Xavier

[JoseM]

You can control what to show for that with the CellTable Resources. You would have to pass in your own resources to the CellTable constructor that overrides the sort style to display what you want.

[Xavier S.]

Hello Jose,

Thanks for your answer!

I wasn't aware of the CellTable.Resources classes, it seems to fit my needs. But (there's always a but :) ).

The generated html code for that sort arrow is the following :

<div style="left:0px;margin-top:-4px;position:absolute;top:50%;line-height:0px;">
<img onload="this.__gwtLastUnhandledEvent=&quot;load&quot;;" src="http://127.0.0.1:8888/main/clear.cache.gif" style="width: 11px; height: 7px; background: url(data:image/png;base64,SOMEBASE64CODE) no-repeat 0px 0px;" border="0">
</div>

And I would like to change it to something like this :

<div style="left:0px;margin-top:-4px;position:absolute;top: 30%;line-height:0px;">

<i class="icon-arrow-up"></i>

</div>

So mostly change the <img> tag by a <i> one where I can use twitter bootstrap css icons and maybe change the top style arg of the enclosing div.

Is there any way to do it with GWT?

Thanks again and best regards,

Xavier

[Xavier S.]

For now, I used separated pngs in the <img> tag by doing the following :

public interface TableResources extends CellTable.Resources {
    @Source("up.png")
    ImageResource cellTableSortAscending();

    @Source("down.png")
    ImageResource cellTableSortDescending();
 }

But I still would like to use the <i> tag rather than the <img> one, any idea?

Regards,

Xavier

[JoseM]

Maybe you can do it by subclassing CellTable and overriding the code which renders that piece but I'm not sure if that can be easily done. Or create your own version of CellTable that renders it as an i tag.

[Olivier TURPIN]

Hello Xavier

You should take a look at Header class (in com.google.gwt.user.cellview.client package) by extending it you'll have access to the Template in use, maybe you can declare your own or just override render method  and inject your code to the SafeHtmlBuilder

@Override

public void render(Context context, SafeHtmlBuilder sb) {

// do what you want with the builder

// sb.append(XXXX);

}

Olivier.

[Zak Linder]

I don't think this will work, the arrow icon is added by wrapping the header Cell in an IconCellDecorator (in AbstractCellTable.getSortDecorator(), which is called in AbstractCellTable.createHeaders(), both private methods).

I have a similar issue in that I want to move the icon to the right of the label, so I also need to target the icon. Xavier, you could try using CSS to hide the icon. Just as you've replaced the icon resources in you TableResources interface, you can replace and extend the CSS file:

public interface TableResources extends CellTable.Resources {
    @Source("up.png")
    ImageResource cellTableSortAscending();

    @Source("down.png")
    ImageResource cellTableSortDescending();

    @Source("MyCellTable.css")
    CellTable.Style cellTableStyle();
 }

And in MyCellTable.css:

...

/* hack to remove sort icon */
.cellTableSortedHeaderAscending > div,
.cellTableSortedHeaderDescending > div {
   padding-left: 0;
}
.cellTableSortedHeaderAscending > div > div:first-child,
.cellTableSortedHeaderDescending > div > div:first-child {
   display: none;
}

...

The CSS above undoes the cell decorator's padding and hides the icon. If you need help with getting the CSS to work the first place to look is the ClientBundle dev guide.

[Zak Linder]

Sorry, you need to added !important because the styles you're overriding are defined inline:

/* hack to remove sort icon */
.

cellTableSortedHeaderAscending > div,
.cellTableSortedHeaderDescending > div {
   padding-left: 0 !important;

}
.cellTableSortedHeaderAscending > div > div:first-child,
.cellTableSortedHeaderDescending > div > div:first-child {

   display: none !important;
}