Our flexible Kanban board for managing tasks with drag drop


How to group by an object array column on TaskBoard

Post Reply

Post by philseeman »

I can't figure out how to group by an object array column on the TaskBoard.

I have this code:

    const
        itemTypes = ['Note', 'Task'],
        statuses = ['Todo', 'Doing', 'Review', 'Done'],
        prios = ['Critical', 'High', 'Medium', 'Low']


        tbar: [
            {
                type: 'combo',
                label: 'Group by',
                editable: false,
                inputWidth: '7em',
                valueField: 'id',
                displayField: 'title',
                items: [
                    { id: 'currentProject', title: 'Project', columns: projectData },
                    { id: 'itemType', title: 'Item Type', columns: itemTypes }, 
                    { id: 'status', title: 'Status', columns: statuses },
                    { id: 'prio', title: 'Prio', columns: prios }
                ],
                value: 'status',
                onSelect({ record }) {
                    taskBoard.columnField = record.id;
                    taskBoard.columns = record.columns;
                }
            }
        ]

Group By works fine for itemType, status, and prio, which are all just strings. However, projectData looks like this, which I built as per the ColumnModel:

[{"id":"648fe8a2f06938847cf6d54f","text":"Board of Directors"},{"id":"648fe8a2f06938847cf6d550","text":"Bocce"},{"id":"648fe8a2f06938847cf6d551","text":"Family"},{"id":"648fe8a2f06938847cf6d552","text":"Angie"},
{"id":"648fe8a2f06938847cf6d553","text":"Luna"},{"id":"648fe8a2f06938847cf6d554","text":"Finances"},{"id":"648fe8a2f06938847cf6d555","text":"Running"},{"id":"648fe8a2f06938847cf6d556","text":"Testing"}]

and Group By doesn't display any project columns. What am I doing wrong?

Post by mats »

displayField: 'title',

If your data uses 'text' as the display field, you need to change your displayField to reflect this. Change to:

displayField: 'text',

Does that fix it?

Post by philseeman »

Hi Mats,

No, that didn't help. From what I can see, it seems that "displayField" controls what gets shown in the columns dropdown list, not the actual columns themselves.

Post by alex.l »

Group By works fine for itemType, status, and prio, which are all just strings.

Hi, could you please post all related data: itemTypes, statuses, prios and initial data you loaded to a TaskBoard. It might be also useful to see the full config you used to init the TaskBoard.

Thanks!

All the best,
Alex

Post by philseeman »

Here you go. I'm actually using this inside of a Blazor project but I don't think that matters for this issue.

