Wijmo Build 5.20203.766 Available

What's New

This minor release of Wijmo has some nice new features! This build includes improvements to Date Picker Accessibility, FlexGrid touch support, CollectionView change tracking, and more.

Download Now!

InputDateRange (and Calendar) Accessibility

The new InputDateRange control extends InputDate to allow easy editing of date ranges.

As soon as the control was released, people asked about accessibility. We take accessibility very seriously and decided to do a review of the best practices. One of the best articles we found on date picker accessibility was Hampus Sethfors' Accessible datepickers.

The main points in the article are:

  • Don’t force people to use the datepicker

  • Make it possible to navigate with a keyboard (here is where most fail)

  • Don’t hide the calendar button from screen readers

  • Don’t hide the calendar button from screen readers

  • Make sure that the buttons and icons in the calendar view have proper labels

Let's take a look at each of those points and how we address them in our Date Picker components.

Don’t Force People to use the Datepicker

Make it possible to write directly in the input field as well. And make sure the required format is specified in the label.

We do allow people to type the range directly into the input. We do not automatically add an aria-label attribute to the control specifying what the date means (the control doesn't know that) or the format expected, but developers can add that easily. For example:

    inputDate.inputElement.setAttribute('aria-label', 'enter trip dates in the format XXX');

Make It Possible to Navigate with a Keyboard (Here is Where Most Fail)

For example, by tabbing to the calendar and using arrow keys to pick the right date.

We do support keyboard navigation. Users can press F4 to open the drop-down, use cursor keys to select the start date, shift-cursor to extend into a range, and press Enter to commit the change.

Don’t Hide the Calendar Button from Screen Readers

We’ve met a few clients who considered setting aria-hidden to ”true” and forcing screen reader users to input directly in the text field. But that is not a great idea.

We do not hide the calendar button.

Make Sure that the Buttons and Icons in the Calendar View Have Proper Labels

This is important so those elements get correctly read by screen readers. For example, the dates of the month should not just be “1”, “2", etc. They should be read “1 January, Thursday” or something similar.

All elements on Wijmo Calendar controls have aria-labels set correctly and are localized automatically using our culture files.

FlexGrid Indexing by Binding

In this latest release, we improved consistency in several FlexGrid methods, allowing them to accept column names or bindings in addition to column indices.

For example, the select, startEditing, getCellData, setCellData, and getCellBoundingRect methods allow you to provide a binding instead of a numeric index. For example:

    // select the first cell in the 'country' column  
    flexGrid.select(0, 'country');

FlexGrid Touch Sort

By default, the FlexGrid allows users to sort columns by clicking the column headers. Users can remove the sort by ctrl+clicking the headers.

On touch devices, users can sort columns by tapping the column headers. However, since there is no way to control-click a cell on touch devices, users could not remove the sort... until now.

In the latest release, the grid detects whether the click is a touch event and applies a three-state cycle to the sort: None => Ascending => Descending => None.

We feel this is an important detail that significantly improves our support for touch devices.

FlexGrid cellTemplates in rowHeader Cells

The FlexGrid cellTemplate property allows you to customize data cells easily, without using the formatItem event.

In the latest release, cell templates can also be used to render row header cells.

The code below shows how you can use this feature to add numbers to the row header cells as Excel does:

// get row header column  
let col = theGrid.rowHeaders.columns[0];  

// assign template that adds the row index to the header  
// (but preserves glyphs such as edit and new row template)  
col.cellTemplate = ctx => ctx.text || (ctx.row.index + 1).toString();

MultiRow and FlexGridDetailProvider

The FlexGridDetailProvider class allows you to add a collapsible details row to FlexGrid controls.

This new version also supports the MultiRow control, so now you can have data items that span multiple rows and can be expanded to show row details.

CollectionView Change Tracking

This is an improvement many users requested.

The CollectionView class has a trackChanges property that provides lists of items that have been edited, added, or removed from the collection. These lists are important when updating the data on the server.

In previous versions, once you changed an item, it was added to the itemsEdited list and stayed there (unless you later removed the item). In the latest version, if you apply another edit that restores the original item value, the item is automatically removed from the itemsEdited list. This means a little less work on the server.

handleWheel Property

Many Wijmo controls provide custom handling for wheel events. For example, the FlexGrid allows users to scroll the grid vertically or horizontally; the ComboBox, InputDate, and InputNumber controls allow users to increment or decrement values with the wheel, and the Calendar control allows users to change months with the mouse wheel.

This works well in most scenarios, but sometimes you may want to prevent this custom handling and let the browser handle the wheel to scroll through the document.

The best example is probably a large Calendar showing multiple months (monthCount > 2). In this case, the calendar probably occupies a large part of the screen, making the wheel almost useless for navigating the document.

To support these scenarios, we added a handleWheel property to the controls that support wheel events. The property defaults to true, so existing applications work the same as before. But you can set it to false to let the browser handle all-wheel events.

Firestore and Sub-collections

In this new version, we improved the wijmo.cloud.Collection class by adding a new getSubCollection method. The new method allows you to use sub-collections, one of the many features supported by Firestore databases.

In case you are not familiar with Firestore, it is Google's Serverless NoSQL database. Firestore does not replace SQL databases, but for many applications, it can be an effective alternative. Firestore databases are easy to set up and provide incredible performance and advanced security.

We did run some tests to compare performance between a Firestore Collection and an ODataCollectionView. One of the tests was to check the time needed to load the Northwind Orders table, which contains 830 items.

On average, the Firestore Collection loaded the data in 550 milliseconds, while the ODataCollectionView took 1,940 ms to load the same data. Firestore lived up to its reputation, loading the data about 3.5 times faster than the ODataCollectionView.

Improved Type Information

In this new version, we reviewed and expanded the type of information in all Wijmo modules to support TypeScript's "strict" mode.

The main change was the addition of an "| null" to the type specification of all nullable properties.

Continued Quality Improvement

In this new version, we focused on quality improvement, including:

  • Massive upgrades to our automated testing tools and test cases
  • Closing hundreds of QA tickets, including bugs, questions, and suggestions

Breaking Changes

  • [Globalize] made the parseDate method a little stricter. Before, it ignored extra data present in the input string. Now, extra data will cause the parsing to fail. For example: Globalize.parseDate('2020/1/1 extra'); Used to return January 1st, 2020 (the ' extra' string was ignored). Now it returns null because of the ' extra' string after the date. (TFS 467774)
  • [MergeManager] The MergeManager constructor used to take a FlexGrid as an argument. That argument has been deprecated and should be removed from callers and derived classes. This change allows you to create MergeManager instances before creating any grids, and also allows you to use a single MergeManager instance with multiple grids
  • [TreeView] disabling a node now collapses it automatically
  • [PivotCollectionView] This class is now read-only. It was designed to show PivotEngine results, and its contents are not meant to be edited by users. For this reason, it can no longer be edited from a PivotGrid, even if the isReadOnly property is set to false

Change Log

  • [TypeScript] Expanded type information for nullable properties (to support TS's strict mode)
  • [PDF] wijmo.pdf module can be now used in application with the “script-src 'self'” Content-Security-Policy setting
  • [TransposedGrid] Added support for rows groups instead of column groups (TFS 467929)
  • [ObservableArray] now notifies properly when the "shift" and "unshift" methods are called
  • [CollectionView] improved change tracking: editing an item and then restoring its original property values now removes the item from the "itemsEdited" list
  • [wijmo.cloud.Collection] now has a "getSubCollection" method that provides access to sub-collections in data items
  • [UndoStack] now supports merged FlexGrid edits, restoring the grid selection after edit actions, the new InputDateRange control, and CollectionView-based change tracking
  • [Calendar] improved accessibility by adding aria-label attributes to day and month elements
  • [FlexGrid] The "select" and "startEditing" methods now support column names/bindings in addition to column index. Also, the GridPanel's "getCellBoundingRect", "getCellElement", and "getSelectedState" methods also support column names/bindings in addition to index
  • [FlexGrid] Now, the cellTemplate property can be used in header columns. For example: 
    // show row indices in the row header cells:  
let col = theGrid.rowHeaders.columns[0];  
col.cellTemplate = ctx => ctx.text || (ctx.row.index + 1).toString();
    [FlexGrid] Users can now clear a column's current sort with touch. To remove a column's sort with the mouse, users can CTRL+click the column header. To remove a column's sort with touch, users can touch the column header to cycle through the three possible sort orders: ascending, descending, and none
  • [FlexGridDetailProvider][MultiRow] The MultiRow control can now be used with the FlexGridDetailProvider class
  • [FlexChart] Added Axis.axisLabels property that provides access to the actual axis labels. (TFS 467386)
  • [TreeView] Added a collapseWhenDisabled property that determines whether disabling nodes should automatically collapse them
  • [ComboBox, Gauge, Calendar, InputNumber, InputDate] Added a handleWheel property that determines whether the control should handle mouse wheel events or defer them to the document
  • [InputMask] Added an overwriteMode property to control whether typed characters should replace ones or be inserted before them
  • [FlexGridSearch] Added a searchAllColumns property to determine whether the search should include invisible columns
  • [Xlsx] The Workbook's "load" and "loadAsync" methods now accept an ArrayBuffer instance. Added type information to the "workbook" argument of the "load" and "loadAsync" methods of the FlexSheet and FlexGridXlsxConverter classes
  • [TransposedMultiRow] Fixed issue when selection events are fired multiple times (TFS 467517)
  • [wijmo.xlsx] Decimal entities in inline strings are now converted to Unicode

Download Now!

Chris Bannon

Global Product Manager of Wijmo
comments powered by Disqus