Move components to a certain position

[Artgit]

I'm trying to reorder my components in GridStack(vertical 1 column layout) to a certain position.

I have implemented following logic for this purpose:

    iterator().forEachRemaining(child -> {
        //move away temporary
        moveComponent(child, 100, 100);
    });

    /*      
     componentIds represents list of some bussiness ids associated with a GridStack components      and these ids represent the new order for these GridStack components
    */
    for (int i = 0; i < componentIds.size(); i++) {

        component = //some logic here by getting component by componentIds.get(i)

        moveComponent(component, 0, i);
    }

As a result I have a pretty much the same order as desired but for a some reason some components(not all but some of them) are on the wrong places - not on the places defined by componentIds list.

What am I doing wrong and how to reorder components in order to match the desired order for 100%?

[alump]

Just call gridStack.moveComponent(component, newX, newY) it should work.

https://github.com/alump/GridStack/commit/a92385761f8b4d49bbe9ab5a60d1cf833b0ea3ae

I made simple test in this commit to reset to original order (if you iterate components those are given in order that they were added to layout). Extra trick there is that it checks the height of component and increases X value by that.

Remember that if you put component to 0,1 but there is already component at 0,0 with height 2, then those will overlap, and client side will try to find next available space for component. This will cascade to other components too.

[Artgit]

Thanks for your answer. I have applied your solution and after debugging found an interesting thing.

As you suggested, I have invoked in loop following method:

moveComponent(component, 0, x.getAndAdd(getCoordinates(component).getHeight()));

and printed components order:

    for (int i = 0; i < getComponentCount(); i++) {
        System.out.println(.. component id));
    }

output:

30973
30977
30971
30982
30985
30976
30979
30981
30972
30984
30975
30978
30980
30983
30974

but at display(at browser) the order is slightly different(the picture below represents the end of the list):

but I expect following order:

30984
30975
30978
30980
30983
30974

So for the some reason we have a different picture in memory and on the screen..

How it can be fixed ?

[alump]

So used gridStack.getCoordinates(childComponent).getY() to short your list, before printing those lists?

[Artgit]

I'm not sure I understood you correctly but I have added Y coordinate to my output:

this is a state before reordering(the same at memory and on the screen):

business id: 30985 component y: 0
business id: 30984 component y: 1
business id: 30983 component y: 2
business id: 30982 component y: 3
business id: 30981 component y: 4
business id: 30980 component y: 5
business id: 30979 component y: 6
business id: 30978 component y: 7
business id: 30977 component y: 8
business id: 30976 component y: 9
business id: 30975 component y: 10
business id: 30974 component y: 11
business id: 30973 component y: 12
business id: 30972 component y: 13
business id: 30971 component y: 14

and this is the state after reordering:

business id: 30973 component y: 0
business id: 30977 component y: 1
business id: 30971 component y: 2
business id: 30982 component y: 3
business id: 30985 component y: 4
business id: 30976 component y: 5
business id: 30979 component y: 6
business id: 30981 component y: 7
business id: 30972 component y: 8
business id: 30984 component y: 9
business id: 30975 component y: 10
business id: 30978 component y: 11
business id: 30980 component y: 12
business id: 30983 component y: 13
business id: 30974 component y: 14

in memory after reordering the order is correct but at browser at the end of the list I have the order as on the picture in my previous message

[alump]

Found issue, resolving.

[alump]

0.3.1 released in Vaadin Directory. Hopefully it resolves the issues you have.

[alump]

http://app.siika.fi/GridStackDemo/#!split - demo now has secondary order behind Roman button.

Example code: https://github.com/alump/GridStack/blob/a92385761f8b4d49bbe9ab5a60d1cf833b0ea3ae/gridstack-demo/src/main/java/org/vaadin/alump/gridstack/demo/SplitView.java

[Artgit]

I'll test it in more details tomorrow but at the first look everything work like a charm ! Thank You very much !!