Drag&drop items inside the table

Support
#1

Hi all.

Is it possible to move items/rows (up and down) inside a table (table, group table, etc.)?

For example:
image

And it possible make a dnd for items/rows between different tables?
Maybe platform include some listener class or something like that, for handle of intention of transferring data between tables?

I checked example project for dnd ( cuba-dnd ). But creation of Component from code not easier and flexable if need use a table.

I would greatly appreciate for help on this question.

#3

Hello!

The simple reordering inside a table you can implement by changing item order in the CollectionContainer. For instance:

Add two buttons to a table (Up and Down)

<buttonsPanel id="buttonsPanel"
              alwaysVisible="true">
     ...
    <button id="upBtn" icon="ARROW_UP"/>
    <button id="downBtn" icon="ARROW_DOWN"/>
</buttonsPanel>
Screen controller 
@Inject
private CollectionContainer<Customer> customersDc;
@Inject
private GroupTable<Customer> customersTable;

@Subscribe("upBtn")
public void onUpBtnClick(Button.ClickEvent event) {
    Customer selected = customersTable.getSingleSelected();
    if (selected != null) {
        List<Customer> customers = customersDc.getMutableItems();
        int pos = customersDc.getMutableItems().indexOf(selected);
        customers.remove(pos);
        // need to check index borders
        customers.add(pos - 1, selected);
    }
    customersTable.setSelected(selected);
}

@Subscribe("downBtn")
public void onDownBtnClick(Button.ClickEvent event) {
    Customer selected = customersTable.getSingleSelected();
    if (selected != null) {
        List<Customer> customers = customersDc.getMutableItems();
        int pos = customersDc.getMutableItems().indexOf(selected);
        customers.remove(pos);
        // need to check index borders
        customers.add(pos + 1, selected);
    }
    customersTable.setSelected(selected);
}

Reordering can also be done using Drag and Drop functionality. Sample how to drag and drop between two tables you can find here cuba-labs/sample-table-dragdrop, see OrderEdit screen.

4 Likes
#5

Thank you Roman!

I created actions for the table - to drag rows within the table (like in your example with buttons).
And the example will really help for implementation dnd into project.

1 Like