Context Menus

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeColumn, OgeGrid } from '@oge-ui/grid';
import type { OgeContextMenuEvent } from '@oge-ui/grid';

interface Employee {
  id: number;
  firstName: string;
  lastName: string;
  department: string;
  city: string;
  salary: number;
  hireDate: string;
}

@Component({
  selector: 'demo-root',
  imports: [OgeColumn, OgeGrid],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-grid [data]="employees" keyField="id"
              (rowContextMenu)="onRowMenu($event)">
      <oge-column field="firstName" />
      <oge-column field="department" />
    </oge-grid>
  `,
})
export class Demo {
  readonly employees = [
    { id: 1, firstName: 'Ali', lastName: 'Yılmaz', department: 'Engineering', city: 'İstanbul', salary: 8400, hireDate: '2019-03-11' },
    { id: 2, firstName: 'Ayşe', lastName: 'Kaya', department: 'Sales', city: 'Ankara', salary: 7200, hireDate: '2020-07-02' },
    { id: 3, firstName: 'Mehmet', lastName: 'Demir', department: 'Engineering', city: 'İzmir', salary: 9100, hireDate: '2018-01-23' },
    { id: 4, firstName: 'Zeynep', lastName: 'Şahin', department: 'Finance', city: 'İstanbul', salary: 6800, hireDate: '2021-11-15' },
    { id: 5, firstName: 'Emre', lastName: 'Çelik', department: 'Support', city: 'Bursa', salary: 5400, hireDate: '2022-05-09' },
  ];

  protected onRowMenu(event: OgeContextMenuEvent<Employee>): void {
    // push items to open the built-in menu at the cursor;
    // leave the array empty to fall back to the native browser menu
    event.items.push(
      { text: `Open ${event.row.firstName}`, action: () => this.open(event.row) },
      { text: 'Duplicate', action: () => this.duplicate(event.key) },
      { text: 'Delete (no permission)', disabled: true },
    );
  }

  private open(row: Employee): void {
    console.log('open', row.id);
  }

  private duplicate(key: unknown): void {
    console.log('duplicate', key);
  }
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeColumn, OgeGrid } from '@oge-ui/grid';
import type { OgeHeaderContextMenuEvent } from '@oge-ui/grid';

@Component({
  selector: 'demo-root',
  imports: [OgeColumn, OgeGrid],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-grid [data]="employees" keyField="id" [groupPanel]="true"
              (headerContextMenu)="onHeaderMenu($event)">
      <oge-column field="department" />
      <oge-column field="salary" dataType="number" />
    </oge-grid>
  `,
})
export class Demo {
  readonly employees = [
    { id: 1, firstName: 'Ali', lastName: 'Yılmaz', department: 'Engineering', city: 'İstanbul', salary: 8400, hireDate: '2019-03-11' },
    { id: 2, firstName: 'Ayşe', lastName: 'Kaya', department: 'Sales', city: 'Ankara', salary: 7200, hireDate: '2020-07-02' },
    { id: 3, firstName: 'Mehmet', lastName: 'Demir', department: 'Engineering', city: 'İzmir', salary: 9100, hireDate: '2018-01-23' },
    { id: 4, firstName: 'Zeynep', lastName: 'Şahin', department: 'Finance', city: 'İstanbul', salary: 6800, hireDate: '2021-11-15' },
    { id: 5, firstName: 'Emre', lastName: 'Çelik', department: 'Support', city: 'Bursa', salary: 5400, hireDate: '2022-05-09' },
  ];

  protected onHeaderMenu(event: OgeHeaderContextMenuEvent): void {
    // the built-in items (sort / group / pin / hide) arrive prebuilt —
    // extend, filter or replace them before the menu opens
    event.items.push({
      text: `Reset ${event.caption} filter`,
      action: () => this.clearFilterFor(event.field),
    });
    if (event.field === 'salary') {
      event.items = event.items.filter((item) => !item.text.startsWith('Pin'));
    }
  }

  private clearFilterFor(field: string | undefined): void {
    console.log('clear filter for', field);
  }
}