v7.3.0

What's new in TaskBoard v5.0.0+

TaskBoard v5.0.0

New JavaScript bundles for combining products

Each product now has a new ES module based JavaScript bundle that only contains the product specific code, called a thin bundle. They are intended to be used when combining multiple products on page, to avoid having shared code loaded multiple times. Previously if you combined for example Grid and TaskBoard on a single page you would import from these bundles (minified size):

  • grid.module.min.js (~993 kB)
  • taskboard.module.min.js (~1100 kB)

Both products are built upon Bryntum's core library and hence both of them include the core JavaScript (buttons, toolbars, helpers etc.). With thin bundles you would instead import what you need from each product in the hierarchy separately:

  • core.module.thin.min.js (~643 kB)
  • grid.module.thin.min.js (~268 kB)
  • taskboard.module.thin.min.js (~88 kB)

This way the shared code (from core) is only included once. With the old approach, about 2 MB of JavaScript was loaded, with the new about 1 MB.

The gain (loss actually) will be greater if you combine products that share even more code, like Gantt and Calendar. Calendar builds upon Scheduler > Grid > Core, while Gantt builds upon Scheduler Pro > Scheduler > Grid > Core. When not using thin bundles:

  • gantt.module.min.js (~1978 kB)
  • calendar.module.min.js (~1833 kB)

With thin bundles (many since these products build upon others):

  • core.module.thin.min.js (~643 kB)
  • grid.module.thin.min.js (~268 kB)
  • scheduler.module.thin.min.js (~466 kB)
  • schedulerpro.module.thin.min.js (~119 kB)
  • engine.module.thin.min.js (~266 kB)
  • gantt.module.thin.min.js (~122 kB)
  • calendar.module.thin.min.js (~164 kB)

Total ~ 3811 kB vs 2048 kB (1763 kB less).

You import from the thin bundles in the same way as with any other ES modules bundle. The difference compared to using the full bundles is that you have to import from the correct bundle. For example to use the StringHelper class from Core and GridRowModel from Grid, previously you would have something similar to this:

import { StringHelper, GridRowModel } from 'grid.module.js';

Now you have to import them separately (since they are from different bundles):

import { StringHelper } from 'core.module.thin.js';
import { GridRowModel } from 'grid.module.thin.js';

New CSS bundles for combining products

Each theme now has a new CSS bundle that only contains product specific styling, called a thin bundle. They are intended to be used when combining multiple products on page, to avoid having shared styling loaded multiple times. Previously if you combined for example Grid and TaskBoard on a single page, using the Stockholm theme, you would load:

  • grid.stockholm.css (~244 kB)
  • taskboard.stockholm.css (~243 kB)

Both products are built upon Bryntum's core library and hence both of them include the core CSS (buttons, toolbars, icons etc.). With thin bundles you would instead load each product in the hierarchy separately:

  • core.stockholm.thin.css (~203 kB)
  • grid.stockholm.thin.css (~40 kB)
  • taskboard.stockholm.thin.css (~40 kB)

This way the shared CSS (from core) is only included once. With the old approach, about 487 kB of CSS was loaded, with the new about 283 kB (204 kB less).

The gain (loss actually) will be greater if you combine products that share even more styling, like Gantt and Calendar. Calendar builds upon Scheduler > Grid > Core, while Gantt builds upon Scheduler Pro > Scheduler > Grid > Core. When not using thin bundles:

  • gantt.stockholm.css (~659 kB)
  • calendar.stockholm.css (~655 kB)

With thin bundles (many since these products build upon others):

  • core.stockholm.thin.css (~203 kB)
  • grid.stockholm.thin.css (~40 kB)
  • scheduler.stockholm.thin.css (~363 kB)
  • schedulerpro.stockholm.thin.css (~10 kB)
  • gantt.stockholm.thin.css (~27 kB)
  • calendar.stockholm.thin.css (~47 kB)

Total ~ 1314 kB vs 690 kB (624 kB less).

In your html file, you would for the Gantt + Calendar scenario have something similar to:

<link rel="stylesheet" href="core.stockholm.css" data-bryntum-theme>  
<link rel="stylesheet" href="grid.stockholm.css" data-bryntum-theme>  
<link rel="stylesheet" href="scheduler.stockholm.css" data-bryntum-theme>  
<link rel="stylesheet" href="schedulerpro.stockholm.css" data-bryntum-theme>  
<link rel="stylesheet" href="gantt.stockholm.css" data-bryntum-theme>  
<link rel="stylesheet" href="calendar.stockholm.css" data-bryntum-theme>
Note the usage of the data-bryntum-theme attribute above, it is required if the app will be switching theme at runtime using DomHelper.setTheme().

Simplified test case creation

When reporting a hard to reproduce issue on Bryntum's support forum we often request a test case showing the issue. Getting a good test case greatly reduces the time it takes from reporting the bug until a fix can be released. Worst case we won't be able to find and fix the bug at all without one.

