I tried the above code , but it's still not working for me.
import React, { Fragment, useRef, useEffect } from "react";
import { BryntumTaskBoard, BryntumTaskBoardProps } from "@bryntum/taskboard-react";
import { TaskBoard, ProjectModel, TaskModel } from "@bryntum/taskboard";
import "./App.scss";
const BryntumTrial = (props: any) => {
const { reportData } = props;
const taskBoardRef = useRef<BryntumTaskBoard>(null);
const taskBoardInstance = () => taskBoardRef.current?.instance as TaskBoard;
const kanbanConfig: BryntumTaskBoardProps = {
// Url for resource avatar images
resourceImagePath: "data/TaskBoard/images/users/",
// Experimental, transition moving cards using the editor
useDomTransition: true,
// Columns to display
columns: reportData.serverData.columns,
// Field used to pair a task to a column
columnField: "state",
tasksPerRow: 1,
features: {
columnDrag: true,
columnHeaderMenu: true,
},
listeners: {
async beforeTaskDrop({ taskRecords, targetColumn }) {
// Show confirmation dialog
if (targetColumn.id === "Done") {
return false;
}
},
taskDrag({ taskRecords, targetColumn }) {
return targetColumn.id !== "Backlog";
},
},
headerItems: {
menu: { type: "taskMenu", order: 200 },
resourceAvatars: null,
},
footerItems: {
resourceAvatars: { type: "resourceAvatars" },
},
// Project using inline data
project: {
taskStore: {
data: reportData.serverData.initialData,
fields: [
{
name: "resourceId",
dataSource: "resourceAllocation.id",
},
],
autoLoad: true,
},
// loadUrl: "data/data.json",
},
tbar: [
// Button for picking which columns to show
{ type: "columnpickerbutton" },
{ type: "zoomslider" },
],
};
return (
<Fragment>
<BryntumTaskBoard ref={taskBoardRef} {...kanbanConfig} />
</Fragment>
);
};
export default BryntumTrial;
{
"columns": [{
"id": "Backlog",
"text": "Backlog",
"value": "Backlog"
},
{
"id": "In Development",
"text": "In Development",
"value": "In Development"
},
{
"id": "In Testing",
"text": "In Testing",
"value": "In Testing"
},
{
"id": "Done",
"text": "Done",
"value": "Done",
"zoomLevel": "small"
}
],
"initialData": [{
"Id": "e8e3b0d6-dd67-4ce2-8046-212993bdbc5d",
"pk": 19869,
"name": "abc",
"state": "In Development",
"url": "\/tasks\/19869",
"canDragToEndState": true,
"tagId": "xlq9h3",
"plannedStart": "2023-02-28T21:30:00",
"plannedFinish": "2023-03-01T06:30:00",
"finishDay": "1 Mar",
"actualPercentComplete": 0,
"resourceAllocation": [{
"id": 138,
"tooltip": "Ajay Singh",
"highlight": false,
"initials": "AS"
}],
"resourceImages": " <span class=\"person-grid\"> ",
"resourceEditAction": "javascript:Celoxis.showTaskAllocationPanelInRlc(19869, 'xlq9h3');",
"asUrl": "task.Actions.wm?id=19869",
"scheduleHealth": {
"text": "Not Active",
"value": "NOT_ACTIVE",
"style": "solid",
"tooltip": "Project is in <b>On Hold<\/b> state.",
"cssClass": "badge-light text-light"
},
"customAttrs": "",
"index": 0
},
{
"Id": "7539308b-af01-4fe3-8d43-d8c7e54379a4",
"pk": 19901,
"name": "abc",
"state": "In Testing",
"url": "\/tasks\/19901",
"canDragToEndState": true,
"tagId": "x8ug9",
"plannedStart": "2023-02-28T21:30:00",
"plannedFinish": "2023-03-01T06:30:00",
"finishDay": "1 Mar",
"actualPercentComplete": 0,
"resourceAllocation": [{
"id": 138,
"tooltip": "Ajay Singh",
"highlight": false,
"initials": "AS"
}],
"resourceImages": " <span class=\"person-grid\"> ",
"resourceEditAction": "javascript:Celoxis.showTaskAllocationPanelInRlc(19901, 'x8ug9');",
"asUrl": "task.Actions.wm?id=19901",
"scheduleHealth": {
"text": "Not Active",
"value": "NOT_ACTIVE",
"style": "solid",
"tooltip": "Project is in <b>On Hold<\/b> state.",
"cssClass": "badge-light text-light"
},
"customAttrs": "",
"index": 1
},
{
"Id": "39e489aa-74b4-4f97-9f4e-1e019799cdc5",
"pk": 18759,
"name": "Abstract specification",
"state": "In Development",
"url": "\/tasks\/18759",
"canDragToEndState": true,
"tagId": "x7qpms",
"plannedStart": "2023-01-09T08:00:00",
"plannedFinish": "2023-01-13T17:00:00",
"finishDay": "13 Jan",
"actualPercentComplete": 0,
"resourceAllocation": [{
"id": 114,
"tooltip": "Grace Collins",
"highlight": false,
"initials": "GC"
}],
"resourceImages": " <span class=\"person-grid\"> ",
"resourceEditAction": "javascript:Celoxis.showTaskAllocationPanelInRlc(18759, 'x7qpms');",
"asUrl": "task.Actions.wm?id=18759",
"scheduleHealth": {
"text": "Blocked",
"value": "BLOCKED",
"style": "solid",
"tooltip": "Task cannot start because some predecessors have not yet finished.",
"cssClass": "badge-info"
},
"color": "#ffdf7c",
"customAttrs": "",
"index": 2
},
{
"Id": "e45e28c4-a372-496e-a8f1-fb66fadd0182",
"pk": 18230,
"name": "Abstract specification",
"state": "In Development",
"url": "\/tasks\/18230",
"canDragToEndState": true,
"tagId": "x2gsk9i",
"plannedStart": "2022-09-26T08:00:00",
"plannedFinish": "2022-09-30T17:00:00",
"finishDay": "30 Sep",
"actualPercentComplete": 90,
"resourceAllocation": [{
"id": 114,
"tooltip": "Grace Collins",
"highlight": false,
"initials": "GC"
}],
"resourceImages": " <span class=\"person-grid\"> ",
"resourceEditAction": "javascript:Celoxis.showTaskAllocationPanelInRlc(18230, 'x2gsk9i');",
"asUrl": "task.Actions.wm?id=18230",
"scheduleHealth": {
"text": "Not Active",
"value": "NOT_ACTIVE",
"style": "solid",
"tooltip": "Project is in <b>On Hold<\/b> state.",
"cssClass": "badge-light text-light"
},
"color": "#ffdf7c",
"customAttrs": "",
"index": 3
},
{
"Id": "28ea5709-7730-42ac-9e8b-ef72e78b6e47",
"pk": 13882,
"name": "Acceptance Test Security Prototype",
"state": "Done",
"url": "\/tasks\/13882",
"canDragToEndState": true,
"tagId": "x37mov",
"plannedStart": "2022-09-27T17:00:00",
"plannedFinish": "2022-09-28T02:00:00",
"finishDay": "28 Sep",
"actualPercentComplete": 100,
"resourceAllocation": [{
"id": 120,
"tooltip": "Alex Nelson",
"highlight": false,
"initials": "AN"
}],
"resourceImages": " <span class=\"person-grid\"> ",
"resourceEditAction": "javascript:Celoxis.showTaskAllocationPanelInRlc(13882, 'x37mov');",
"asUrl": "task.Actions.wm?id=13882",
"scheduleHealth": {
"text": "Completed",
"value": "COMPLETED",
"style": "solid",
"tooltip": "Task is completed.",
"cssClass": "badge-dark fw-300"
},
"customAttrs": "",
"index": 4
}
]
}