GWT : Celltable Multiselection , MouseDown event?

Question

I've got a CellTable, which has 4 columns:

| Column 1 | Column 2 | Column 3 | Column 4 |

Goal:

User can select multiple columns while holding mouse button down and hovering over the columns.

e.g User clicks on column 1 and holds the mouse button down, moves over column 2 and 3 resulting in column 2 and 3 being selected.

I tried:

final MultiSelectionModel<data> selectionModel = new MultiSelectionModel<BestellungData>();
    cellTable.setSelectionModel(selectionModel);

    cellTable.addCellPreviewHandler(new Handler<data>()
            {

                @Override
                public void onCellPreview(
                        CellPreviewEvent<data> event) {
                    // TODO Auto-generated method stub
                    if ("click".equals(event.getNativeEvent().getType())) {

                        selectionModel.setSelected(event.getValue(), true);

                    }
                }


    });

However it doesn't work.

Cuticula

MultiSelectionModel is used to select multiple rows, not multiple columns. – Kinase

hm is it even possible to select mulitple columns – Cuticula

Answer 1

Try this one

private boolean isFocus, isFocusMouseDown;
private int lastStyledRow = -1;
private Set<Integer> columns = new HashSet<Integer>();

...

table.addCellPreviewHandler(new Handler<Contact>() {

    @Override
    public void onCellPreview(CellPreviewEvent<Contact> event) {
        if ("focus".equals(event.getNativeEvent().getType())) {
            isFocus = true;
            if (lastStyledRow != -1) {
                NodeList<TableCellElement> cells = table.getRowElement(lastStyledRow)
                        .getCells();
                for (int col : columns) {
                    cells.getItem(col).removeClassName("selectedCell");
                }
                columns.clear();
            }
        }
        if ("blur".equals(event.getNativeEvent().getType())) {
            isFocus = false;
            isFocusMouseDown = false;
            lastStyledRow = event.getIndex();

            NodeList<TableCellElement> cells = table.getRowElement(event.getIndex())
                    .getCells();
            for (int col : columns) {
                cells.getItem(col).addClassName("selectedCell");
            }
        }

        if ("mousedown".equals(event.getNativeEvent().getType()) && isFocus) {
            isFocusMouseDown = true;
        }

        if ("mouseover".equals(event.getNativeEvent().getType()) && isFocusMouseDown) {
            columns.add(event.getColumn());
        }
    }

});

Here is the dummy CSS for selected cell

.selectedCell{
    border: 2px solid #F3F7FB;
    background-color: #F00;
    font-weight: bold;
}

In the above code, we are listening for few events and based on their sequence we can identify the selected columns.

Sequence of events:

• Starting point is focus event on any column
• Then mousedown event to start dragging on anther columns
• If focus and mousedown both are true then collect all the columns on mouseover event
• Finally on blur event, change the style of all the selected cells.
• Reset the style of last selected cells on next focus event

snapshots

Kinase

I've tested this under Chromium 33.0.1750.152, but unfortunately, the mousedown event happens just before the focus event, so it doesn't work. It also doesn't work if I try it on the columns headers, because I receive only the focus and blur event, and nothing else (no mousedown or mouseover). – Jews

I have tested it on Firefox 26. Please can you verify it on Firefox? Meanwhile I am testing it on Chrome also. – Kinase

Its working fine for Chrome Version 33.0.1750.154 also. I have updated my post along with snapshots. – Kinase