# Column Moving
## Live example
{% hint style="success" %}
[Column Moving](https://demos.dikesoft.com/dk-grid/column/moving) live example.
{% endhint %}
## Allowing column dragging
To allow the user moves a column, you must set a flag at the grid scope by providing an input DikeGrid property named `allowColumnDragging`. Its **default** value is **false**.
{% code title="column-moving.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can change the value of the `allowColumnDragging` property at runtime.
{% endhint %}
You can open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel) of the live demo and change the value of the property `allowColumnDragging`.
## Draggable Columns
You can make a column **movable** by providing a property named `draggable`. Its **default** value is **false**.
{% hint style="warning" %}
Be aware that you can not change the `draggable` property at runtime. Use the `locked` property instead if you want the user not to move a column at runtime. For more details, see the Column Pinning section.
{% endhint %}
Let us set the following column configuration:
{% code title="column-moving.component.html" %}
```markup
```
{% endcode %}
With this configuration, we have:
1. All columns and column groups are **movable** except the **Name** column in the **root** group and the **Name** and **Surname** columns under the **Complete Name** group.
2. We have enabled the row grouping to move columns to the group panel. Columns **Surname** and **Hire Date** from the **root** group are **groupable**. **Gender** and **Age** columns under the **Personal Info** group are **groupable** as well.
3. All columns are in the center panel except the **Hire Date** column in the right panel.
{% hint style="warning" %}
You can move only **data** columns to the **group panel**, not column groups.
When you move a column group to the group panel using the **API**, the movement inserts only the **descendant data columns** into the group panel.
{% endhint %}
## Column movements
Once we have established some columns as **draggable**, be aware of the valid movements a column could take.
{% hint style="success" %}
For the description of the following movements, it will be helpful to grasp the [Gutters](https://docs.dikesoft.com/fundamentals/grid-structure/gutters) structure of the DikeGrid.
{% endhint %}
### Interchange Columns
This movement will swap two columns. The **source column** will take the **destination column's** place and vice versa. For this movement, the following rules apply:
1. The columns must belong to the same group of columns.
2. You can interchange columns that belong to the Content panels.
{% hint style="info" %}
If you try to swap a ***broken group***, you will join the group in the destination panel.
{% endhint %}
### Move Column Before
You can move a column ***before*** another column.
Let us say that you can move a given **column** at the left side of the **target column**. The actual movement will insert the given **column** at the **left-gutter** of the **target column**. Therefore, consider the following rules:
1. Columns must belong to the same group of columns.
2. The target column must belong to the right panel because columns have their gutter at their left.
3. If the target column lives in the left, center panel, or group panel, it must be the first column because they have both gutters.
### Move Column After
You can move one column ***after*** another column.
Same as before, let us say that you can move a given **column** at the right side of the **target column**. The actual movement will insert the given **column** at the **right-gutter** of the **target column**.
The rules are:
1. Columns must belong to the same group of columns.
2. The target column must belong to the group, left or center panel because columns have their gutter at their right.
3. If the target column lives in the right panel, it must be the last column because it has both gutters.
### Column to panel
This movement is possible when you drag a column to the ***left*** or ***right*** grid **border** or use the ***Pinning*** submenu of the **Column Context Menu**.
#### Drag a column to the grid's borders
Drag a column to the left or right grid border, as you can see in the following gif.
#### Using the Column Context Menu
Now, click on any [Column Context Menu](https://docs.dikesoft.com/fundamentals/grid-structure/column-context-menu) and select a panel to move the column.
{% hint style="info" %}
It is possible to move **all panel columns** to another panel using the **column** **API**.
{% endhint %}
## Breaking a column group
You can take a column that belongs to a column group and place it in another panel. This move grabs the column with its parent column and its parent, and so forth until the root.
The movement's outcome is a ***broken group***. For example, we moved the **Gender** column to the left panel. See the final state of the **Personal Info** group in the following screenshot.
### Unbroken column groups
If you do not want the user breaks a group, make its child columns **non-draggable**, as we did for **Name** and **Surname** columns under the **Complete Name** column group.
{% code title="column-moving.component.html" %}
```markup
```
{% endcode %}
You can not move the **Name** column or the **Surname** column. You can only move those columns by dragging the **Complete Name** group.
{% hint style="info" %}
When you drag a column, the DikeGrid instance **highlights** the proper columns or gutters to drop the column you are moving.
{% endhint %}
## Move columns using the API
You can achieve the previous movements using the column API.
{% hint style="info" %}
Remember, to use the **column API**, you must grab the instance of the [`DikeGridColumnDef`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridcolumndef#methods)service.
{% endhint %}
The following table shows the desired movement and its related method in the column API.
| Movement | Method(s) |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Interchange Columns | `swapColumns()` |
| Move Column Before | `moveColumnBefore()` |
| Move Column After | `moveColumnAfter()` |
| Column to Panel | moveColumnIntoPanel()
To move all columns from one panel to another panel, use the method movePanelColumns()
|
{% hint style="success" %}
For further details, see the [`DikeGridColumnDef`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridcolumndef#methods)definition.
{% endhint %}
{% hint style="info" %}
Even though you do not set the flag `allowColumnDragging`, you can move a column using the API, but the column must be set as **draggable** and not **locked**.
{% endhint %}
To see the use of the API, we have created the following UI:
{% code title="column-moving.component.html" %}
```markup
```
{% endcode %}
We added the `form` selector above the `dike-grid` selector, generating the following output:
With the previous UI, you can do the following tasks:
1. You can choose the source column or the source panel from the first select control.
2. Depending on your selected option, the second dropdown control will have a proper destination place. For instance, if you choose a column, the destination control will contain all columns of the same group and panels the column does not live.
3. The radio-button group has methods that involve column between column movements.
4. When you select panels, the corresponding button is enabled.
It is essential to notice that we are **listening** to any change in the **DikeGrid's columns**, attaching a subscription to the `columnsChange` `Observable` from the `DikeGridColumnDef`.
{% code title="column-moving.component.ts" %}
```typescript
private setChangeGridColumnsSubscription(): void {
this.changeGridColumnsSubscription.unsubscribe();
this.changeGridColumnsSubscription = this.dikeGrid.columnDef.columnsChange.pipe(
map((columns: DikeColumnDef[]) => this.flatColumns(columns)),
observeOn(asapScheduler)
).subscribe((columns) => {
this.destinationColumns = null;
this.destinationPanels = null;
this.moveColumnsForm.patchValue({ source: null, destination: null, method: '' });
this.moveColumnsForm.get('method').enable();
this.gridColumns = columns;
});
}
```
{% endcode %}
Every time we receive a new set of columns, we flat them into a single array, invoking the method `flatColumns()`. So indeed, we are **flattening** the **column groups**, traversing them **recursively**.
{% code title="column-moving.component.ts" %}
```typescript
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
```
{% endcode %}
If you see the content of the **source dropdown** control, you see the columns **Hire Date**, **Employee Id**, **Personal Info** group, **Complete Name** group, then **Name** and **Surname** columns, **Gender** and **Age** columns, etc.
{% hint style="info" %}
The **non-draggable** columns are **disabled**, such as **Name** and **Surname**, under the **Complete Name** group.
{% endhint %}
## Column Moving Events
Every previous movement emits an event of type `DikeColumnMoveEvent`. We listen to the `columnMove` event at the grid scope.
{% tabs %}
{% tab title="column-moving.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-moving.component.ts" %}
```typescript
onColumnMove(movementData: DikeColumnMoveEvent): void {
console.log('Column movement: ', movementData);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
You can also listen to the `columnMove` event from the [`DikeGridColumnDef`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridcolumndef#events) instance.
{% endhint %}
See the definition of the `DikeColumnMoveEvent` interface:
```typescript
interface DikeColumnMoveEvent {
type: ColumnMovement;
movedColumns: DikeColumnDef[];
beforeColumn?: DikeColumnDef;
afterColumn?: DikeColumnDef;
destinationPanel?: DikeGridPanel;
}
```
And the `ColumnMovement` definition is:
```typescript
type ColumnMovement = 'swap-columns' | 'join-column-groups' | 'column-after' | 'column-before' | 'columns-to-panel';
```
As you can see, some fields are not required. However, depending on the type of movement, those fields are provided.
| Movement | DikeColumnMoved |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Interchange Columns | type: swap-columns.
movedColumns: The source and destination columns.
|
| Interchange Columns | type: join-column-groups.
movedColumns: The joined column group.
destinationPanel: The panel the broken-destination group lives.
|
| Move Column Before | type: column-before.
movedColumns: The source column.
beforeColumn: The target column.
destinationPanel: The panel the target column lives.
|
| Move Column After | type: column-after.
movedColumns: The source column.
afterColumn: The target column.
destinationPanel: The panel the target column lives.
|
| Column to panel | type: columns-to-panel.
movedColumns: The source columns or all panel columns.
destinationPanel. The provided panel is the destination panel.
|
{% hint style="success" %}
You can open the **dev console** for the live demo and see the emitted **event**.
{% endhint %}
## Summary
Before defining which columns will be movable, you must allow this action by providing a property named `allowColumnDragging` at the grid scope. To move a column, you must define a column as **draggable**. You can **interchange** columns only from the **Content panels**, and you can only add **data columns** to the **group panel**. You can move columns using the [Column Context Menu](https://docs.dikesoft.com/fundamentals/grid-structure/column-context-menu) as well.
### Complete code for this section
{% tabs %}
{% tab title="column-moving.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-moving.component.ts" %}
```typescript
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';
import { asapScheduler, Subscription } from 'rxjs';
import { map, observeOn } from 'rxjs/operators';
import { DikeColumnDef, DikeGridComponent, DikeGridDataSourceInput, isDikeGroupColumnDef, DikeGridPanel, DikeColumnMoveEvent } from '@dikesoft/angular-data-grid';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'column-moving',
templateUrl: './column-moving.component.html',
styleUrls: ['./column-moving.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ColumnMovingComponent implements OnInit, AfterViewInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
gridColumns: DikeColumnDef[];
gridPanels: DikeGridPanel[];
destinationColumns: DikeColumnDef[];
destinationPanels: DikeGridPanel[];
disableMethods: boolean;
moveColumnsForm: FormGroup;
private changeGridColumnsSubscription: Subscription = Subscription.EMPTY;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) {
this.gridPanels = ['groupPanel', 'leftPanel', 'centerPanel', 'rightPanel'];
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
this.createForm();
}
ngAfterViewInit(): void {
// We listen the columnsChange observable after the DikeGrid instance is ready:
this.setChangeGridColumnsSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridColumnsSubscription.unsubscribe();
}
onSourceSelectionChange(data: MatSelectChange): void {
const source = data.value;
let sourcePanel: DikeGridPanel;
this.destinationColumns = null;
this.moveColumnsForm.patchValue({ destination: null, method: '' });
this.moveColumnsForm.get('method').enable();
if (source instanceof DikeColumnDef) {
// We get only those columns in the same group:
this.destinationColumns = this.gridColumns.filter(column => column !== source &&
column.belongToGroup === source.belongToGroup);
sourcePanel = source.panel;
} else {
sourcePanel = source as DikeGridPanel;
}
// We take the panels different from the source selection:
this.destinationPanels = this.gridPanels.filter(panel => sourcePanel !== panel);
}
onDestinationSelectionChange(data: MatSelectChange): void {
const destination = data.value;
if (!(destination instanceof DikeColumnDef)) {
this.moveColumnsForm.patchValue({ method: '' });
this.moveColumnsForm.get('method').disable();
} else {
this.moveColumnsForm.get('method').enable();
}
}
onMoveColumns(): void {
if (this.moveColumnsForm.valid) {
// Take the columns from the form:
const sourceColumn = this.moveColumnsForm.get('source').value as DikeColumnDef;
const destinationColumn = this.moveColumnsForm.get('destination').value as DikeColumnDef;
// Take the method to be invoked:
const method = this.moveColumnsForm.get('method').value as string;
switch (method) {
case 'swap-columns':
this.dikeGrid.columnDef.swapColumns(sourceColumn, destinationColumn);
break;
case 'column-after':
this.dikeGrid.columnDef.moveColumnAfter(sourceColumn, destinationColumn);
break;
case 'column-before':
this.dikeGrid.columnDef.moveColumnBefore(sourceColumn, destinationColumn);
break;
}
}
}
onMoveColumnsToPanel(): void {
const source = this.moveColumnsForm.get('source').value;
const destinationPanel = this.moveColumnsForm.get('destination').value as DikeGridPanel;
if (!!source && !!destinationPanel) {
if (source instanceof DikeColumnDef) {
// Move the selected column to the destination panel:
this.dikeGrid.columnDef.moveColumnIntoPanel(source, destinationPanel);
} else {
// Move all columns from the source panel to the destnation panel:
this.dikeGrid.columnDef.movePanelColumns(source as DikeGridPanel, destinationPanel);
}
}
}
onColumnMove(movementData: DikeColumnMoveEvent): void {
console.log('Column movement: ', movementData);
}
private createForm(): void {
this.moveColumnsForm = new FormGroup({
source: new FormControl(null, Validators.required),
destination: new FormControl(null, Validators.required),
method: new FormControl({ value: '', disabled: false }, Validators.required),
});
}
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
private setChangeGridColumnsSubscription(): void {
this.changeGridColumnsSubscription.unsubscribe();
this.changeGridColumnsSubscription = this.dikeGrid.columnDef.columnsChange.pipe(
map((columns: DikeColumnDef[]) => this.flatColumns(columns)),
observeOn(asapScheduler)
).subscribe((columns) => {
this.destinationColumns = null;
this.destinationPanels = null;
this.moveColumnsForm.patchValue({ source: null, destination: null, method: '' });
this.moveColumnsForm.get('method').enable();
this.gridColumns = columns;
});
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}