ListGrid useCellRollOvers:true with canSelectCells:false

[Blama]

Hi Isomorphic,

is the combination of useCellRollOvers:true with canSelectCells:false possible?
I think that I could use cellRollOvers in my application, but don't like that when using them, the ListGrid only highlights the hovered cell and not the hovered row.
I tried to "repair" this by canSelectCells:false, but this does not help. Is it possible to get the wanted effect (best in 5.1p)?

BuiltInDS.java (+CountrySampleData.java from the client showcase):

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("TITLE" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        final ListGrid countryGrid = new ListGrid() {
            private HLayout rollOverCanvas;
            private ListGridRecord rollOverRecord;

            @Override
            protected Canvas getRollOverCanvas(Integer rowNum, Integer colNum) {
                rollOverRecord = this.getRecord(rowNum);
                if (colNum!=null && colNum == 1) {
                    if (rollOverCanvas == null) {
                        rollOverCanvas = new HLayout(3);
                        rollOverCanvas.setSnapTo("TR");
                        rollOverCanvas.setWidth(50);
                        rollOverCanvas.setHeight(22);

                        ImgButton editImg = new ImgButton();
                        editImg.setShowDown(false);
                        editImg.setShowRollOver(false);
                        editImg.setLayoutAlign(Alignment.CENTER);
                        editImg.setSrc("silk/comment_edit.png");
                        editImg.setPrompt("Edit Comments");
                        editImg.setHeight(16);
                        editImg.setWidth(16);
                        editImg.addClickHandler(new ClickHandler() {
                            public void onClick(ClickEvent event) {
                                SC.say("Edit Comment Icon Clicked for country : " + rollOverRecord.getAttribute("countryName"));
                            }
                        });

                        ImgButton chartImg = new ImgButton();
                        chartImg.setShowDown(false);
                        chartImg.setShowRollOver(false);
                        chartImg.setLayoutAlign(Alignment.CENTER);
                        chartImg.setSrc("silk/chart_bar.png");
                        chartImg.setPrompt("View Chart");
                        chartImg.setHeight(16);
                        chartImg.setWidth(16);
                        chartImg.addClickHandler(new ClickHandler() {
                            public void onClick(ClickEvent event) {
                                SC.say("Chart Icon Clicked for country : " + rollOverRecord.getAttribute("countryName"));
                            }
                        });

                        rollOverCanvas.addMember(editImg);
                        rollOverCanvas.addMember(chartImg);
                    }
                    return rollOverCanvas;
                }
                return null;
            }
        };
        countryGrid.setShowRollOverCanvas(true);
        // Disable the rollUnderCanvas because we're not using it.
        countryGrid.setShowRollUnderCanvas(false);
        countryGrid.setUseCellRollOvers(true);
        countryGrid.setCanSelectCells(false);
        

        countryGrid.setWidth(500);
        countryGrid.setHeight(224);
        countryGrid.setShowAllRecords(true);

        ListGridField countryCodeField = new ListGridField("countryCode", "Flag", 40);
        countryCodeField.setAlign(Alignment.CENTER);
        countryCodeField.setType(ListGridFieldType.IMAGE);
        countryCodeField.setImageURLPrefix("flags/16/");
        countryCodeField.setImageURLSuffix(".png");

        ListGridField nameField = new ListGridField("countryName", "Country");
        ListGridField capitalField = new ListGridField("capital", "Capital");
        ListGridField continentField = new ListGridField("continent", "Continent");
        countryGrid.setFields(countryCodeField, nameField, capitalField, continentField);
        countryGrid.setCanResizeFields(true);
        countryGrid.setData(CountrySampleData.getRecords());

        w.addItem(countryGrid);
        w.show();
    }
}

Best regards
Blama

[Isomorphic]

It sounds like you want simultaneous row and cell rollover, with row-level selection, is that right?

If so, one way to do this would be an override of getCellCSSText() to return a different color or gradient if the cursor is over the cell (determined via getEventRow() / getEventCol())

