Dear Support,
We are attempting to add a feature where users can dynamically load different data sets into the Kanban board. The data sets are all structured the SAME - no changes to the Columns or the column configuration is required - but the DATA itself is different. Currently we're attempting to load the data via a traditional useEffect
together with useState
, as below:
const [taskData, setTaskData] = useState<any[]>();
...
useEffect(() => {
setTaskData([...props?.deliverablesData]);
}, [props]);
I know from analyzing code flow and by placing breakpoints that the data is available and is being set into taskData state variable correctly.
However, NO data is appearing in the Kanban board. Furthermore, I have a function that SHOULD force a reload, but this isn't working either:
const onLevelChange = (payload) => {
setLevel(payload);
switch (payload) {
case 'deliverable':
setTaskData([...props.deliverablesData]);
break;
case 'task':
setTaskData([...props.tasksData]);
break;
default:
break;
}
};
The main question is, how can I support dynamic data reloads into Kanban? Here's how I've got my Kanban configured:
class DeliverableTask extends TaskModel {
static get fields() {
return [
{ name: 'name', type: 'string', defaultValue: 'Task Name' },
{ name: 'description', type: 'string', defaultValue: 'Description' },
{ name: 'priority', type: 'string', defaultValue: 'No priority' },
{ name: 'lookupActionType', type: 'string', defaultValue: 'Task' },
{
name: 'lookupActionStatus',
type: 'string',
defaultValue: 'Not started',
},
{ name: 'endDate', type: 'number' },
];
}
}
...
return (
<>
<BryntumProjectModel
ref={projectRef}
tasks={taskData}
taskModelClass={DeliverableTask}
/>
<BryntumTaskBoard
height={'100%'}
ref={boardRef}
taskRenderer={taskRenderer}
project={projectRef}
{...taskBoardConfig}
/>
</>
);
Thank you for your help!