Button with icon and tooltip in a grid cell

[piskantali]

Hello everyone. I'm having this problem for couple of days for now and haven't been able to solve it. Here is the problem itself:

I am using GXT version 3.1 Beta. I want to have a button with a tooltip and an icon in a grid cell. Also button's icon depends on the grid's row data object, for example if this object's some boolean field is true this icon must be "active.png", otherwise "some passive.png". I've found a solution by using AbstractCell class, whose "render" method does the job. But the button(in fact html block) which is rendered is built from my custom html template and so isn't quite like the real GXT button. Of course, I'm using some css styles to decorate the button's border, hover, but still, it isn't quite like the real button. Also, in this case the tooltip is included in my custom html template and works well.
So, another way to go is to use ButtonCell class. In the "render" method I'm setting the icon I want to appear using the "setIcon" method, then I set handler for the button using "addSelectHandler" method and after that I call "super.render". Everything works quite well, but the problem is in tooltip. ButtonCell class doesn't have such method to set it's tooltip. So, I have to append some html code manually to the sb(SafeHtmlBuilder). I'm doing this like so:

setIcon(getMyIcon());
addSelectHandler(myHandler);
sb.appendHtmlConstant("<span qtip='Test tooltip'></span>");
super.render(context, null, sb);
sb.appendHtmlConstant("</span>");

After that the tooltip works just fine, but when I click on the produced button's icon, there is no response. Also, if I click on that narrow rectangle shaped space between the button's icon and button's outline, selection works fine ("onSelect" method is called). Clearly, icon isn't able to recognize the click.
Please, help me! Thanks beforehand.

[Colin Alworth]

Can you post the full code for your cell? Its hard to guess what might be different without a little more detail.

[piskantali]

ButtonCell<Boolean> cell = new ButtonCell<Boolean>() {
@Override
public void render(Context context, Boolean value, SafeHtmlBuilder sb) {
MyObject o = store.get(context.getIndex());
setIcon(o.isActive() ? MyRegistry.getIcons().active() :MyRegistry.getIcons().inActive());
sb.appendHtmlConstant("<span qtip='Test tooltip'></span>");
super.render(context, null, sb);
sb.appendHtmlConstant("</span>");
}
};
cell.addSelectHandler(new SelectEvent.SelectHandler() {
@Override
public void onSelect(SelectEvent event) {
MyObject o = store.get(context.getIndex());
o.setActive(!o.isActive());
store.update(o);
}
});
statusColumn.setCell(cell);

The tooltip works fine, but when I click on the button's icon, the click handler isn't called. However that narrow space between the icon and the button's outline is able to recognize click events.

[tz_Dev]

Hi,

The tooltip is NOT showing in following code, what i am doing wrong here ?


ColumnConfig<Client, String> clientId = new ColumnConfig<Client, String>(
((ClientProperties) p).getGridId(), 75, "");
clientId.setColumnTextClassName(CommonStyles.get().inlineBlock());
clientId.setColumnTextStyle(btnPaddingStyle);
TextButtonCell btn=new TextButtonCell() {
@Override
public void render(Context context, String value, SafeHtmlBuilder sb) {
Client p = store.get(context.getIndex());
setIcon(!p.isSelectedAsFavourite() ? Resources.IMAGES.add() :Resources.IMAGES.minus());
if ( p.isSelectedAsFavourite()){
sb.appendHtmlConstant("<span qtip='Add To Favourites'>");
}else{
sb.appendHtmlConstant("<span qtip='Remove From Favourites'>");
}
super.render(context,null, sb);
sb.appendHtmlConstant("</span>");



}
};