Components / Menus / ContextMenu

Target

The target input of the ContextMenu defines the item for which the component will open.

Configuration

You can set target to any of the following values:

import { Component } from '@angular/core';
import { items } from './items';

@Component({
    selector: 'my-app',
    template: `
        <div #target class="target">
            <p class="placeholder">Right-click to open Context menu</p>
        </div>
        <kendo-contextmenu [target]="target" [items]="items"> </kendo-contextmenu>
    `,
    styles: [
        `
            .target {
                border-radius: 5px;
                height: 100px;
                width: 400px;
                background-color: #f6f6f6;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.26), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.08);
            }
            .placeholder {
                font-size: 20px;
                color: #656565;
                margin: 0;
            }
        `
    ]
})
export class AppComponent {
    public items: any[] = items;
}

export const items: any[] = [{
    text: 'Item1',
    items: [{ text: 'Item1.1' }, { text: 'Item1.2' }]
}, {
    text: 'Item2'
}, {
    text: 'Item3'
}];

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ContextMenuModule } from '@progress/kendo-angular-menu';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Filtering the Targets

You can filter the targets within a container for which the ContextMenu will open.

  1. Set the target input to the container element.
  2. Set the filter property to a CSS selector which matches the elements for which the ContextMenu will open.
import { Component } from '@angular/core';
import { items } from './items';

@Component({
    selector: 'my-app',
    template: `
        <ul #target style="display: inline-block;">
            <li class="target">Target1
            </li>
            <li class="target">Target2
            </li>
            <li class="target">Target3
            </li>
        </ul>
        <kendo-contextmenu [target]="target" filter=".target" [items]="items">
        </kendo-contextmenu>
    `,
    styles: [`
        .target {
            list-style: none;
        }
    `]
})
export class AppComponent {
    public items: any[] = items;
}

export const items: any[] = [{
    text: 'Item1',
    items: [{ text: 'Item1.1' }, { text: 'Item1.2' }]
}, {
    text: 'Item2'
}, {
    text: 'Item3'
}];

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ContextMenuModule } from '@progress/kendo-angular-menu';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Changing Items for Specific Targets

Depending on the filtered target elements, you can change the items that are shown in the ContextMenu by using the popupOpen event.

import { Component } from '@angular/core';
import { ContextMenuPopupEvent, ContextMenuSelectEvent } from '@progress/kendo-angular-menu';

@Component({
    selector: 'my-app',
    template: `
        <ul #target style="display: inline-block;">
            <li *ngFor="let item of data;let index = index" class="target" [attr.data-index]="index">
                {{ item.name }}
            </li>
        </ul>
        <kendo-contextmenu [target]="target" filter=".target" [items]="items"
            (popupOpen)="onPopupOpen($event)" (select)="onSelect($event)">
        </kendo-contextmenu>
    `,
    styles: [`
        .target {
            list-style: none;
        }
    `]
})
export class AppComponent {
    public data: any[] = [{ name: 'Target1' }, { name: 'Target2' }, { name: 'Target3' }];
    public items: any[];

    public onPopupOpen(e: ContextMenuPopupEvent): void {
        const index = this.itemIndex(e);
        const items = [{ text: 'Move Up' }, { text: 'Move Down' }];
        if (index === 0) {
            items.shift();
        } else if (index === this.data.length - 1) {
            items.pop();
        }

        this.items = items;
    }

    public onSelect(e: ContextMenuSelectEvent): void {
        const index = this.itemIndex(e);
        if (e.item.text === 'Move Up') {
            this.swap(index - 1, index);
        } else {
            this.swap(index, index + 1);
        }
    }

    private itemIndex(e: any): number {
        return parseInt(e.target.getAttribute('data-index'), 10);
    }

     private swap(index1: number, index2: number): void {
        const temp = this.data[index1];
        this.data[index1] = this.data[index2];
        this.data[index2] = temp;
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ContextMenuModule } from '@progress/kendo-angular-menu';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Directives

The ContextMenu allows you to associate its target elements with data by using its kendoContextMenuTargetContainer and kendoContextMenuTarget directives.

  1. Set kendoContextMenuTargetContainer to the root element.
  2. Pass the directive to the target input of the ContextMenu.

You have to set the kendoContextMenuTarget directives to the specific elements within the container for which the ContextMenu will open.

import { Component } from '@angular/core';
import { ContextMenuSelectEvent } from '@progress/kendo-angular-menu';
import { items } from './items';

@Component({
    selector: 'my-app',
    template: `
        <ul kendoContextMenuTargetContainer #target="kendoContextMenuTargetContainer"
            style="display: inline-block;list-style: none;">
            <li *ngFor="let item of data" [kendoContextMenuTarget]="item">
                {{ item.name }}
            </li>
        </ul>
        <kendo-contextmenu [target]="target" [items]="items" (select)="onSelect($event)">
        </kendo-contextmenu>
        <div>
            {{ selected }}
        </div>
    `
})
export class AppComponent {
    public data: any[] = [{ name: 'Foo' }, { name: 'Bar' }, { name: 'Baz' }];
    public items: any[] = items;
    public selected: string;

    public onSelect(e: ContextMenuSelectEvent): void {
        this.selected = `Selected option ${ e.item.text } for item ${ e.target.data.name }`;
    }
}

export const items: any[] = [{
    text: 'Item1',
    items: [{ text: 'Item1.1' }, { text: 'Item1.2' }]
}, {
    text: 'Item2'
}, {
    text: 'Item3'
}];

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ContextMenuModule } from '@progress/kendo-angular-menu';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article