All Components

Integration with Data-Bound Components

The ContextMenu provides options for using it together with other data-bound Kendo UI components such as the Grid, Chart, and TreeView.

Grid

To show the ContextMenu for a Grid, use the cellClick event of the Grid and the show method of the ContextMenu.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" (cellClick)="onCellClick($event)">
        </kendo-grid>
        <kendo-contextmenu #gridmenu [items]="items" (select)="onSelect($event)">
        </kendo-contextmenu>
    `
})
export class AppComponent {

    @ViewChild('gridmenu')
    public gridContextMenu: ContextMenuComponent;

    public gridData: any[] = [{ foo: 'foo1', bar: 'bar1' }, { foo: 'foo2', bar: 'bar2' }, { foo: 'foo3', bar: 'bar3' }];
    public items: any[] = [{ text: 'Move Up', icon: 'arrow-up' }, { text: 'Move Down', icon: 'arrow-down' }];

    private contextItem: any;

    public onCellClick(e: any): void {
        if (e.type === 'contextmenu') {
            const originalEvent = e.originalEvent;

            originalEvent.preventDefault();

            this.contextItem = e.dataItem;

            this.gridContextMenu.show({ left: originalEvent.pageX, top: originalEvent.pageY });
        }
    }

    public onSelect({ item }): void {
        const index = this.gridData.indexOf(this.contextItem);

        if (item.text === 'Move Up') {
            if (index > 0) {
                this.swap(index - 1, index);
            }
        } else if (index < this.gridData.length - 1) {
            this.swap(index, index + 1);
        }
    }

    private swap(index1, index2): void {
        const temp = this.gridData[index1];
        this.gridData[index1] = this.gridData[index2];
        this.gridData[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 { GridModule } from '@progress/kendo-angular-grid';

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

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule, GridModule ],
  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);

Chart

To show the ContextMenu for a Chart, use the seriesClick event of the Chart and the show method of the ContextMenu.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart (seriesClick)="onSeriesClick($event)">
          <kendo-chart-series>
            <kendo-chart-series-item type="column" [data]="seriesData" field="sales" categoryField="product">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
        <kendo-contextmenu #chartmenu [items]="items" (select)="onSelect($event)">
        </kendo-contextmenu>
    `
})
export class AppComponent {

    @ViewChild('chartmenu')
    public chartContextMenu: ContextMenuComponent;

    public seriesData: any[] = [{
        product: 'Chai',
        sales: 200
    }, {
        product: 'Change',
        sales: 250
    }, {
        product: 'Others',
        sales: 400
    }];

    public items: any[] = [{ text: 'Remove', icon: 'close' }];

    private contextItem: any;

    public onSeriesClick(e: any): void {
        const originalEvent = e.originalEvent;

        if (originalEvent.type === 'contextmenu') {
            originalEvent.preventDefault();

            this.contextItem = this.seriesData.find(item => item.product === e.category);

            this.chartContextMenu.show({ left: originalEvent.pageX, top: originalEvent.pageY });
        }
    }

    public onSelect(): void {
        const index = this.seriesData.indexOf(this.contextItem);

        this.seriesData = this.seriesData.slice(0, index).concat(this.seriesData.slice(index + 1));
    }
}
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 { ChartModule } from '@progress/kendo-angular-charts';

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

import 'hammerjs';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule, ChartModule ],
  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);

TreeView

To show the ContextMenu for a TreeView, use the nodeClick event of the Chart and the show method of the ContextMenu.

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-treeview
            [nodes]="data"
            textField="text"
            kendoTreeViewExpandable
            kendoTreeViewSelectable
            kendoTreeViewHierarchyBinding
            childrenField="items"
            (nodeClick)="onNodeClick($event)"
        >
        </kendo-treeview>
        <kendo-contextmenu #treemenu [items]="items" (select)="onSelect($event)">
        </kendo-contextmenu>
    `
})
export class AppComponent {

    @ViewChild('treemenu')
    public gridContextMenu: ContextMenuComponent;

    public data: any[] = [
        {
            text: 'Furniture', items: [
                { text: 'Tables & Chairs' },
                { text: 'Sofas' },
                { text: 'Occasional Furniture' }
            ]
        },
        {
            text: 'Decor', items: [
                { text: 'Bed Linen' },
                { text: 'Curtains & Blinds' },
                { text: 'Carpets' }
            ]
        }
    ];
    public items: any[] = [{ text: 'Remove', icon: 'close' }];

    private contextItem: any;

    public onNodeClick(e: any): void {
        if (e.type === 'contextmenu') {
            const originalEvent = e.originalEvent;

            originalEvent.preventDefault();

            this.contextItem = e.item.dataItem;

            this.gridContextMenu.show({ left: originalEvent.pageX, top: originalEvent.pageY });
        }
    }

    public onSelect({ item }): void {
        if (item.text === 'Remove') {
            this.removeItem(this.contextItem, this.data);
        }
    }

    private removeItem(dataItem: any, items: any[]): void {
        const index = items.indexOf(dataItem);
        if (index >= 0) {
            items.splice(index, 1);
        } else {
            items.forEach(item => {
                if (item.items) {
                    this.removeItem(dataItem, item.items);
                }
            });
        }
    }
}
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 { TreeViewModule } from '@progress/kendo-angular-treeview';

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

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ContextMenuModule, TreeViewModule ],
  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