Hi Team ,
I'm using TaskBoard in react and want to style the TaskBoard . I'm want to implement styling given in one of the example , so can you please guide me on this.
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;
let newCols = reportData.serverData.columns.map((item) => {
if (item.id === "Backlog") {
return {
...item,
collapsed: "true",
};
}
return item;
});
let newTasks = reportData.serverData.initialData.map((item, i) => {
return {
...item,
// description: "Try it on any demo, reproduces easily",
prio: "critical",
id: i + 1,
};
});
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,
columns: newCols,
// 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,
tasks: newTasks,
resources: [
{ id: 1, name: "Angelo" },
{ id: 2, name: "Celia" },
{ id: 3, name: "Suhas" },
],
assignments: [
{ id: 1, event: 1, resource: 1 },
{ id: 2, event: 15, resource: 2 },
{ id: 3, event: 22, resource: 3 },
],
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 App.scss code
@import '~@bryntum/taskboard/taskboard.material.css';
Please find below attached screenshot of my present TaskBoard for your reference