Wijmo v3 Has Landed

November 11 2020

Wijmo 2020 v3 has landed. Our 3rd major release of 2020 focused on quality. We have put significant efforts into growing our automated and manual testing. We believe Wijmo is the highest quality JavaScript product on the market and will continuously improve it. This release includes a new InputDateRange component, significant enhancements to CollectionView, and much more. We also have support for Vue 3, React 17, and Angular 11 RC!

Wijmo Supports Vue 3

Wijmo has added support for the Vue 3 official release (version 3.0.0). We upgraded the wijmo.vue2.* modules to support Vue 3, so you can continue using the same Vue interop library from Wijmo.

Read more about how Wijmo supports Vue 3 in our blog from the Wijmo engineering team!

Check out our Vue 3 Reference Applications.

Wijmo Supports React 17

Wijmo also supports React version 17. We have updated our wijmo.react.* modules to support the latest version of React, so you can update your Wijmo packages and upgrade to React 17 now!

We have also published a guide for using datagrids in React that covers much more than just Wijmo.

Learn more about Wijmo React UI Components.

Wijmo Supports Angular 11 RC

Wijmo has also recently tested against Angular 11 RC1 without any issues. You can use our existing wijmo.angular2.* modules in Angular 11 RC today. Read how to get started with Wijmo in Angular 11 in our documentation.

Learn more about Wijmo Angular UI Components.

New Date Range Picker

We have added a new InputDateRange control for adding date range selections to your applications with ease. You can specify custom date ranges that users can pick from (like "Yesterday," "This Week," "Last Month," etc.), or they can use the multi-month calendar in the drop-down to select date ranges with the mouse or keyboard.

InputDateRange makes choosing date ranges easy! Give your users a friendly way of choosing date ranges.

Wijmo v3 Has Landed

Try out a live demo of our new date range picker:

Flexible Layout for Multiple Pie Charts

FlexPie has supported multiple pie charts in one chart surface for some time. Now we've added the ability to control the layout of the charts. We have added the chartsPerLine option to define how many charts to display before wrapping to the next line.

Here is the default rendering of FlexPie with four charts in it:

Wijmo v3 Has Landed

And if we set chartsPerLine to two, then we get this result:

Wijmo v3 Has Landed

This option gives you much more control over how FlexPie fits into your application.

Try out a live demo for multiple pie chart layout:

Calculated Fields in CollectionView

CollectionView now includes a compelling new feature for adding calculated fields to your dataset. Calculated fields offer dynamic values that are updated automatically as data changes! You can use this feature by setting the calculatedFields property of CollectionView to a value that contains the names of the calculated fields and functions used to obtain the field values. The functions may be specified as regular JavaScript functions that take the current data item as an argument or as string expressions with an "$" value representing the current data item.

For example, here is a calculatedFields definition that uses JS functions:

calculatedFields: {  
  fullName: ($) => [$.brand, $.product].join(' '),  
  allCaps: ($) => $.fullName.toUpperCase(),  
  totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount),  
  tax: ($) => $.totalPrice * 0.12  
 }

This code produces the following results (purple cells are all calculated based on CollectionView data).

Wijmo v3 Has Landed

Any Wijmo control that binds to CollectionView can use this powerful new feature!

Learn more in our calculatedFields blog.

Multiple Error Reporting in CollectionView

CollectionView validation has been supported for a while now. But one of our customers pointed out that when a row in FlexGrid has multiple errors (rare case), the rowHeader error tooltip only shows the first error message.

So we improved the error message to now include all errors in the entire data item by default. This message makes the information more useful and our data grid more user-friendly.

Here is what the default message looks like now with multiple errors in one row:

Wijmo v3 Has Landed

As with the "flex philosophy," you can customize this message to your liking! Here is an example that summarizes the errors with an error count instead of listing all errors:

Wijmo v3 Has Landed

Thanks for the suggestion! We think this feature is a nice improvement to Wijmo.

Try out a live demo of CollectionView Validation:

Change Log

[CollectionView] added a calculatedFields property that allows you to add read-only, dynamic fields calculated based on other fields in the same data item.
[Calendar, InputDate] added a DateSelectionMode.Range selection mode that allows users to select date ranges. Selected ranges are defined by the "value" and "rangeEnd" properties. You may specify the minimum and maximum valid range lengths with the "rangeMin" and "rangeMax" properties.
[Calendar, InputDate] added a "monthCount" property that allows you to show multiple months in the same calendar control.
[Calendar, InputDate] added a "weeksBefore" and a "weeksAfter" property that allows you to show additional weeks before and after the current month.
[Calendar] now disables previous/next month buttons when the current display month reaches the max/min limits.
[CollectionView] now raises the currentChanged event when the current item changes even if the position is the same (e.g., after filtering or changing the page size).
[CollectionView] getError method can be called with no specific property to check for errors in the whole data item (the error message returned shows in FlexGrid's row header cells).
[InputNumber] now disables increment/decrement buttons when the value reaches the max/min limits.
[Menu] added type information to the command property.
[MultiSelect, MultiSelectListBox] now has delay and caseSensitiveSearch properties to enhance flexibility and improve consistency with the AutoComplete control.
[MultiSelectListBox] now has a selectedIndex property (like the regular ListBox).
[MultiSelect, Menu] now honors the headerPath property setting.
[ColorPicker] ignores setting values to strings that do not represent colors.
[InputColor] sets the value property to strings that do not represent colors used to raise the valueChanged event twice (once with the invalid value, once with the original value restored). Now it merely ignores the null assignment and presents no events.
[FlexGrid] improved Column.editor property to work with Column.cellTemplate. In previous versions, columns with cellTemplate != null did not show drop-down buttons in columns with custom editors.
[FlexGrid] honors the caseSensitiveSearch property setting when editing cells with dataMaps.
[FlexGrid] improved the validation mechanism to show custom or multiple errors in the row header cells.
[FlexGridFilter] condition filter now honors the FlexGrid.caseSensitiveSearch property.
[FlexPie] added chartsPerLine property that allows controlling the layout of multiple pie charts. (TFS 466046)
[Vue] Added 'position' property to the wjTooltip directive, representing the Tooltip.position property of the pure JS class. To allow you to specify additional properties for the wjTooltip directive, it now accepts an object with multiple properties as its value, for example:
```
<div v-wjTooltip="{tooltip: 'Some hint', position: 'Right'}">Some content</div>
```
[Angular] Added wjTooltipPosition property for the wjTooltip directive, representing the 'position' property of the pure JS Tooltip class.

Download Now!

Chris Bannon

Global Product Manager of Wijmo