Wijmo 2017 v3 has Landed

November 13 2017

Wijmo’s third major release of 2017 has landed, and it includes major performance improvements, comprehensive accessibility support, Angular 5 support, and a long list of bug fixes!

Download Wijmo

Let's dive in.

Major Performance Improvements in FlexGrid

We just made some serious performance improvements to FlexGrid. I got some quotes from the grid master, Bernardo, to explain how it works:

"Auto-Sizing is a relatively simple task, but unfortunately it can be very slow. The algorithm we had was safe but very basic. We created an invisible ‘measure’ input element, then looped through the rows updating the content of that element. This goes against the ‘virtual’ nature of the grid. Updating the ‘measure’ input element for thousands of rows took some time.

"In the latest build, we optimized things by taking advantage of some common special conditions. Specifically, if a cell contains text that doesn’t wrap and doesn’t have any special formatting, we can measure the content using a different approach: the measureText method of the canvas element. We now use that really fast method to identify the cell with the longest content and use the original measuring element to get the exact width of the widest cell. We also added a few extra tricks like smart caching to save extra cycles.

"The difference is huge. Depending on the browser and on the actual grid content, it can be between one and two orders of magnitude (yes, you read it right, we are talking about a 10x to 100x speed increase when auto-sizing columns)."

FlexGrid rendering time in milliseconds

Take a look at the above chart to see how much better the grid performs now. You can also try this sample to test performance yourself.

To take advantage of this new performance improvement, make sure to set quickAutoSize=true on grids that don't modify cell markup. If you are modifying cell markup with formatItem, itemFormatter or cell templates, then you don't want to use this feature. If so, the columns might not auto-size properly. Of course, it might be worth the performance trade-off, so it's always something to consider.

Accessibility Improvements

We have continued to improve our accessibility support in Wijmo. This release offers quite a few improvements. We've refined accessibility in FlexGrid with some of your feedback, and we also improved accessibility (ARIA attributes and keyboard support) for the ListBox, ComboBox, Menu, InputNumber, Gauge, and Calendar controls.

AccessibilityExtender Sample

Most interestingly, we added the new AccessibilityExtender sample. It implements a class that provides additional accessibility support to FlexGrid controls. FlexGrid has built-in accessibility, but different applications might have different needs for accessibility behaviors. This sample shows how you can customize FlexGrid accessibility features above and beyond what we include by default. For example, this sample announces to the screen reader anytime a filter has been applied to a column. It’s a nice touch that allows end users to understand what the grid is doing on the screen.

Accessibility Extender Sample | Accessibility Blog

Visual Studio Code HTML IntelliSense Support

One of the biggest benefits of Wijmo is being able to declare your markup in Angular applications. That just got even better for VSCode users. Now you can get IntelliSense code auto-completion when you're using Wijmo controls in VSCode. Wijmo is a first-class experience in VSCode.

Visual Studio Code

New Undo/Redo Sample

We get many requests for Undo/Redo features in FlexGrid. We went even further and made a general-purpose class for implementing Undo/Redo for an entire application! We also wrote a nice blog about it.

Undo/Redo Sample

Undo Redo Stack Sample | Easy Undo/Redo for HTML Forms Blog

New Simple Reports in React Sample

Our Simple Reports in Angular sample/blog have been very popular. We have also had many requests for a similar solution in React. Naturally, we created a similar sample using React and wrote a nice blog about it too.

Simple Reports in React

React Simple Reports Sample | Creating Simple Reports with React and Wijmo Blog

New Point and Figure Financial Chart Type

We added this interesting new chart type to our FinancialChart control based on customer requests.

Point and Figure Chart

Point and Figure FinancialChart Sample

New Samples

Change Log

[FlexGrid] Major performance enhancement: Added a quickAutoSize property to the wijmo.grid.FlexGrid and wijmo.grid.Column classes. This new property can improve auto-sizing performance by a factor of 10 to 100, depending on the scenario/browser.
[FlexGrid] Added support for row/column resizing on touch devices.
[Accessibility] Added new AccessibilityExtender for FlexGrid sample. It implements a class that provides additional accessibiltiy support to FlexGrid controls. You can use it or modify it to fit your accessibility needs. Accessibility Extender Sample | Accessibility Blog
[Accessibility] Improved (ARIA attributes and keyboard support) for the ListBox, ComboBox, Menu, InputNumber, Gauge, and Calendar controls.
[VSCode] Added IntelliSense support for Wijmo Angular components in VSCode HTML editor.
[Angular] Angular version 5.0.0 is officially supported by Wijmo. Earlier Angular versions are still supported as well. Wijmo Supports Angular Version 5 Blog
[Angular] Added 27 new Angular samples (ported from AngularJS). Angular Support
[React] Added components for all Wijmo controls. React All Components Sample
Made some improvements in InputNumber's editing experience.
Improved popup positioning on mobile devices with pinch-zooming (including Android and iOS).
[wijmo.grid.pdf] Added support of cell text wrapping in FlexGrid.