I don't think this will work, the arrow icon is added by wrapping the
header Cell in an
IconCellDecorator<http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/cell/client/IconCellDecorator.html>(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<https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle>
.
On Sunday, March 11, 2012 7:33:16 AM UTC-4, Olivier TURPIN wrote:
>
> 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.
> Le samedi 10 mars 2012 12:35:51 UTC+1, Xavier S. a écrit :
>>
>> 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="load";" 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
>>
>>
>> On Saturday, March 10, 2012 6:15:45 AM UTC+1, JoseM wrote:
>>>
>>> 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.
>>
>>
On Sunday, March 11, 2012 7:33:16 AM UTC-4, Olivier TURPIN wrote:
>
> 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.
> Le samedi 10 mars 2012 12:35:51 UTC+1, Xavier S. a écrit :
>>
>> 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="load";" 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
>>
>>
>> On Saturday, March 10, 2012 6:15:45 AM UTC+1, JoseM wrote:
>>>
>>> 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.
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-web-toolkit/-/351N39k44RsJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
![http://127.0.0.1:8888/main/clear.cache.gif"](http://127.0.0.1:8888/main/clear.cache.gif"){kind=link}