# Column Pinning
## Live example
{% hint style="success" %}
[Column Pinning](https://demos.dikesoft.com/dk-grid/column/pinning) live example.
{% endhint %}
## Lock/Unlock columns
When you define a column as **draggable**, it is possible to **freeze** that column by locking it.
{% hint style="info" %}
To **lock/unlock** a column through the **UI**, you must set the flag `allowColumnDragging` at the grid scope.
{% endhint %}
Open the [Column Context Menu](https://docs.dikesoft.com/fundamentals/grid-structure/column-context-menu#column-pinning) for any column defined as **draggable**. You will see the **lock/unlock** icons.
Locking a column is useful when the user moves a column to the **right** or **left** panel and then **freezes** the column to be always **visible**. Even though the user can lock a column in the center panel, it makes more sense to freeze columns in the left or right panels.
{% hint style="info" %}
The user can not move locked columns, and other columns can not occupy their place when dragging operation occurs.
{% endhint %}
## Defining frozen columns
To not allow a user to move a column nor lock/unlock it, define the column as **non-draggable**.
{% hint style="success" %}
Only **draggable** columns are susceptible to being **locked/unlocked**.
{% endhint %}
Consider the following column configuration:
{% code title="column-pinning.component.html" %}
```markup
```
{% endcode %}
With this configuration, we have:
1. All columns are **draggable** except the **Employee Id** column, the **Name** column in the **root** group, and the **Surname** under the **Complete Name** column group.
2. We **locked** the columns **Email** and **Name** under the **Complete Name** group.
3. Finally, we defined the **Employee Id** column in the **left panel**, which is **non-draggable**. The user can not move or lock/unlock this column.
As you can see, the user can not move the Employee Id column and will not lock/unlock it. If you try to move the column, you will see an icon that indicates the user cannot move that column.
## Lock/Unlock column using the API
You can lock/unlock columns 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 %}
You use `lockColumn()` and `unlockColumn()` methods for locking and unlocking, respectively.
{% hint style="success" %}
Although you do not set the flag `allowColumnDragging`, you can **lock/unlock** a column using the **API**, but you must define the column as **draggable**.
{% endhint %}
To see the use of the API, we have created the following API:
{% code title="column-pinning.component.html" %}
```markup
Columns
{{ column.headerText }}
```
{% endcode %}
The generated output is:
With the previous UI, you can do the following tasks:
1. You can choose any defined column as **draggable**. It includes column groups.
2. Depending on the locked state, the button next to the dropdown control will display the lock or unlock label.
It is essential to notice that we are **listening** to any change in the **DikeGrid's columns**, attaching a callback to the `columnsChange` output property from the [`DikeGridComponent`](https://docs.dikesoft.com/reference/components/dkgridcomponent).
{% tabs %}
{% tab title="column-pinning.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-pinning.component.ts" %}
```typescript
onColumnsChange(columns: DikeColumnDef[]): void {
this.gridColumns = this.flatColumns(columns);
// Clear selection:
this.selectedColumn.patchValue(null);
}
```
{% endtab %}
{% endtabs %}
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-pinning.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 **dropdown** control, you see the columns **Employee Id**, **Name**, **Personal Info** group, **Complete Name** group, then **Name** and **Surname** columns, etc.
{% hint style="info" %}
The **non-draggable** columns are **disabled**, such as **Employee Id**, **Name** in the **root** group, and **Surname**, under the **Complete Name** group.
{% endhint %}
## Events when Locking/Unlocking columns
When you lock or unlock a column, the DikeGrid instance emits the related event.
{% tabs %}
{% tab title="column-pinning.component.html" %}
```markup
```
{% endtab %}
{% tab title="column-pinning.component.ts" %}
```typescript
onColumnLockedChange(column: DikeColumnDef): void {
console.log('Column locked: ', column);
}
onColumnUnLockedChange(column: DikeColumnDef): void {
console.log('Column unlocked: ', column);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
You can also listen to the `columnLockedChange` and `columnUnLockedChange` events from the [`DikeGridColumnDef`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridcolumndef#events)instance.
{% endhint %}
Both events emit the locked/unlocked column. Notice that the sent column is of type `DikeColumnDef` because you can lock/unlock column **groups**, not only data columns.
{% hint style="success" %}
Open the **dev console** to see the locked/unlocked column.
{% endhint %}
## Summary
To lock/unlock a column, you must define it as **draggable**. You can lock/unlock columns in any panel, even in the **group** panel, but **freezing** columns in the **left** or **right** panels makes more sense.
### Complete code for this section
{% tabs %}
{% tab title="column-pinning.component.html" %}
```markup