[Blama]

Hi Isomorphic,

thanks a lot, this seems to solve it with one little part missing. This is my code:

            @Override
            protected String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {
                String text = super.getCellCSSText(record, rowNum, colNum);
                if (this.isSelected(record))
                    return "background: #bdc3c7; /* cellSelected */";
                else if (this.isHovered(record)) // API missing, also not found in ListGridRecord
                    return "background: #d5d9dc; /* cellOver, cellOverDark */";
                else if ((rowNum & 1) == 0)
                    return "background: #f5f5f5; /* cellDark */";
                else
                    return "background: #f9f9f9; /* cell */";
            };

It seems I can't detect hovered cells (the method "isHovered(record)" is not available). I assume there is a way to do this, because it works in a normal ListGrid, but perhaps the API is not exposed to SmartGWT?
Could you add/enable this in 5.1?

Best regards
Blama

[claudiobosticco]

Hi Blama, you must use ListGrid.getEventRow/Column:

...if the cursor is over the cell (determined via getEventRow() / getEventCol())

[Blama]

Hi claudiobosticco,

in German there is a saying: "One who can read is at a plain advantage".
This is my code now:

            @Override
            protected String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {
                if (this.isSelected(record))
                    return "background: #bdc3c7; /* cellSelected */";
                else if ([B]this.getEventRow() == rowNum[/B])
                    return "background: #d5d9dc; /* cellOver, cellOverDark */";
                else if ((rowNum & 1) == 0)
                    return "background: #f5f5f5; /* cellDark */";
                else
                    return "background: #f9f9f9; /* cell */";
            };

The only problem is that it is not called for all cells of the row I'm hovering from and the row I'm hovering to, only the cell I'm hovering from and the cell I'm hovering to.
I'd need a way to have getCellCSSText() called for the whole row despite having set setUseCellRollOvers(true).

Best regards
Blama

[Blama]

It sounds like you want simultaneous row and cell rollover, with row-level selection, is that right?

Yes, correct. "Normal" ListGrid behavior with cell-level rollovers.

[claudiobosticco]

The only problem is that it is not called for all cells of the row I'm hovering from and the row I'm hovering to, only the cell I'm hovering from and the cell I'm hovering to.
I'd need a way to have getCellCSSText() called for the whole row despite having set setUseCellRollOvers(true).

I think you'll have to call ListGrid.refreshCellStyle on the other columns.

[Blama]

Hi claudiobosticco,

thank you, this is working for me (refreshRow + RowOverHandler/RowOutHandler handler):

        final ListGrid countryGrid = new ListGrid() {
            private HLayout rollOverCanvas;
            private ListGridRecord rollOverRecord;
            {
                addRowOverHandler(new RowOverHandler() {
                    @Override
                    public void onRowOver(RowOverEvent event) {
                        refreshRow(event.getRowNum());
                    }
                });

                addRowOutHandler(new RowOutHandler() {
                    @Override
                    public void onRowOut(RowOutEvent event) {
                        refreshRow(event.getRowNum());
                    }
                });
            }

            @Override
            protected String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {
                if (this.isSelected(record))
                    return "background: #bdc3c7; /* cellSelected */";
                else if (this.getEventRow() == rowNum)
                    return "background: #d5d9dc; /* cellOver, cellOverDark */";
                else if ((rowNum & 1) == 0)
                    return "background: #f5f5f5; /* cellDark */";
                else
                    return "background: #f9f9f9; /* cell */";
            };

            @Override
            protected Canvas getRollOverCanvas(Integer rowNum, Integer colNum) {
                ...
                ...

Isomorphic: Is this the way to go or could you offer a setter that takes care of this (making extra addRowOverHandler(), addRowOutHandler() and getCellCSSText() unnecessary)?
I saw that there is refreshCellStyle(int rowNum, int colNum) but no refreshRowStyle(int rowNum).
I assume it was added your performance reasons compared to refreshCell(). Could you also add it for row?

Best regards
Blama