Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
To bind local data source to the ContextMenu, menu items are populated from data source and mapped
to items property.
The below example demonstrates how to bind local data source to the ContextMenu.
import { Component } from '@angular/core';
import { MenuEventArgs, MenuItemModel } from '@syncfusion/ej2-navigations';
import { Record, data } from './datasource';
@Component({
selector: 'app-root',
template: `<!--target element-->
<div id="target">Right click / Touch hold to open the ContextMenu</div>
<!-- To Render ContextMenu. -->
<ejs-contextmenu id='contextmenu' target='#target' [items]= 'items'
(beforeItemRender)='itemRender($event)'></ejs-contextmenu>`
})
export class AppComponent {
public items: MenuItemModel[] = this.Items();
public Items() {
let record: Record;
let menuItems: any[] = [];
for (let i = 0; i < data.length; i++) {
record = data[i] as Record;
if (record.parentId) {
if (!menuItems[record.parentId - 1].items) {
menuItems[record.parentId - 1].items = []
}
menuItems[record.parentId - 1].items.push({ text: record.text });
} else {
menuItems.push({ text: record.text });
}
}
return menuItems;
}
public itemRender(args: MenuEventArgs ) {
if (!args.item.text) {
args.element.classList.add('e-separator');
}
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ContextMenuModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }export let data: Record[] = [
{ id: 1, parentId: null, text: 'View' },
{ id: 2, parentId: null, text: 'Sort by' },
{ id: 3, parentId: null, text: 'New' },
{ id: 4, parentId: null, text: 'Display Settings' },
{ id: 5, parentId: null, text: 'Personalize' },
//first level child
{ id: 6, parentId: 1, text: 'Large Icons' },
{ id: 7, parentId: 1, text: 'Medium Icons' },
{ id: 8, parentId: 1, text: 'Small Icons' },
{ id: 9, parentId: 2, text: 'Name' },
{ id: 10, parentId: 2, text: 'Size' },
{ id: 11, parentId: 4, text: 'Folder' },
{ id: 12, parentId: 4, text: 'Shortcut' },
{ id: 13, parentId: 4, text: 'Contact' }
];
export interface Record {
id: number,
parentId: number,
text: string
}import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);