Having trouble getting help?
Contact Support
Contact Support
Header double click in Angular Kanban component
27 Apr 20243 minutes to read
You can bind the header double click event using dataBound
event at initial rendering. You can get the column header text when double click the headers.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { KanbanModule } from '@syncfusion/ej2-angular-kanban'
import { Component } from '@angular/core';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { DialogUtility } from '@syncfusion/ej2-popups';
import { closest } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource';
@Component({
imports: [
KanbanModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' (dataBound)='OnDataBound()'>
<e-columns>
<e-column headerText='To do' keyField='Open'></e-column>
<e-column headerText='In Progress' keyField='InProgress'></e-column>
<e-column headerText='Testing' keyField='Testing'></e-column>
<e-column headerText='Done' keyField='Close'></e-column>
</e-columns>
</ejs-kanban>`
})
export class AppComponent {
public data: Object[] = kanbanData;
public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
};
OnDataBound(): void {
let headerEle: HTMLElement = document.querySelector('.e-header-row') as HTMLElement;
headerEle.addEventListener("dblclick", function (e: Event) {
let target = closest((<HTMLElement>e.target), '.e-header-cells');
DialogUtility.alert({
title: 'Header',
content: "Double clicked on " + (<HTMLElement>target.querySelector('.e-header-text')).innerText + " header",
showCloseIcon: true,
closeOnEscape: true,
animationSettings: { effect: 'Zoom' }
});
});
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));