# Column Context Menu

## Context Menu

By definition, every column will show a context menu. This context menu contains two sub-options by default: **Column Chooser** and **Column Pinning**.

### Column Chooser

The Column Chooser will display all the columns in the DikeGrid in order and as a tree. If there are no nested columns, the Column Chooser will show only a list of columns. Through the Column Chooser, you can make a column visible or not.

![Column Context Menu - Column Chooser](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2F6lUvYdDOxhv8UnPZOpL6%2Fgrid-structure-context-menu-column-chooser.gif?alt=media\&token=627e603a-7bb5-4eca-a4c8-db14dedf840f)

### Column Pinning

This sub-option will show all the possible panels to drag a column.

![Column Context Menu - Column Pinning](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2F4nID3QWV6ywTCFSJlrRb%2Fgrid-structure-context-menu-column-pinning.png?alt=media\&token=eb502d55-c93f-48c0-b88d-0111aee2cb6f)

{% hint style="success" %}
See the [Column Pinning](#column-pinning) section for more details.
{% endhint %}

There are two more sub-options: **Filtering** and **Sorting**. These options will be available when you make columns filterable and allow sorting, respectively.

{% hint style="info" %}
You can close the context menu by clicking on the **close** icon at the upper-right corner or pressing the **ESC** key.
{% endhint %}

## Suppress the Column Context Menu

You can avoid displaying the context menu for a specific column, all columns in one particular DikeGrid definition, or all DikeGrid instances.

### Suppress at the column level

To suppress the context menu at the column level, you must provide an input property called <mark style="color:orange;">`displayMenu`</mark>.

Give the **Employee Id** column this input property a **false** value. Then, when you hover the column header of the **Employee Id** column, you will not see the context menu icon.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure">
    <dike-grid-column
        fieldName="employeeId"
        headerText="Employee Id"
        dataType="Text"
        width="350"
        panel="leftPanel"
        displayMenu="false">
    </dike-grid-column>
</dike-grid>
```

{% endcode %}

### Suppress at the DikeGrid level

If you do not want the columns of a specific DikeGrid instance to display its context menu, you must provide an input property called <mark style="color:orange;">`allowColumnContextMenu`</mark>.

Let us bind the related property from the `gridProperties` object to suppress the context menu for all defined columns.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    [allowColumnContextMenu]="gridProperties.columnContextMenu">
</dike-grid>
```

{% endcode %}

Open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel), go to the **Header** section, and uncheck the **Column Context Menu** checkbox.

![Floating Configuration Panel - Header](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2FOW3hsERRFr2jAdvOJZxI%2Fgrid-structure-header-panel-conf.png?alt=media\&token=51bda50a-ecb3-4be2-adf6-a31a745c5775)

Now, you will not see the context menu icon for all columns.

### Suppress for all DikeGrid instances

To suppress the context menu in all DikeGrid instances, you must provide a <mark style="color:red;">`false`</mark> value through the Injection Token called <mark style="color:blue;">`COLUMN_CONTEXT_MENU`</mark>.

## Context Menu width and height

By default, the context menu is **345 pixels** in width and **490 pixels** in height. However, you can modify these values by providing the related Injection Tokens, <mark style="color:blue;">`COLUMN_CONTEXT_MENU_WIDTH`</mark> and <mark style="color:blue;">`COLUMN_CONTEXT_MENU_HEIGHT`</mark>, respectively.

Let us inject new values through the mentioned Injection Tokens at the module level.

{% code title="structure.module.ts" %}

```typescript
@NgModule({
  providers: [
    { provide: COLUMN_CONTEXT_MENU_WIDTH, useValue: 700 },
    { provide: COLUMN_CONTEXT_MENU_HEIGHT, useValue: 550 }
  ]
})
export class StructureModule { }

```

{% endcode %}

![Column Context Menu - Changing the width and height](https://3888584995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpDxfe6pgRLqBLMQgZ0kG%2Fuploads%2FIcXtbp6jaoqYfqjTHH77%2Fgrid-structure-context-menu-size-changed.png?alt=media\&token=92189c1c-8c8d-4d65-be62-350aaa406b31)

As you can see, we have provided exaggerated values for width and height to spot the difference.