What’s the Angular way to add context menu to Kanban?

[natejacobson]

How can I customize the appearance of Smart Kanban?

[Markov]

In Smart Angular, the recommended way to add a context menu to the Kanban board is by handling the onContextMenu event of the <smart-kanban> component and then showing your own Smart.Menu (or Angular menu) bound to the event.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from 'smart-webcomponents-angular/kanban';
import { MenuModule } from 'smart-webcomponents-angular/menu';

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, KanbanModule, MenuModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Template: 

<smart-kanban
  #kanban
  [columns]="columns"
  [dataSource]="data"
  (onContextMenu)="openContextMenu($event)">
</smart-kanban>

<smart-menu #menu [modal]="true" [mode]="'dropDown'">
  <smart-menu-item>Edit Task</smart-menu-item>
  <smart-menu-item>Delete Task</smart-menu-item>
  <smart-menu-item>Assign To...</smart-menu-item>
</smart-menu>

import { Component, ViewChild } from '@angular/core';
import { KanbanComponent } from 'smart-webcomponents-angular/kanban';
import { MenuComponent } from 'smart-webcomponents-angular/menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('kanban', { static: true }) kanban!: KanbanComponent;
  @ViewChild('menu', { static: true }) menu!: MenuComponent;

  columns = [
    { label: 'To Do', dataField: 'toDo' },
    { label: 'In Progress', dataField: 'inProgress' },
    { label: 'Done', dataField: 'done' }
  ];

  data = [
    { id: 1, text: 'Create new feature', status: 'toDo' },
    { id: 2, text: 'Fix bug #42', status: 'inProgress' },
    { id: 3, text: 'Release version 1.0', status: 'done' }
  ];

  openContextMenu(event: CustomEvent) {
    event.preventDefault(); // prevent browser context menu
    const { originalEvent, target } = event.detail;

    // You can check target type: card, column, kanban
    console.log('Context menu target:', target);

    // Position menu at mouse pointer
    this.menu.open(originalEvent.pageX, originalEvent.pageY);
  }
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts