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:
- A DOM element.
- A CSS selector.
- An
ElementRef
class. - A
kendoContextMenuTargetContainer
.
import { Component } from '@angular/core';
import { items } from './items';
@Component({
selector: 'my-app',
template: `
<div #target>
Target
</div>
<kendo-contextmenu [target]="target" [items]="items">
</kendo-contextmenu>
`
})
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.
- Set the
target
input to the container element. - 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.
- Set
kendoContextMenuTargetContainer
to theroot
element. - 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);