Our flexible Kanban board for managing tasks with drag drop


Post by jitendra_bryntum »

Hi,

We have this footerItems config for our taskboard.

footerItems : {
        estimatedMargin: {
            type: 'template',
            template: ({ value }: { value: any }): string => {
                var k = `<div class="adjustedStack">
                            <div class="custom-tooltip" data-btip=WoMargin data-btip-scroll-action="realign">
                                <div class="custom-tooltip-data">${value}</div> 
                                <div class="icon-container">
                                    <i class="b-fa-duotone b-fa-greater-than b-fa-2xs icon"></i>
                                </div>
                            </div>
                        </div>`;
                return k;
            },
        },
    },

Now we want to add onclick event handler from angular component to this item on this element..

<div class="icon-container">
	<i class="b-fa-duotone b-fa-greater-than b-fa-2xs icon"></i>
</div>

Here is our component code...

import { Component, ViewChild, AfterViewInit, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
import { BryntumTaskBoardComponent, BryntumProjectModelComponent } from '@bryntum/taskboard-angular';
import { TaskBoard } from '@bryntum/taskboard';

@Component({
  selector: 'app-opportunity',
  templateUrl: './opportunity.component.html',
  styleUrls: ['./opportunity.component.css'],
  encapsulation : ViewEncapsulation.None
})
export class OpportunityComponent implements AfterViewInit {
	// Bryntum TaskBoard Angular wrapper reference
    @ViewChild(BryntumTaskBoardComponent, { static : false }) taskboardComponent!: BryntumTaskBoardComponent;
    @ViewChild(BryntumProjectModelComponent, { static : true }) project!: BryntumProjectModelComponent;

taskBoardConfig = opportunityBoardConfig;

ngAfterViewInit(): void {
    this.taskboard = this.taskboardComponent.instance;
}

handleFooterItemClick(){ // this need to assign to onClick of footer item in config file
}

}

How to do this?


Post by tasnim »

You can add a click listener using EventHelper.addListener https://bryntum.com/products/taskboard/docs/api/Core/helper/EventHelper#function-addListener-static

    ngAfterViewInit(): void {
        this.taskboard = this.taskboardComponent.instance;
        EventHelper.addListener(this.taskboard.element, 'click', () => {
            console.log('clicked');
        }, { delegate : '.icon-container' });
    }

Hope this helps.

If you have any other questions or concerns, please don't hesitate to reach out.

Best regards,
Tasnim


Post by jitendra_bryntum »

Hi,

Thanks for the reply.

ngAfterViewInit(): void {
        this.taskboard = this.taskboardComponent.instance;

    this.taskboard.on('taskclick', ({ taskRecord, event }) => {
        if (event.target.matches('.b-fa-greater-than')) {
            this.handleEstimatedMarginClick(taskRecord)
        }           
    });
 }

This is worked for me.
Thanks!


Post Reply