Column Context Menu

Every column displays a context menu, and this has a default size. You can customize the width and height of this context menu or avoid displaying it.

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

Column Pinning

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

Column Context Menu - Column Pinning

See the Column Pinning section for more details.

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

You can close the context menu by clicking on the close icon at the upper-right corner or pressing the ESC key.

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 displayMenu.

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.

grid-structure.component.html

<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>

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 allowColumnContextMenu.

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

grid-structure.component.html

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

Open the Floating Configuration Panel, go to the Header section, and uncheck the Column Context Menu checkbox.

Floating Configuration Panel - Header

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 false value through the Injection Token called COLUMN_CONTEXT_MENU.

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, COLUMN_CONTEXT_MENU_WIDTH and COLUMN_CONTEXT_MENU_HEIGHT, respectively.

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

structure.module.ts

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

Column Context Menu - Changing the width and height

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