Our flexible Kanban board for managing tasks with drag drop


Post by nj12345 »

Hi, I am trying to display the avatar of multiple resources for a task. Currently I am using

resourceId

that works fine for single assignments but will not show when multi-assigned. I have seen here - https://bryntum.com/docs/taskboard/api/TaskBoard/model/TaskModel#field-resources to use

resources

instead. However when doing that I now get a blank card even with one resource.


Post by tasnim »

Hi,
It works fine on my side. Here is the config :

const taskBoard = new TaskBoard({
    appendTo : 'container',

// Url for resource avatar images
resourceImagePath : '../_shared/images/users/',

// Experimental, transition moving cards using the editor
useDomTransition : true,

// Columns to display
columns : [
    { id : 'todo', text : 'Todo', color : 'orange' },
    { id : 'doing', text : 'Doing', color : 'blue', tooltip : 'Items that are currently in progress' },
    { id : 'done', text : 'Done' }
],

// Field used to pair a task to a column
columnField : 'status',

// Project using inline data
project : {
    tasks : [
        { id : 1, name : 'Book flight', status : 'done', prio : 'medium' },
        { id : 2, name : 'Book hotel', status : 'done', prio : 'medium' },
        { id : 3, name : 'Pack bags', status : 'doing', prio : 'low' },
        { id : 4, name : 'Get visa', status : 'doing', prio : 'high' },
        { id : 5, name : 'Book train', status : 'done', prio : 'medium' },
        { id : 6, name : 'Go to airport', status : 'todo', prio : 'low' },
        { id : 7, name : 'Renew passport', status : 'todo', prio : 'high' },
        { id : 8, name : 'Swim in pool', status : 'todo', prio : 'medium' },
        { id : 9, name : 'Scuba diving', status : 'todo', prio : 'medium' },
        { id : 10, name : 'Canyoning', status : 'todo', prio : 'low' },
        { id : 11, name : 'Snorkeling', status : 'doing', prio : 'medium' },
        { id : 12, name : 'Diving license', status : 'todo', prio : 'medium' },
        { id : 13, name : 'Book cab', status : 'done', prio : 'low' },
        { id : 14, name : 'Write postcards', status : 'todo', prio : 'medium' },
        { id : 15, name : 'Take pictures', status : 'todo', prio : 'low' },
        { id : 16, name : 'Take selfies', status : 'todo', prio : 'high' },
        { id : 17, name : 'Post on instagram', status : 'todo', prio : 'medium' },
        { id : 18, name : 'Call grandma', status : 'todo', prio : 'medium' },
        { id : 19, name : 'Buy swimming ring', status : 'done', prio : 'high' },
        { id : 20, name : 'Get in shape', status : 'doing', prio : 'medium' },
        { id : 21, name : 'Iron shirts', status : 'done', prio : 'low' }
    ],

    resources : [
        { id : 1, name : 'Angelo', image : 'angelo.jpg' },
        { id : 2, name : 'Celia', image : 'celia.jpg' },
        { id : 3, name : 'Dave', image : 'dave.jpg' },
        { id : 4, name : 'Emilia', image : 'emilia.jpg' },
        { id : 5, name : 'Gloria', image : 'gloria.jpg' },
        { id : 6, name : 'Henrik', image : 'henrik.jpg' },
        { id : 7, name : 'Kate', image : 'kate.jpg' },
        { id : 8, name : 'Lee', image : 'lee.jpg' },
        { id : 9, name : 'Lisa', image : 'lisa.jpg' },
        { id : 10, name : 'Mark', image : 'mark.jpg' },
        { id : 11, name : 'Steve', image : 'steve.jpg' }
    ],

    assignments : [
        { id : 1, event : 7, resource : 1 },
        { id : 2, event : 7, resource : 2 },
        { id : 3, event : 8, resource : 2 },
        { id : 4, event : 4, resource : 3 },
        { id : 5, event : 7, resource : 3 },
        { id : 6, event : 7, resource : 4 },
        { id : 7, event : 7, resource : 5 },
        { id : 8, event : 7, resource : 6 },
        { id : 9, event : 7, resource : 7 },
        { id : 10, event : 7, resource : 8 },
        { id : 11, event : 7, resource : 9 },
        { id : 12, event : 7, resource : 10 },
        { id : 13, event : 7, resource : 11 },
        { id : 14, event : 16, resource : 7 },
        { id : 15, event : 16, resource : 8 },
        { id : 16, event : 16, resource : 9 },
        { id : 17, event : 16, resource : 10 },
        { id : 18, event : 16, resource : 11 },
        { id : 19, event : 19, resource : 10 },
        { id : 20, event : 9, resource : 7 },
        { id : 21, event : 12, resource : 8 },
        { id : 22, event : 14, resource : 9 },
        { id : 23, event : 17, resource : 10 },
        { id : 24, event : 18, resource : 10 },
        { id : 25, event : 11, resource : 9 },
        { id : 26, event : 20, resource : 8 },
        { id : 27, event : 1, resource : 7 },
        { id : 28, event : 2, resource : 6 },
        { id : 29, event : 5, resource : 5 },
        { id : 30, event : 6, resource : 4 },
        { id : 31, event : 10, resource : 3 },
        { id : 32, event : 15, resource : 2 },
        { id : 33, event : 3, resource : 1 },
        { id : 34, event : 13, resource : 2 },
        { id : 36, event : 8, resource : 3 },
        { id : 37, event : 17, resource : 9 },
        { id : 38, event : 17, resource : 8 },
        { id : 39, event : 17, resource : 7 },
        { id : 40, event : 17, resource : 6 }
    ]
}
});

Please check it yourself and try to find out, what did you do wrong? if not, then please paste your config here we'll check it.

Best regards,
Tasnim


Post Reply