Our flexible Kanban board for managing tasks with drag drop


Post by suhas.kachare »

Hi Team ,

I'm trying to assign a particular resource to a particular task from my backend data.

Below is my backend data

{
			"Id":"e8e3b0d6-dd67-4ce2-8046-212993bdbc5d",
			"pk":19869,
			"name":"Task Menu Selection",
			"state":"In Development",
			"url":"\/tasks\/19869",
			"canDragToEndState":true,
			"tagId":"x17gvpa",
			"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"
				}
			],                                                                                                                  

	}

The above data is for one task, which itself contains its assigned resource inside resourceAllocation. In the same way, all other tasks contain their assigned resource inside their own data.

Can you please help me with this


Post by Animal »

It should be OK to configure your taskStore with

        fields : [{
            name : 'resourceId',
            dataSource : 'resourceAllocation.id'
        }]

In a POC.

In real life, you would use your own subclass of the default TaskModel with this as one of its defined fields.


Post by suhas.kachare »

I tried the above code inside config.project, but it's not working for me.

Below is my code

import React, { Fragment, useRef, useEffect } from "react";

import { BryntumTaskBoard, BryntumTaskBoardProps } from "@bryntum/taskboard-react";
import { TaskBoard, ProjectModel } 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: {
  tasks: 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;

can you please help me with this.


Post by Animal »

Configure the taskStore of the project. Not the project itself.

project: {
  taskStore : {
    data   : reportData.serverData.initialData,
    fields : [
    {
      name: "resourceId",
      dataSource: "resourceAllocation.id",
    }],

    autoLoad: true,
   // loadUrl: "data/data.json"
  }
}

Post by suhas.kachare »

I tried the above code , but it's still not working for me.

Below is my frontend code

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;

Below is my backend code

{
	"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
	}
]
}

Post by Animal »

OK, your resources should be a reference to some resources loaded into the resourceStore. Not a block duplicated in every event.

See some of the examples. Resources are separate entities.


Post Reply