Our flexible Kanban board for managing tasks with drag drop


Post by suhas.kachare »

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

Attachments
My TaskBoard.png
My TaskBoard.png (329.25 KiB) Viewed 651 times

Post by tasnim »

Hi,

Could please explain a bit further what you want to style in Taskboard? And how it should look like?


Post by suhas.kachare »

Taskboard includes the column as well as the top part, which has filters, a column picker button, a zoom slider, etc.

I want to style a taskboard somewhat similar to the example below.

https://bryntum.com/products/taskboard/examples/task-drag/


Post by tasnim »

Hello,
You could find the source code of this demo in >Taskboard/examples/task-drag and I would encourage you to check out how the styles have been implemented.

Good Luck :),
Tasnim


Post by suhas.kachare »

Hi ,

I am trying to implement a style for my Taskboard. I've gone through almost all the demo examples, but I'm not getting how to apply styles.

Can you please guide me on this?


Post by marcio »

Hey suhas.kachare,

We have a dedicated section in our guides all about customization, we recommend you to check it here https://bryntum.com/products/taskboard/docs/api/guides-customization

If something is still not clear to you after checking the guide, please let us know!

Best regards,
Márcio


Post by johan.isaksson »

Also please check the app.scss (or the complied app.css if you are not using sass) file for the demo, it has all the custom styling used in the demo. You can copy paste the parts you like over to your app

Best regards,
Johan Isaksson

Post Reply