Hello,
I would like to integrate the tagCombo into the Taskboard component. Here is the configuration of my component:
"use client";
import { Store } from "@bryntum/taskboard";
import { BryntumTaskBoard } from "@bryntum/taskboard-react";
import { useRef, useState } from "react";
export default function Taskboard() {
const tagsStore = new Store({
data: [
{ id: "/api/tags/1", title: "tag 01" },
{ id: "/api/tags/2", title: "tag 02" },
{ id: "/api/tags/3", title: "tag 03" },
{ id: "/api/tags/4", title: "tag 04" },
],
});
const [taskboard] = useState({
useDomTransition: true,
columnField: "columns",
taskDragFeature: true,
columnToolbarsFeature: true,
columnRenameFeature: true,
taskEditFeature: {
items: {
tags: {
type: "tagCombo",
label: "tag",
name: "tags",
displayField: "title",
valueField: null,
store: tagsStore,
},
},
},
footerItems: {
tags: { type: "tags", textProperty: "title" },
},
project: {
transport: {
load: {
url: "apidata.json",
},
},
autoLoad: true,
},
});
const taskBoardRef = useRef(null);
return (
<>
<BryntumTaskBoard ref={taskBoardRef} {...taskboard} />
</>
);
}
The model data comes from my REST API.
{
"success": true,
"tasks": {
"rows": [
{
"name": "Tache 01",
"direction": null,
"note": null,
"readOnly": null,
"eventColor": "teal",
"constraintDate": null,
"constraintType": null,
"deadlineDate": null,
"duration": null,
"durationUnit": "day",
"effort": null,
"effortDriven": null,
"effortUnit": null,
"endDate": "2025-06-19T00:00:00+02:00",
"ignoreResourceCalendar": null,
"inactive": null,
"manuallyScheduled": null,
"percentDone": null,
"projectConstraintResolution": null,
"schedulingMode": null,
"slackUnit": null,
"startDate": "2025-06-03T00:00:00+02:00",
"unscheduled": false,
"cls": "",
"iconCls": null,
"style": null,
"taskIconCls": null,
"expanded": null,
"parentIndex": 0,
"orderedParentIndex": null,
"status": null,
"weight": 100,
"prio": null,
"draggable": null,
"resizable": null,
"allDay": false,
"recurrenceRule": null,
"milestoneWidth": null,
"stickyContents": null,
"id": "/api/tasks/19",
"columns": "/api/columns/19",
"tags": [
{ "id": "/api/tags/1", "title": "tag 01" },
{ "id": "/api/tags/2", "title": "tag 02" }
]
},
{
"name": "Tache 02",
"direction": null,
"note": null,
"readOnly": null,
"eventColor": "magenta",
"constraintDate": null,
"constraintType": null,
"deadlineDate": null,
"duration": null,
"durationUnit": "day",
"effort": null,
"effortDriven": null,
"effortUnit": null,
"endDate": "2025-07-04T00:00:00+02:00",
"ignoreResourceCalendar": null,
"inactive": false,
"manuallyScheduled": null,
"percentDone": null,
"projectConstraintResolution": null,
"schedulingMode": null,
"slackUnit": null,
"startDate": "2025-06-03T00:00:00+02:00",
"unscheduled": false,
"cls": "",
"iconCls": null,
"style": null,
"taskIconCls": null,
"expanded": null,
"parentIndex": 1,
"orderedParentIndex": null,
"status": null,
"weight": 100,
"prio": null,
"draggable": null,
"resizable": null,
"allDay": false,
"recurrenceRule": null,
"milestoneWidth": null,
"stickyContents": null,
"id": "/api/tasks/20",
"columns": "/api/columns/20"
}
]
},
"calendars": {
"rows": [
{
"readOnly": null,
"cls": null,
"iconCls": null,
"ignoreTimeZone": null,
"name": "général",
"treatInconsistentIntervals": null,
"unspecifiedTimeIsWorking": true,
"expanded": null,
"intervals": [
{
"id": 1,
"readOnly": null,
"cls": null,
"compositeCode": null,
"iconCls": null,
"priority": null,
"recurrentEndDate": "on Mon",
"recurrentStartDate": "on Sat",
"startDate": null,
"endDate": null,
"type": null,
"expanded": null
}
],
"id": "/api/calendars/2"
}
]
},
"columns": {
"rows": [
{
"readOnly": null,
"collapsed": null,
"collapsible": null,
"color": null,
"flex": null,
"hidden": null,
"htmlEncodeHeaderText": null,
"minWidth": null,
"tasksPerRow": null,
"text": "column #1",
"tooltip": null,
"width": null,
"expanded": null,
"id": "/api/columns/19"
},
{
"readOnly": null,
"collapsed": null,
"collapsible": null,
"color": null,
"flex": null,
"hidden": null,
"htmlEncodeHeaderText": null,
"minWidth": null,
"tasksPerRow": null,
"text": "Column #2",
"tooltip": null,
"width": null,
"expanded": null,
"id": "/api/columns/20"
},
{
"readOnly": null,
"collapsed": null,
"collapsible": null,
"color": null,
"flex": null,
"hidden": null,
"htmlEncodeHeaderText": null,
"minWidth": null,
"tasksPerRow": null,
"text": "Column #2",
"tooltip": null,
"width": null,
"expanded": null,
"id": "/api/columns/30"
},
{
"readOnly": null,
"collapsed": null,
"collapsible": null,
"color": null,
"flex": null,
"hidden": null,
"htmlEncodeHeaderText": null,
"minWidth": null,
"tasksPerRow": null,
"text": "Column #3",
"tooltip": null,
"width": null,
"expanded": null,
"id": "/api/columns/31"
}
]
}
}
The issue comes from the fact that the component doesn't recognize the default values it receives from the data.
- Capture d’écran 2025-06-16 171154.jpg (58.39 KiB) Viewed 20732 times
Thanks in advance for your help!
