How to change column tooltip value dynamically in angular taskboard?

[jitendra_bryntum]

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.

[marcio]

Hey,

Great to have you here on the forums!

You can use the https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-tooltipRenderer instead of the tooltip config to dynamically render content inside the tooltip.

Also, note that configs cannot be overridden during runtime, only properties.

We have an Angular guide explaining how to set up configurations and features https://bryntum.com/products/grid/docs/guide/Grid/integration/angular/guide

[jitendra_bryntum]

Hi @marico,

you provided the reference of 'Grid' but i am looking this feature in Taskboard Product. However i have tried to add this in taskboard coulmn but its giving me the error as 'Type '{ id: string; text: string; tooltip: string; tooltipRenderer: (column: any) => string; }' is not assignable to type 'string'.

my config 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', tooltipRenderer: (column) => {
            return 'Custom Tooltip for Demonstrate';
        },
    { id : 'Q2', text : 'Demonstrate', tooltip:'$500 EST Margin', tooltipRenderer: (column) => {
            return 'Custom Tooltip for Demonstrate';
        }},
    { id : 'Q3', text : 'Comparison', tooltip:'$500 EST Margin', tooltipRenderer: (column) => {
            return 'Custom Tooltip for Demonstrate';
        }},
    { id : 'Q4', text : 'Close', tooltip:'$500 EST Margin', tooltipRenderer: (column) => {
            return 'Custom Tooltip for Demonstrate';
        }}
],
columnField : 'status
   

};

i need to change column tooltip value dynamically on card drag event in taskboard.

Kindly suggest.

[tasnim]

Hi,

Sorry for the misconception. You could use TaskTooltip feature to achieve this.
Please check the docs here https://bryntum.com/products/taskboard/docs/api/TaskBoard/feature/TaskTooltip

To customize the contents, supply your own template
Example

    features : {
        columnToolbars : false,
        taskTooltip    : {
            template({ taskRecord }) {
                return `
                    <span style="color : #aaa">#${taskRecord.id}</span>
                    ${taskRecord.name}
                `;
            }
        }
    }

Best of luck ,
Tasnim

[jitendra_bryntum]

Hi @tasnim,

Thanks for your reply, but you provided the info related to 'Task' entity and i am looking for 'Column' entity.

Kindly suggest how to change tooltip value of columns in taskboard.

Thanks

[tasnim]

Ah, Sorry. I misunderstood.

I see you're setting the tooltip of column it shouldn't need any refresh. You just need to do it with the taskboard instance, not the taskboard config

Please check this guide on how to get the instance of Taskboard https://bryntum.com/products/taskboard/docs/guide/TaskBoard/integration/angular/guide#accessing-the-bryntum-taskboard-instance

And then you can change it like this for example

const column = taskBoardInstance.columns.first;
column.tooltip = 'Your tooltip text'

[jitendra_bryntum]

Hi @tasnim,

for me the below code is working for this issue:

const column = this.taskboard.columns.first;
(column as any).tooltip = 'Your tooltip text';
(column as any).tasksPerRow = 1;

Without Type Assertion as

(column as any)

i am getting error as

Property 'tooltip' does not exist on type 'Model'.

Also when the tooltip and taskPerRow value changes on column the taskboard is disappering for some fraction of time i.e. approx 2 seconds and then appears back with updated data.

any information on this?

Thanks

[tasnim]

Hi,

I tried with our angular example and everything is working properly fine.

chrome_SYLrh6gidn.gif (627.69 KiB) Viewed 356 times

Please check the attached app

[jitendra_bryntum]

Hi @tasnim,

Thanks for reply.

This is happening due to the property 'useDomTransition'. if 'useDomTransition=true' and we are using this in HTML markup as

<bryntum-task-board
    #taskboard
    [project] = "taskBoardConfig.project"
    [useDomTransition] = "taskBoardConfig.useDomTransition"
</bryntum-task-board>

then its flick the taskboard to reload the values. if we remove this from HTML then its not flicking away the screen.

Thanks

[tasnim]

Hi,

I'm not sure what problems you're facing. Can you please share a video showcase on what problems you are facing? I tried toggling useDomTransition but no luck on reproduction.