Apply Layout Changes to a Second Grid when using CellTemplates in React

Background:

Wijmo's FlexGrid control allows developers to set properties that allow users to drag and drop columns to reorganize the view of the grid, including when the grid is using the CellTemplates control. Developers are able to use this to have a second grid mimic the layout of the first when a user changes the column layout of the initial grid.

Steps to Complete:

1. Bind methods to the primary FlexGrid's draggedColumn and draggingColumn events

2. Use the method bound to draggingColumn to get the current column that the user is dragging

3. Use the moveElement method of the columns object to move a column without altering its layout and contents

Getting Started

Bind methods to the primary FlexGrid's draggedColumn and draggingColumn events

The draggedColumn and draggingColumn events must be bound to methods. These will be used to get the column being moved, as well as applying that movement to the second FlexGrid.

<wj-flex-grid #mainGrid [itemsSource]="mainData" (draggingColumn)="draggingColumn(mainGrid, $event)" (draggedColumn)="draggedColumn(mainGrid, $event)></wj-flex-grid>

This will bind the the custom methods draggingColumn and draggedColumn to their respective events within the grid control.

Use the method bound to draggingColumn to get the current column that the user is dragging

Next, you'll need to create use the draggingColumn method that we bound to the grid to get the column that is being dragged. For this example, we will set it to the column that has our CellTemplate, which is the second column on the grid.

draggingColumn(s, e) {
    this.dropDownColumn = s.column[1];
}

Use the moveElement method of the column object to move a column without altering its layout and contents

Finally, we use the dragginedColumn method that we bound to the grid in conjunction with the column's moveElement method to move the column object, instead of simply just copying the column. We get the location of where the 'country' column is in the main grid, and where it's located in the secondary grid. We then call moveElement on the secondary grid using the location of the country column in both grids.

draggedColumn(s, e) {
    var target = (s == this.mainGrid) ? this.targetGrid : this.mainGrid;
    var mainBinding, targetBinding;
    for(var i = 0; i < s.columns.length; i++) {
        if(s.columns[i].binding == 'country') {
            mainBinding = i;
        }
        if(target.columns[i].binding == 'country') {
            targetBinding = i;
        }
    }
    target.columns.moveElement(targetBinding, mainBinding);
}

You can also find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-react-flexgrid-apply-column-layout