Vaadin Grid Column Reordering Issues

Flow
1

While attempting to pull the functionality from grid through to violatedGrid I’ve run into a few problems.

To begin I can get drag and drop of columns to work great functionaliy however there seems to be issues with the way that grid handles everything graphically. In its use of a headerDragElement, the little box that follows the mouse around showing what youre dragging, it appears that we’re trying to move the wrong element when we’re moving that in the method resolveDragElementHorizontalPosition() and should instead be moving its parent.

What is currently happening is we’re trying to move the element itself within its parent element, but the parent element is the same size as it, so no movement is seen, what should instead be happening is the parent element being moved. A similar problem is happening with the dragDropMarker.

Could someone else look over the code in grid within the vaadin grid repo and confirm that this is indeed a problem before I start hacking away at it?

2

Hi dillion,

Do you have already some starting code you can share so as we are in the same page? I would look into the issue.

3

The following code is taken from grid.java in the vaadin repo, this is identical to that used in vaadin-grid to generate the javascript.

[code]
private void resolveDragElementHorizontalPosition(final int clientX) {

        double left = clientX - table.getAbsoluteLeft();


        // Do not show the drag element beyond a spanned header cell

        // limitation

        final Double leftBound = possibleDropPositions.firstKey();

        final Double rightBound = possibleDropPositions.lastKey();

        final double scrollLeft = getScrollLeft();

        if (left + scrollLeft < leftBound) {

            left = leftBound - scrollLeft + autoScrollX;

        } else if (left + scrollLeft > rightBound) {

            left = rightBound - scrollLeft + autoScrollX;

        }


        // Do not show the drag element beyond the grid

        final double sidebarBoundary = getSidebarBoundaryComparedTo(left);

        final double gridBoundary = escalator.getInnerWidth();

        final double rightBoundary = Math

                .min(sidebarBoundary, gridBoundary);


        // Do not show on left of the frozen columns (even if scrolled)

        final int frozenColumnsWidth = (int) autoScroller

                .getFrozenColumnsWidth();


        left = Math.max(frozenColumnsWidth, Math.min(left, rightBoundary));


        left -= dragElement.getClientWidth() / 2;

        dragElement.getStyle().setLeft(left, Unit.PX);

    }

[/code]The bold red text is what ive found to be a problem when trying to use this for dragability purposes. After using gulp to get the resultant javascript we have:

function $resolveDragElementHorizontalPosition(this$static, clientX){
   var frozenColumnsWidth, gridBoundary, left, leftBound, rightBound, rightBoundary, scrollLeft, sidebarBoundary;
   left = clientX - $getAbsoluteLeft(this$static.table);
   leftBound = castToDouble(getKeyOrNSE($getFirstEntry(this$static.possibleDropPositions)));
   rightBound = castToDouble(getKeyOrNSE($getLastEntry(this$static.possibleDropPositions)));
   scrollLeft = this$static.this$01.escalator.horizontalScrollbar.scrollPos;
   left + scrollLeft < (checkCriticalNotNull(leftBound) , leftBound)?(left = (checkCriticalNotNull(leftBound) , leftBound) - scrollLeft + this$static.autoScrollX):left + scrollLeft > (checkCriticalNotNull(rightBound) , rightBound) && (left = (checkCriticalNotNull(rightBound) , rightBound) - scrollLeft + this$static.autoScrollX);
   sidebarBoundary = $getSidebarBoundaryComparedTo(this$static, left);
   gridBoundary = getRequiredWidthBoundingClientRectDouble(this$static.this$01.escalator.tableWrapper);
   rightBoundary = $wnd.Math.min(sidebarBoundary, gridBoundary);
   frozenColumnsWidth = round_int($getFrozenColumnsWidth(this$static.this$01.autoScroller));
   left = $wnd.Math.max(frozenColumnsWidth, $wnd.Math.min(left, rightBoundary));
   left -= (this$static.dragElement.clientWidth | 0) / 2 | 0;
   this$static.dragElement.style['left']
 = left + ($clinit_Style$Unit() , 'px');

}

Again, the red highlighted area is the “broken” code. This actually tries to move the dragElement within its parent div, which is the same size as it, resulting in no movement. By changing the above line in the compile JS to:

this$static.dragElement.parentElement.style['left'] = left + ($clinit_Style$Unit() , 'px'); We can instead move around the parent element, resulting in correct movement, this however is simply a temporary fix allowing us to see the corrections that need to be made. In the actual grid.java we should change the element being changed to more permenately fix the problem, however I am not sure if this is a change that will break the non-JS use of this grid and didnt want to make changes until i was sure of this.

Sorry, red highlighting isnt showing, in every code block the final line of code is that which is needing corrected

4

I see the problem, you dont have to modify the
Grid.java
 since your have a CSS issue.

Add this to the CSS block in
vaadin-grid.html
:

<dom-module id="vaadin-grid">
  <style>
  :host ::content .header-drag-table .vaadin-grid-cell {
    position: absolute;
    opacity: 0.5;
  }

  :host ::content .header-drag-table .vaadin-grid-drop-marker {
    background-color: #03A9F4;
    position: absolute;
    width: 3px;
  }

...

And to enable column reordering, you just add this to the
GridElement.java

[code]
public GridElement() {
grid = new ViolatedGrid();

    grid.setColumnReorderingAllowed(true);

…
[/code]Then DnD should work

If you are going to send a pull request, probably you have to consider to reordering the columns configuration array.

5

What you did in the second block of code, I had already done and implemented a few convenience methods for setting columnReordering via JS

6

Since I don’t know where you enable reordering, It was informational, that you have to enable it somehow.
The ideal solution is to have an attribute in the element, and a exported method in Java to enable/disable it, which probably is what you have.

7

Thats exactly what I have, currently working on getting the reordered column data to get pulled back into the vaadin grid element, should get this worked out shortly and have the pull request up for the changes early next week

8

Hi, im working on column reordering propogating the data change down to the vaadin grid element. Currently im running into some issues with this. Because grid is what is actually having its properties changed whenever column reordering happens and grid is compiled down to js, meaning we dont have consistent property names, i cant simply listen to changes on it, so ive come up with a few solutions I would like to consider. First I could make changes in grid’s source making it fire a column-reorder event on the change and simply listen for that in vaadin grid. The other possiblility is putting using a proxy observer, which also requires changes in the grid source code. Currently I’m leaning more toward the fire event solution, what would you see as a better solution for this?