Custom UI of multiple rows drag and drop

General
1

Hi,

I have a table with many rows. User can select multiple rows and drop on someother component out side of the table. If user selects 1st row and 200th row and try to drag, he can’t see both rows are dragging but instead only one he can see it.

If you select 1st and 5th row, you can see both with some gap between them. Vaadin is creating a proxy image and have seen VScrollTable.java

I have requirment now to change this behaviour. If miltiple rows are dragging it should always display only one in the proxy image and with a number indicates how many rows are dragging in the proxy image.

2

Hi,

seems the scroll image is actually done so that first it creates a drag image of ALL rows in the table and then just hides the ones which are not in the dragged set (see VScrollTable class at around rows 6229 - 6250.

Unfortunately it doesn’t seem like there’s any easy way to change this without diving deep into the client side code :(

-tepi

3

Hi,

I have added below styles in my css. Now only selected rows are displaying :slight_smile: . Please suggest mw how to display only the first row of the selected one.

tbody.v-drag-element {
tr[class=v-table-row-odd]
, tr[class=v-table-row]
{
display:none;
}
tr[class~=“v-selected”]
{
@include valo-selection-item-selected-style;
}
}

4

Sorry adding the right css again.

tbody.v-drag-element {
         tr[class=v-table-row-odd]
, tr[class=v-table-row]
 {
           display:none;
         }
         tr[class~="v-selected"]
 {
           @include valo-selection-item-selected-style;
         }
    }