Our flexible Kanban board for managing tasks with drag drop


Post by plus »

 const taskBoardConfig = {
      // Append its element to the page
      appendTo : "taskBoardContainer",
      // Define some columns
      columns : [
          'todo',
          'doing',
          'done'
      ],

  // Link the columns to a field on the tasks
  columnField : 'status',

  // Define some tasks
  project : {
      tasksData : [
          { id : 1, name : 'My first task', status : 'doing' },
          { id : 2, name : 'My second task', status : 'todo' }
      ]
  }
}
this.taskBoard = new TaskBoard(taskBoardConfig);
this.taskBoardCreated = true;

this is my simple code copied from your sample
my project is Angular
this code is on my .ts file
in my html file i have only one DIV called taskBoardContainer
if I use appendTo : "taskBoardContainer"

I have this error

core.js:4352 ERROR TypeError: f[Jb(...)] is not a function
at Function.getSharedTooltip (taskboard.module.js:10:611602)
at TaskBoard.get tooltip (taskboard.module.js:10:435873)
at TaskBoard.getConfig (taskboard.module.js:10:34730)
at TaskBoard.triggerPaint (taskboard.module.js:10:441363)
at TaskBoard.render (taskboard.module.js:10:408308)
at TaskBoard.render (taskboard.module.js:10:513780)
at TaskBoard.finalizeInit (taskboard.module.js:10:398047)
at TaskBoard.finalizeInit (taskboard.module.js:10:553138)
at TaskBoard.construct (taskboard.module.js:10:397692)
at new Base$1 (taskboard.module.js:10:31114)

What can be the problem? Do you have any suggestion?


Post by alex.l »

Basically there is no need to use appendTo when you work with Angular. Angular has own way to render components, we provide wrappers to work with frameworks in "their way". You can see it in our examples.

@Component({
    selector    : 'app-root',
    templateUrl : './app.component.html',
    styleUrls   : ['./app.component.scss']
})

https://bryntum.com/docs/taskboard/guide/TaskBoard/integration/angular/guide

Why do you need to use appendTo? Do you use wrapper? Please post your runnable app if link and examples didn't help.

All the best,
Alex


Post by plus »

Thank you for your answer.
I don't use wrappers
In my project I use a Scheduler in main window
Image

What I want to do is to show a new dialog wich contain a task board,This is the result using your sample code
Image

The problem is that in console I have the error described before
The sideeffect is that if I close the dialog and reopen this, I have this result
Image

The reason of this is that the line of code after new TaskBoard is not executed due the error in
this.taskBoard = new TaskBoard(taskBoardConfig);
Image

my dialog window is very simple

In my main page I have

<p-dialog header="Scrum board"
  [(visible)]="scrumBoardDisplay"
  (onShow)="taskBoard.createTaskBoard()"
  (onHide)="taskBoard.destroyTaskBoard()"

  <app-task-board #taskBoard

</app-task-board>
</p-dialog>

Html of app-task-board is only this

<div id="taskBoardContainer">
</div>

Post by alex.l »

Ok, I see. Please post a runnable app, we cannot find the cause using code fragments you posted.

All the best,
Alex


Post by plus »

Good morning.
I have made a new project with the same code used in my real project. In this small project all works fine.
I can't understand what could be the problem. Do you have any suggestion how to investigate the error?


Post by alex.l »

Try to debug it. Set a breakpoint before the error happened and check what is going on, compare with working version.
We didn't have any problems with new TaskBoard(taskBoardConfig); calling, so that's hard to say without the runnable code, unfortunately.

All the best,
Alex


Post by plus »

I solved putting taskboard inside my main div and not using modal window, maybe the problem is due to use of taskboard inside modal window?

This is how I dispaly it now
Image

A side effect I have using scheduler and taskboard togheter is that now the toolbar of scehduler take css values form taskboard
Image

In style.scss I import css in this way

@import "@bryntum/taskboard/taskboard.material.css";
@import "bryntum-scheduler/scheduler.material.css";

If I doesn't import taskboard.material.css, my toolbar is not collapsed

I prefere to have toolbar not collapsed as before adding taskboard
Image

Is there a way to make the two CSS coexist?

ANOTHER QUESTION TO CONTINUE MY WORK
I wish to test trial version before buy it, but i already have the message trial expired and I can't test taskboard with my data and functions to understand if can be valido for my goals. How can I do to test for other time?


Post by alex.l »

What version do you use?
Try to use thin bundles, check docs here https://bryntum.com/docs/taskboard/guide/Grid/gettingstarted/multiple-products
For CSS as well https://bryntum.com/docs/taskboard/guide/Grid/gettingstarted/multiple-products#css-bundles

But it's available for version 5.0.0+, so you'll maybe have to do upgrade.

I wish to test trial version before buy it, but i already have the message trial expired and I can't test taskboard with my data and functions to understand if can be valido for my goals. How can I do to test for other time?

Please try to address this question to our sales, they should help you with that: sales[at]bryntum.com

All the best,
Alex


Post Reply