export function RunTaskBoard() {

// Custom task model with additional fields used by the demo
class DisplayItem extends bryntum.taskboard.TaskModel {
    static get fields() {
        return [
            'itemType',
            'location',
            'currentProject'
        ];
    }
}

// Available values per custom field, used to create columns and to populate combos in the task editor
const
    itemTypes = ['Note', 'Task'],
    statuses = ['Todo', 'Doing', 'Review', 'Done'],
    prios = ['Critical', 'High', 'Medium', 'Low'],
    icons = {
        Bug: 'bug',
        'Feature request': 'user',
        Done: 'circle-check',
        High: 'circle-exclamation',
        Critical: 'triangle-exclamation',
        Q1: 'clock'
    },
    // Convenience fn to create a icon config if there is an icon for the value
    getIcon = value => icons[value] ? { tag: 'i', class: `b-fa b-fa-${icons[value]}` } : null;

var projectData = [''];

taskBoardModule.dotNetReference.invokeMethodAsync('GetProjectData').then(data => {
    debugger;
    projectData = data;

    const taskBoard = new bryntum.taskboard.TaskBoard({

        appendTo: 'container',

        // Field used to link tasks to columns
        columnField: 'status',

        // Initial set of columns
        columns: [
            'Todo',
            'Doing',
            'Review',
            'Done'
        ],

        // Headers should stick to the top
        stickyHeaders: true,

        // Hide column tiles on collapse
        collapseTitle: true,

        // Toolbar with a combo used to pick field to generate columns from
        tbar: [
            {
                type: 'combo',
                label: 'Group by',
                editable: false,
                inputWidth: '7em',
                valueField: 'id',
                displayField: 'title',
                items: [
                    { id: 'currentProject', title: 'Project', columns: projectData },    <==== this is the issue
                    { id: 'itemType', title: 'Item Type', columns: itemTypes },
                    { id: 'status', title: 'Status', columns: statuses },
                    { id: 'prio', title: 'Prio', columns: prios }
                ],
                value: 'status',
                onSelect({ record }) {
                    taskBoard.columnField = record.id;
                    taskBoard.columns = record.columns;
                }
            }
        ]

    });

});

Post by alex.l »

Hi, I would like to see an entire data you used in TaskBoard.

I can purpose that currentProject field that you used as columnField value when group by projectData might not contain values like
"648fe8a2f06938847cf6d54f", "648fe8a2f06938847cf6d550" that used in projectData as values to group by.

That also help a lot to proceed faster if you could collect all code pieces you posted into one runnable application and share the code here with steps to reproduce. That shouldn't take a lot of time for you if you'll use one of our demos as a base and just apply required changes.

All the best,
Alex

Post by alex.l »

Here is a runnable code that I created collected code snippets you posted here together, but used my own version of data. You can simply copy paste it into one of our demos locally (check /examples folder if sources you downloaded) and check it.

import '../_shared/shared.js'; // not required, our example styling etc.
import TaskBoard from '../../lib/TaskBoard/view/TaskBoard.js';

const
    itemTypes = ['Note', 'Task'],
    statuses = ['todo', 'doing', 'review', 'done'],
    prios = ['critical', 'high', 'medium', 'low'],
    icons = {
        Bug: 'bug',
        'Feature request': 'user',
        Done: 'circle-check',
        High: 'circle-exclamation',
        Critical: 'triangle-exclamation',
        Q1: 'clock'
    },
    // Convenience fn to create a icon config if there is an icon for the value
    getIcon = value => icons[value] ? { tag: 'i', class: `b-fa b-fa-${icons[value]}` } : null;

var projectData = [{"id":"648fe8a2f06938847cf6d54f","text":"Board of Directors"},{"id":"648fe8a2f06938847cf6d550","text":"Bocce"},{"id":"648fe8a2f06938847cf6d551","text":"Family"},{"id":"648fe8a2f06938847cf6d552","text":"Angie"},
{"id":"648fe8a2f06938847cf6d553","text":"Luna"},{"id":"648fe8a2f06938847cf6d554","text":"Finances"},{"id":"648fe8a2f06938847cf6d555","text":"Running"},{"id":"648fe8a2f06938847cf6d556","text":"Testing"}];

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

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

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

tbar: [
    {
        type: 'combo',
        label: 'Group by',
        editable: false,
        inputWidth: '7em',
        valueField: 'id',
        displayField: 'title',
        items: [
            { id: 'currentProject', title: 'Project', columns: projectData },
            { id: 'itemType', title: 'Item Type', columns: itemTypes },
            { id: 'status', title: 'Status', columns: statuses },
            { id: 'prio', title: 'Prio', columns: prios }
        ],
        value: 'status',
        onSelect({ record }) {
            taskBoard.columnField = record.id;
            taskBoard.columns = record.columns;
        }
    }
],

// 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', itemType: 'Note', currentProject: "648fe8a2f06938847cf6d54f" },
        { id : 2, name : 'Book hotel', status : 'done', prio : 'medium', itemType: 'Note', currentProject: "648fe8a2f06938847cf6d54f" },
        { id : 3, name : 'Pack bags', status : 'doing', prio : 'low', itemType: 'Note', currentProject: "648fe8a2f06938847cf6d54f" },
        { id : 4, name : 'Get visa', status : 'doing', prio : 'high', itemType: 'Note', currentProject: "648fe8a2f06938847cf6d54f" },
        { id : 5, name : 'Book train', status : 'done', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d550" },
        { id : 6, name : 'Go to airport', status : 'todo', prio : 'low', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d550" },
        { id : 7, name : 'Renew passport', status : 'todo', prio : 'high', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d550" },
        { id : 8, name : 'Swim in pool', status : 'todo', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d550" },
        { id : 9, name : 'Scuba diving', status : 'todo', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d550" },
        { id : 10, name : 'Canyoning', status : 'todo', prio : 'low', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d551" },
        { id : 11, name : 'Snorkeling', status : 'doing', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d551" },
        { id : 12, name : 'Diving license', status : 'todo', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d551" },
        { id : 13, name : 'Book cab', status : 'done', prio : 'low', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d551" },
        { id : 14, name : 'Write postcards', status : 'todo', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d551" },
        { id : 15, name : 'Take pictures', status : 'todo', prio : 'low', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d551" },
        { id : 16, name : 'Take selfies', status : 'todo', prio : 'high', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d551" },
        { id : 17, name : 'Post on instagram', status : 'todo', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d555" },
        { id : 18, name : 'Call grandma', status : 'todo', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d555" },
        { id : 19, name : 'Buy swimming ring', status : 'done', prio : 'high', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d555" },
        { id : 20, name : 'Get in shape', status : 'doing', prio : 'medium', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d555" },
        { id : 21, name : 'Iron shirts', status : 'done', prio : 'low', itemType: 'Task', currentProject: "648fe8a2f06938847cf6d555" }
    ],

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

And video here

Screen Recording 2023-07-07 at 10.59.27.mov
(3.21 MiB) Downloaded 30 times

All the best,
Alex

Post Reply