We understand that for complex apps it is not always trivial to produce a standalone test case. The app might be using a lot of different configs and the issue might only appear with a certain dataset etc. To simplify the process of creating a test case we have added a new function called downloadTestCase() to all Bryntum products. Running it collects the current value for the configs your app is using, inlines the current dataset and compiles configs and data into a JavaScript app that is then downloaded.

The app will most likely require manual tweaking before you can submit it to us, but we are hoping it will make creating a test case easier for you. Run taskboard.downloadTestCase() on the console in a demo to try it. Any feedback on how this could be improved further is welcome on the forums!

Override task order

Tasks appear on the board in store order. By default the task store is sorted by task weight, which works well with the TaskDrag feature.

When consuming a project from another product (for example Gantt), you will likely not want the other product to sort by weight. To work around this, we have added a taskSorterFn to TaskBoard. It allows you to on the UI layer resort tasks before they are rendered, independently of the sort order in the store. Thus you can sort the other product as usual but still display tasks in weight order (or any order you want).

// Shortcut for enforcing sorting by weight
const taskBoard = new TaskBoard({
    taskSorterFn : true
});

// Custom sorting fn (array sorter fn)
const taskBoard = new TaskBoard({
    taskSorterFn(a, b) {
        return a.prio - b.prio;
    }
});

TaskBoard v5.0.3

ProjectModel wrapper for Angular, React & Vue

TaskBoard ships with a new ProjectModel wrapper that can be used to share data between multiple Bryntum components in the same app by pointing them all to the same project instance. Either you use it to load data from the backend using the built-in CrudManager or you bind your locally available data to it.

Integration details can be found in guides for Angular, React and Vue.

TaskBoard v5.1.0

Introducing Create React App templates

Create React App script templates are now available in the public npm repository.

If you are using javascript only, just type:

npx create-react-app my-app --template @bryntum/cra-template-javascript-taskboard

or if you prefer using typescript:

npx create-react-app my-app --template @bryntum/cra-template-typescript-taskboard

Note: Please feel free to change my-app to your preferred application name

Check the React integration guide for more information.

Simplified url configuration on the project

Configuring the crud manager functionality of the project was made a little easier by introducing shortcuts for setting load and sync urls using the new loadUrl and syncUrl configs. When your application does not need to supply any additional configs to the transport layer you can use them in favor of having to nest the urls. Old code like this:

const taskBoard = new TaskBoard({
    project : {
        transport : {
            load : {
                url : 'load.aspx'
            }
        }
    }
})

Can now be written more conveniently like this:

const taskBoard = new TaskBoard({
    project : {
        loadUrl : 'load.aspx'
    }
})

Flattening the structure out makes it easier for framework developers, who can now assign directly to the prop on the project component rather than having to supply a config object. Pseudo framework code to illustrate the old approach:

const projectConfig = {
    transport : {
        load : {
            url : 'load.php'
        }
    }
}

<BryntumProjectModel {...projectConfig} />

Simplified approach:

<BryntumProjectModel loadUrl={"load.php"} />

New module bundle for Angular

Bryntum TaskBoard is now delivered with new ES Module bundle without WebComponents. This was done to avoid conflicts with Angular which also uses WebComponents for applications.

Angular wrappers use taskboard.module.js bundle in favor of removed taskboard.lite.umd.js one.

Check the upgrading guide for the details.

New module bundle with WebComponents

Bryntum TaskBoard is now delivered with new taskboard.wc.module.js ES Module bundle with WebComponents.

Check the upgrading guide for the details.

New keyboard shortcuts functionality

KeyMap is a mixin that allows for standardized and customizable keyboard shortcuts functionality. KeyMap is mixed in to Widget by default and therefore available to all Widget child classes. There is a new guide describing how to customize currently integrated keyboard shortcuts.

TaskBoard v5.2.6

Support for React Components in tooltips and widgets

React components are now supported in tooltips and widgets. Tooltips have renderer or template function that can now return valid JSX that represents a React component. Widgets can now supply JSX as their html property. For example:

Event tooltip:

taskTooltipFeature: {
    template: data => (
        <React.StrictMode>
            <DemoEventTip data={data} />
        </React.StrictMode>
    )
},

React component in widget:

bbar : {
    items:[{
        type:'widget',
        html:<DemoWidget />
    }]
},

See the React guide for details.

TaskBoard v5.3.0

AjaxHelper.fetch now supports passing parameters in request body

Since this release AjaxHelper.fetch method can pass provided queryParams in the request body instead of query string. This happens for application/x-www-form-urlencoded and multipart/form-data content types when addQueryParamsToBody option is set to true:

AjaxHelper.fetch('url', {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded'
    },
    addQueryParamsToBody : true
});

Please check addQueryParamsToBody in FetchOptions

Please note that this behavior is disabled by default so if you need to enable it globally please use AjaxHelper.DEFAULTFETCHOPTIONS:

// enable addQueryParamsToBody by default
AjaxHelper.DEFAULT_FETCH_OPTIONS = {
    addQueryParamsToBody : true
}

Partial virtualized rendering

