# 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](/files/64ckuxlFUW8rzoguGy7l)

### Column Pinning

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

![Column Context Menu - Column Pinning](/files/7seHxIoDjP39V0r1kCOM)

{% 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](/overview.md#floating-configuration-panel), go to the **Header** section, and uncheck the **Column Context Menu** checkbox.

![Floating Configuration Panel - Header](/files/PVNyydUtdnzdeRwaX9U4)

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](/files/wtvDUBlFXVw4SCrc9dof)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dikesoft.com/fundamentals/grid-structure/column-context-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.