smartgwt listgrid set cursor to hand over an icon field

Question

I've been working on this problem for quite a while but have not been able to solve it. I have a listgrid with a field type icon. I would like to change the cursor to "hand" over the icon.

I've been searching the web and saw that a couple of solutions existed. One of them is using addCellOverHandler for the list grid. But I don't understand how you can change the cursor for the specified field of the listgrid.

this.addCellOverHandler(new CellOverHandler() {

    @Override
    public void onCellOver(CellOverEvent event) {
    // not able to get the field and setCursor()        
    }
});

My field in the listgrid is defined as:

ListGridField iconField = new ListGridField("icon");
iconField.setAlign(Alignment.CENTER);
iconField.setType(ListGridFieldType.ICON);
iconField.setIcon("icons/icon.gif");

Like someone pointed out on the forum, a setCursor() method exist for the listgrid, but not for the field only...

If anybody has a clue... Thanks

Eric C. · Accepted Answer · 2012-05-03T10:06:17.810

2

After some more (a lot more...) googling, I found this:

http://forums.smartclient.com/showthread.php?t=15748

The thing is to Override the getCellStyle method in the listgrid. Here is the code I use:

@Override
protected String getCellStyle(ListGridRecord record, int rowNum, int colNum) {
    if (colNum==6){
        return "EC_pointer";
    }
    return super.getCellStyle(record, rowNum, colNum);
}

and in my CSS file:

.EC_pointer { 
    cursor: pointer; 
}

The major fallout is that you have to know in advance the column number of the field.

edited May 03 '12 at 10:06

answered May 02 '12 at 10:05

Eric C.

3,310
2
22
29

Easiest and simplest way to add, if modifying the the existing grid. Otherwise the next answer is the better approach or the modern approach. – Jess Sep 27 '18 at 22:15

score 2 · Answer 2 · edited Sep 22 '14 at 22:42

2

Further to my comment and adding information from here I tested the following code which works with SmartGwt2.4 under Firefox 5.0.

demandesGrid.setCanHover(true);
demandesGrid.setShowHover(false);
demandesGrid.addCellHoverHandler(new CellHoverHandler() {
    @Override
    public void onCellHover(CellHoverEvent event) {
        if (event.getColNum() == demandesGrid.getFieldNum("icon")) {
        //  SC.say(demandesGrid.getChildren()[3].toString());
            demandesGrid.getChildren()[3].setCursor(Cursor.POINTER);
        } else {
            demandesGrid.getChildren()[3].setCursor(Cursor.DEFAULT);
        }
    }
});

I don't know if the index of the ListGridBody is constant; I found it with the SC.say line.

edited Sep 22 '14 at 22:42

nbrooks

18,126
5
54
66

answered May 02 '12 at 19:27

Alain BUFERNE

2,016
3
26
37

I had seen that post on the forum without being able to apply this solution. Your solution works but there are two problems with it. The first is that if you have to specified the third children of the grid, I have to specify the second. I don't know why... The second thing is the behavior of the cursor which does turns to pointer type over my icon field but takes a little time to turns back to normal after you leave the field. I will edit my solution which I find, works better. Thanks a lot for your answer, it helped a lot !! – Eric C. May 03 '12 at 10:02
For the child index it's normal, it depends of the setup of the listgrid some elements could be there or not. For the delay time I've seen that too but didn't check in production mode to see if it was the same. Anyway your css style method is better. – Alain BUFERNE May 03 '12 at 14:46
There is one thing that is not perfect in my method, as well as yours. The cursor changes over the whole field and not just over the icon in the field. So if you size your field just large enough to fit the icon, that's fine. If you want a larger field, it is not very pretty to see your cursor become a pointer in the middle of nowhere... – Eric C. May 03 '12 at 15:10
Currently the ListGrid has a .getBody() method, which gives you exactly that child what is needed to set the cursor. – mikereem Jan 30 '14 at 13:43

Hardik Mishra · Answer 3 · 2012-05-02T09:03:53.770

0

How about

grid.addCellOverHandler(new CellOverHandler() {
  @Override
  public void onCellOver(CellOverEvent event) {
    //cellOver event to get field and refresh the cell
    //grid.refreshCell(i, j);
  }
});

edited May 02 '12 at 09:03

answered May 01 '12 at 05:30

Hardik Mishra

14,779
9
61
96

if(event.getColNum()== yourGrid.getFieldNum("icon")) but I don't know if you can set the cursor after that. – Alain BUFERNE May 01 '12 at 11:16
@Hardik Mishra: I don't want to change the value of the field in the grid, just want the cursor to appear as a hand when above the icon. – Eric C. May 02 '12 at 08:46
@Alain BUFERNE: I had tried the same approach but I'm also stuck when it comes to changing the cursor... – Eric C. May 02 '12 at 08:47

score 0 · Answer 4 · answered Nov 06 '12 at 00:54

The best approach is fully demonstrated here (take a look at how "comments/stats" field is being initialized).

In short, u have to extend ListGrid and override createRecordComponent method. In this method you can make any custom component you like and it will be show in grid cell.

Also ListGrid should be initialized with:

listGrid.setShowRecordComponents(true);
listGrid.setShowRecordComponentsByCell(true);

smartgwt listgrid set cursor to hand over an icon field

4 Answers4