'tasksPerRow' config is not working TaskBoardConfig in angular

[jitendra_bryntum]

Hi,

tasksPerRow: 2 config property is not working in this angular config setting for taskboard in below code:

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  

    tasksPerRow          : 2,	
    

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
},
};

However, the tasksPerRow:itemPerRow setting is working fine in the below settings

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}
    ]

please suggest what is missing in this?

Thanks,

[tasnim]

Hi,

Welcome To our forums !

Have you added tasksPerRow to the HTML markup ?

<bryntum-task-board
	[tasksPerRow] = "taskBoardConfig.tasksPerRow!"
</bryntum-task-board>

[jitendra_bryntum]

Hi @tasnim,

Thanks for this update. I have missed this setting in HTML markup. Now when adding this to HTML its working fine.