New Bryntum Grid, Scheduler & Gantt patch releases (2.2.4 & 1.1.5)

In the past couple of weeks, we have shipped two patch releases each for Bryntum Grid, Scheduler and Gantt. They mainly contain bug fixes but we strive to include some more exciting things as well which we will share in this post. As always, for full details please see each product’s change log (Grid, Scheduler & Gantt).

What’s new in Grid 1.1.5

The Grid release features a new demo, and we also made some improvements to the data & date classes in our Common namespace:

New stocklist demo

At Bryntum, we care a lot about performance, which we treat as a feature not a nice-to-have. So we made a new stocklist demo that shows how well it handles rapid updates. The demo receives updates every 20ms which leads to multiple cells being redrawn, click the image below to see it live in action.

New stocklist demo

The Common namespace (data level, date handling etc) also has some new stuff worth highlighting:

Store improvements

When a Store is loaded with a new dataset the raw data is processed and transformed into Model instances (or “records”). This process involves:

  • Applying default values to empty fields
  • Converting field values from an input format to a format used by the application (for example string to date)
  • Checking that there are no duplicate ids

For large datasets, the processing can take a bit of time. If the dataset being loaded is guaranteed to be valid, the processing can now be bypassed by configuring the store with useRawData : true.
In our measurements this can reduce the initial rendering time for a Grid with 10,000 records by about 30%.

Another small improvement is that Model now allows read only fields:

class Person extends Model {
  static get fields() {
    return [
      'name',
      { name : 'age', readOnly : true }
    ];
  }
}

Date formatting improvement

The date formatting function of DateHelper now allows arbitrary strings as part of the format. By surrounding a string with {} it is kept intact in the output:

DateHelper.format(new Date(), '{Year: }YYYY'); // -> Year: 2019
DateHelper.format(new Date(), 'H{ hours }M{ minutes}'); // -> 8 hours 24 minutes

What’s new in Scheduler 1.1.5

In addition to bug fixes, there is a new guide, a new feature and a new demo:

Guide on changing icon set

While we are very fond of FontAwesome, we received requests for how to switch to another icon font library. All internally used icons in Grid/Scheduler/Gantt uses a b-icon prefix and a b-icon-xx icon rule to apply a certain icon. To change to some other icon library, you need to override these. There is now a guide showing how to do this, using Material Icons as an example. Read more about it here.

Resource margin

Scheduler has a config called barMargin that determines the vertical spacing (in horizontal mode, flipped for vertical) between multiple bars in a row and also between the top/bottom bar and the resource row. To give more control over the layout, we have introduced a new config resourceMargin that only affects the spacing between the row and its bars. When used, barMargin only affects the margin between bars. Try it out in the updated rowheight demo:

Illustration of resourceMargin vs barMargin

Custom event editor

In addition to the already existing demos showing how to customize our built in event editor, there is now a new demo for React showing how to completely replace it with your own, using the widget library of your choice. Angular and Vue versions of the demo are in the works and will ship in a not too distant future. Meanwhile, please check out the React demo:

Custom event editor in React

What’s new in Gantt 2.2.4

Gantt has a new demo and a beefed up PercentDoneColumn:

Circular percent done progress indicator

By configuring the percentdone column with showCircle : true it gets a new more modern look:

Advanced demo using percentdone column with circular display

New task tooltip demo

The new demo shows you how easy it is to customize the task tooltip:

New task tooltip demo

Learn more

For full details please see the change log of each product:.

Download Free Trial

Leave a Comment