Hi,
i am trying to change column tooltip value dynamically on an event click as below:
import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from '@angular/core';
import { BryntumTaskBoardComponent } from '@bryntum/taskboard-angular';
import { Button, TaskBoard, Toast, MessageDialog, StringHelper, ColumnModel } from '@bryntum/taskboard';
import { taskBoardConfig } from './taskboard.config';
@Component({
selector: 'deals-taskboard',
templateUrl: './taskboard.component.html',
styleUrls: ['./taskboard.component.css'],
encapsulation : ViewEncapsulation.None
})
export class TaskboardComponent implements AfterViewInit {
taskBoardConfig = taskBoardConfig;
@ViewChild(BryntumTaskBoardComponent, { static : false }) taskboardComponent: BryntumTaskBoardComponent;
private taskboard: TaskBoard;
onBeforeTaskDrag({ event }: { event: any }): any {
this.taskBoardConfig.showCollapseInHeader = false;
const columns = this.taskBoardConfig.columns as ColumnModel[];
columns.forEach(column => {
switch (column.id) {
case 'Q1':
column.tooltip = 'New Tooltip for Profile';
break;
case 'Q2':
column.tooltip = 'New Tooltip for Demonstrate';
break;
// Add more cases for other columns if needed
}
});
this.taskBoardConfig.refresh();
}
}
But this code is not changing the column tooltip value as expected.
The config setting files code is as below:
import { ColumnModel, TaskModel, StringHelper, TaskBoardConfig } from '@bryntum/taskboard';
// Custom task model with additional fields used by the demo
class CustomTask extends TaskModel {
static override fields = [
'team',
'progress',
'prio',
];
}
const itemPerRow = 1;
export const taskBoardConfig: Partial<TaskBoardConfig> = {
useDomTransition : true, // Experimental, transition moving cards using the editor
stickyHeaders : true, // Want headers to stick to the top,
showCollapseInHeader : true, // Hide column collapse tool
showCountInHeader : true, // Hide task count from column headers
resourceImagePath : 'assets/users/', // Url for resource avatar images
features : {
// Allow dragging columns
columnDrag : true,
taskDrag:true,
taskTooltip:false,
},
columns : [
{ id : 'Q1', text : `Profile`, tooltip:'$500 EST Margin', tasksPerRow:itemPerRow},
{ id : 'Q2', text : 'Demonstrate', tooltip:'$500 EST Margin', tasksPerRow:itemPerRow},
{ id : 'Q3', text : 'Comparison', tooltip:'$500 EST Margin', tasksPerRow:itemPerRow},
{ id : 'Q4', text : 'Close', tooltip:'$500 EST Margin', tasksPerRow:itemPerRow}
],
columnField : 'status
project : {
taskStore: {fields : ['quarter', 'category', 'team', 'tags']},
taskModelClass : CustomTask,
transport : {
load : {
url : '../../../../assets/data/data_wo_deals.json'
}
},
autoLoad : true
},
tasksPerRow : 2,
};
Also it would be great if we can have documentation for angular related configuration and settings of taskboard.
kindly suggest.