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

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.

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=&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

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=&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

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 google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.