Wijmo Build 5.20241.19 Is Available

This build is a hotfix that includes new framework support for Next.js and Nuxt.js, Angular 18 support, some significant enhancements, and a long list of fixes.

Angular 18 Support

We are happy to announce that Wijmo fully supports Angular 18. We have a long tradition of support in Angular, including powerful features in markup like Cell Templates in FlexGrid. We believe Wijmo offers the most powerful set of Angular components and the best Angular DataGrid in the market.

New Next.js Support

Next.js is a powerful React framework that provides a robust platform for building modern web applications. We are happy to announce official support for Wijmo in Next.js applications. 

Wijmo’s React Interop enables you to utilize Wijmo controls within a Next.js project. The interop acts as a wrapper for the Wijmo controls, creating and managing the underlying control instances while providing references via the ref property. This setup allows you to declaratively bind to the control properties and events, integrating seamlessly with your React components.

To successfully use Wijmo components in your Next.js application, you need to ensure that these components are rendered only on the client side, as server-side rendering (SSR) is not supported.

Get started by following our Next.js QuickStart.

New Nuxt.js Support

Nuxt.js is a powerful framework built on Vue.js that enables the development of universal, server-rendered web applications. We are happy to announce official support for Wijmo in Nuxt.js applications.

Wijmo components for Vue2 allow you to use Wijmo controls in Nuxt.js projects. A Wijmo Vue2 component is a wrapper for the Wijmo control that creates a Wijmo control behind the scenes and provides reference to the control instance via the ref property, allowing you to bind to the control properties and events declaratively. 

Get started by following our Nuxt.js QuickStart.

React Support Now Strongly Typed

We have improved our React interop by changing it to be strongly typed. Now, React components will use more types (previously any types) to help prevent errors during development time. 

Note: React TypeScript users may have type errors pop up in their app based on these changes. See the Breaking Changes section below.

New focusFirst Utility

A common request from customers is to have more control over initial focus. For example, when a Wijmo component becomes focused, some customers want to specify which part of the component gets the focus. 

In order to offer this control, we are introducing a new utility called focusFirst. This is a general solution that works with all Wijmo components and any other DOM element as well.

An example is in our Filter dialog for FlexGrid. The default focus is on the Search box. 

However, one of our customers wanted to focus on the Ascending button in order to follow more strict accessibility guidelines. So, using focusFirst, we can easily set the initial focus in the filter dialog to the Ascending button.

Here is a code example for the focusFirst utility.

HTML Support in FlexChart

Based on customer requests, we have added the ability to render HTML in FlexChart text. Now, you can set the htmlText option in FlexChart and render HTML elements inside text (labels, legends, etc) in your charts. 

Here is a code example of HTML in FlexChart text.

FlexGrid Enhancements

Not a release goes by where FlexGrid isn't improved. As always, we included some nice enhancements in this release. We improved our HitTestInfo by adding a mergedRange property to get the merged status of the clicked cell. We have also added the cssClassAll property set on column group headers. 

Date and Time Input Enhancements

We have updated all of our Date and Time input components to support better keyboard navigation of date and time parts. Now, you can use up and down arrow keys to increase or decrease each part of the date and time object. 

Accessibility Improvements for Menu

Another great suggestion from a customer was some key accessibility improvements to our Menu component. We improved the HTML markup, including ARIA attributes. Moreover, we added an option to automatically select and focus the first item in the options list when the Menu opens. You can use this new behavior by setting the autoSelectOnFocus property. We are always happy to hear from our customers' accessibility experts. Many of our improvements have been based on real-world usage and feedback. 

Breaking Changes

This release includes some significant changes to React to be strongly typed. These enhancements were made to improve our functional React support, implement better error checking, and add Next.js support. However, the changes made could cause errors in your applications. 

[React] TypeScript projects using React interop may experience compilation errors related to JSX syntax if relying on non-self-closing JSX components.

React interop is now strictly typed, so depending on the build setup, type errors may prevent the project from building until all errors are resolved.

Most of the time, type errors are simple to fix. We just need to assign the correct types to the properties.

[React][TreeView][Accordion] TabPanel and Accordion components may experience layout inconsistencies or unexpected styling due to the introduction of the wrapping <div> element.

React interop for Tab and AccordionPane components, where previously provided HTML content was directly added to the control body, is now wrapped inside a div element.

[FlexGrid] cssClass and cssClassAll are not applied on column group header when set on the column.

This change affects the functionality of cssClassAll property of Column. It will provide users with more granularity and control for styling the column group headers.

Lastly, cssClass property is only applicable to data cells, maintaining the same functionality as in version 5.20232.939 and earlier.

Ready to See What the Latest Release Has to Offer? Download Wijmo Today!