Search results

Populate menu items with data source

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.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
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);