Having a large number of cards rendered to DOM simultaneously can lead to poor performance. To address this issue, TaskBoard now supports partial virtualized rendering. This means that only the cards that are visible in the viewport are fully rendered, cards outside the viewport are only outlined.

A Kanban board is best suited for using with a smaller set of tasks (hundreds rather than thousands). Before enabling virtualized rendering we strongly recommend you consider restructuring the application. Could it for example filter the tasks based on user, project or similar to work on a subset?

To enable partial virtualized rendering, the height of all tasks must be known. To communicate this to the TaskBoard, implement a getTaskHeight() function:

taskBoard = new TaskBoard({
    getTaskHeight({ taskRecord }) {
        // This snippet uses a fixed height, but app can implement any logic here
        return 150;
    }
});

New locales

New locales for 31 languages have been added. Currently available languages are listed in the localization guide.

TaskBoard v5.3.3

Angular IVY and View Engine wrappers

Bryntum TaskBoard now ships with two npm Angular wrappers packages to support different versions of Angular framework.

@bryntum/taskboard-angular is designed to work with Angular 12 and newer versions, which use the IVY rendering engine.

@bryntum/taskboard-angular-view is designed to work with Angular 11 and older versions, which use the View Engine for rendering.

Please check Angular integration guide for the additional information.

TaskBoard v5.5.2

New Taskboard events

TaskBoard now fires new events:

Event Description
columnCollapse Triggered when a column is collapsed
columnExpand Triggered when a column is expanded
columnToggle Triggered when a column collapsed state is toggled
swimlaneCollapse Triggered when a swimlane is collapsed
swimlaneExpand Triggered when a swimlane is expanded
swimlaneHeaderClick Triggered when a swimlane header is clicked
swimlaneHeaderContextMenu Triggered when a swimlane header is right-clicked
swimlaneHeaderDblClick Triggered when a swimlane header is double-clicked
swimlaneToggle Triggered when a swimlane collapsed state is toggled

TaskBoard v5.6.0

New npm packages for combining products

This release introduces a new set of npm packages and framework components, that allows combining multiple Bryntum products in the same application.

These packages contain the product specific code only, as opposed to the current packages that has all code for the products each product builds upon (for example Scheduler contains all code from Grid & Core).

The new packages are called thin packages, and moving forward it will be the recommended way of using Bryntum products in npm based applications (for all supported frameworks). The packages are initially available for licensed users only, but will be made available for trial users in the near future.

The following packages are available:

Package Purpose
@bryntum/core-thin Bryntum Core data and UI components package
@bryntum/grid-thin Bryntum Grid component package
@bryntum/scheduler-thin Bryntum Scheduler component package
@bryntum/schedulerpro-thin Bryntum Scheduler Pro component package
@bryntum/gantt-thin Bryntum Gantt component package
@bryntum/calendar-thin Bryntum Calendar component package
@bryntum/taskboard-thin Bryntum TaskBoard component package
@bryntum/engine-thin Bryntum Scheduling engine component package

Applications should install packages for the products they use, and the products those are built upon (see links to guides below for more information). For example an application using Scheduler Pro should also install Scheduler, Grid & Core:

npm install @bryntum/core-thin @bryntum/grid-thin @bryntum/scheduler-thin @bryntum/schedulerpro-thin

There are also new corresponding wrappers for the supported frameworks, which should be used instead of the current wrappers. For example for React:

Package Purpose
@bryntum/core-react-thin Bryntum Core UI widgets React wrappers package
@bryntum/grid-react-thin Bryntum Grid React wrapper package
@bryntum/scheduler-react-thin Bryntum Scheduler React wrapper package
@bryntum/schedulerpro-react-thin Bryntum Scheduler Pro React wrapper package
@bryntum/gantt-react-thin Bryntum Gantt React wrapper package
@bryntum/calendar-react-thin Bryntum Calendar React wrapper package
@bryntum/taskboard-react-thin Bryntum TaskBoard React wrapper package

Applications should install wrappers only for the products they use, there is no need to install them for the products those are built upon. For example an application using Scheduler Pro:

npm install @bryntum/schedulerpro-react-thin

More information:

React support for task items

We have added a new task item that can contain React components (JSX), called JsxItem. It can be used in the same fashion as other task items, displaying one or more as part of a cards header, body and footer (note that it only works in React applications).

Please see the JsxItem documentation for more information on the usage.

You can also view the new React Task Items demo to see it in action.

Functions and events declarations for TypeScript have been improved

Declarations of class config/property functions and events (which are represented as onEventName functions) were improved to contain all available parameters and return type.

See examples below:

Old declarations:

    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: Function|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: Function

New declarations:

    /**
     * User typed into the field. Please note that the value attached to this event is the raw input field value and
     * not the combos value
     */
    onInput: ((event : { source: Combo, value: string, event: Event }) => void)|string

    /**
     * Template function that can be used to customize the displayed value
     */
    displayValueRenderer: (record: Model, combo: Combo) => string|null

Contents