We’re pleased to announce the third major release of Wijmo in 2016!

Download Wijmo V3 2016

Interop Enhancements

Wijmo has continued to expand interop to include Angular 2, ReactJS, and VueJS.

Module Support

Wijmo was originally designed as a single module. Everything was stored in the wijmo namespace. Wijmo now includes many different module flavors so that it is more easy to use with different module loaders. When downloading Wijmo, you get wijmo’s scripts as AMD modules, CommonJS modules and SystemJS modules. With these modules you can easily use wijmo in WebPack, AngularCLI, etc.

Wijmo also includes NPM images with each of these module formats. This allows you to run “npm install” from a local NPM image on disc. We are hoping to one day support the public NPM registry as well.

Learn more: Integrating Wijmo Controls with Module Loaders and Bundlers

Angular 2 Support

Not only is Wijmo committed to Angular 2 support, but we have interop libraries for many JavaScript frameworks. Learn more about Angular 2 support or about FlexGrid, the best data grid for Angular 2.

ReactJS Support

Wijmo is dedicated to interop in any framework. This release contains official support for ReactJS, and you can use Wijmo controls in any ReactJS application as React components.

ReactJS Interop sample | How to Use Wijmo in ReactJS Apps blog | ReactJS DyanmicDashboard sample | How to Create a Dynamic Dashboard in React blog

VueJS Support

VueJS is another framework gaining traction. Many customers have requested VueJS support in Wijmo. This release offers official support of VueJS 1.x and 2.x. You can use Wijmo controls in any VueJS application as Vue components.

VueJS Interop sample | How to Create Great VueJS applications Using Wijmo Controls blog

ReportViewer

This release includes a ReportViewer control in our new wijmo.viewer module, included in Wijmo Enterprise. The ReportViewer is used to display reports from a FlexReport server. FlexReport is a .NET reporting solution that can render SSRS reports as well as migrate Crystal Reports and C1Reports. The ReportViewer calls a web API that renders the document and sends it back in a format for being displayed in an HTML5/JavaScript application.

The Wijmo ReportViewer has a wide array of features like: thumbnail display, scrolling or paged reports, zooming, printing, exporting and more. Best of all, ReportViewer can render reports on mobile devices.  

To use the ReportViewer, you will need FlexReport, which is included in GrapeCity’s Ultimate suite. Purchasing Ultimate will give you access to all Wijmo controls as well as FlexReport and more.

wijmo_01_reportviewer

ReportViewerIntro Sample | ReportViewer Tutorial

PDF Viewer (Beta)

Similar to our new ReportViewer control, we are providing a Bea version of a new PdfViewer control. It is also included in the wijmo.viewer module, included in Wijmo Enterprise. The PdfViewer control displays PDF files that are render on the server using C1 Web API PDF Services (.NET).  

To use the PdfViewer, you will need C1 Web API PDF Services, which are included in GrapeCity’s Ultimate suite. Purchasing Ultimate will give you access to all Wijmo controls as well as PDF Services and more.

 

wijmo_02_pdfviewer

PdfViewerIntro Sample (Beta)

FlexGrid Validation

We added data validation to the CollectionView class, which can be used by all Wijmo controls that support data collections, including the FlexGrid.

To add validation support to a CollectionView, set the new getError property to a callback function that takes a data item and a property name as parameters, and returns a string with an error description (or null if there are no errors).

wijmo_03_olapshowas

Validation Sample | Data Validation in FlexGrid Blog

OLAP ShowAs

At the request of our customers, we have added more options to our showAs field setting in our OLAP PivotPanel.

We added five new settings to the wijmo.olap.PivotField.ShowAs enumeration: PctGrand, PctCol, PctRow, RunTot, and RunTotPct. These new settings are compatible with similar settings available in Excel. Take a look at the new feature in the OlapShowAs Sample.

wijmo_03_olapshowas

FlexGrid Footers

We’ve added support for column footers in FlexGrid. Easily add custom footers to columns using the new columnFooter in FlexGrid. Take a look at this new feature in the FlexGrid Custom Footers sample.
wijmo_04_flexgridfooters

New Chart Types

We have a new Box Plot chart type for creating Box & Whisker charts. It is included in the wijmo.analytics module and implemented as a series. Take a look at the new box plot chart type in the FlexChartAnalytics sample.

wijmo_05_flexchartanalytics

This release includes a new FlexRadar chart control that can be used to create radar-type charts. Take a look at the new FlexRadar Intro sample.

wijmo_06_radar

We also added a funnel chart type to FlexChart. Take a look at the new funnel chart type in the FlexChart Intro sample.

wijmo_07_funnel

New Help System

Last, but not least, we’ve completely rebuilt and redesigned our online documentation. The redesign includes better content, layout, navigation, search and much more. Take a look at our new online documentation.

wijmo_08_help

New Samples

Use the SampleExplorer to search, filter by framework and even browse source code for all of our samples.

Breaking Changes

  • Changed the arguments of the cellEditEnding event from CellRangeEventArgs to CellEditEndingEventArgs, which extends the former with a ‘stayInEditMode’ member. Any code that calls the onCellEditEnding event raiser should be updated as follows:
// raise grid's cellEditEnding event
//var e = new wijmo.grid.CellRangeEventArgs(grid.cells, this._rng);
var e = new wijmo.grid.CellEditEndingEventArgs(grid.cells, this._rng);
grid.onCellEditEnding(e);
  • FlexSheet: Changed .wj-header-row font and background colors. To get old styles reset values to: background-color: #4800ff !important; color: #ff6a00 !important;

Change Log

"dependencies": {
"wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20162.222.tgz",
... another libraries
}

Due to this change, the samples from Wijmo Enterprise Evaluation build can be freely moved to a new location now without a necessity to correct Wijmo reference in package.json.

  • Added external module versions of Wijmo core modules. Wijmo download zip now includes NpmImages folder with the wijmo-amd, wijmo-commonjs and wijmo-system subfolders containing Wijmo modules in AMD, CommonJS and System formats respectively. Each of these folders is effectively an NPM image that can be installed using the npm install [path to a folder] command. Alternatively, a corresponding record can be added to an application’s package.json file that will cause Wijmo installation from a local folder to the application’s node_modules/wijmo folder, when "npm install" command is executed in the application’s root folder. For example:
"dependencies": {
"wijmo": "../../../../../NpmImages/wijmo-amd",
... other libraries
}

Currently only Wijmo core and Angular 2 interop modules are represented as external modules in these folders, the rest of interops are shipping as conventional global modules. The culture files (wijmo.culture.[culture_code]) are global modules too, and should be used in conjunction with Wijmo external modules in the same way as they are used with global modules – by adding them to HTML page using <script> tag, or in dynamic scenarious by loading them using XMLHttpRequest.

One important remark regarding Angular 2 interop modules: Those were external modules from the day one, and referenced Wijmo core modules via global ‘wijmo’ variable (e.g. wijmo.grid.FlexGrid). The Angular 2 interop modules under the NpmImages folder are different: they reference Wijmo core external modules using the TypeScript "import" statement (that transpiles to the appropriate JavaScript code depending on the current module format). For example:

import * as wjcGrid from 'wijmo/wijmo.grid';

Module names follow the same convention as Angular 2 interop modules, i.e. ‘wijmo/’ prefix followed by a module name, e.g. ‘wijmo/wijmo’, ‘wijmo/wijmo.input’, ‘wijmo/wijmo.grid’. Wijmo Angular 2 samples are reworked to use external versions of Wijmo core modules. Their package.json file includes a reference to the NpmImages/wijmo-amd folder (as shown in the example above) that causes an automatic installation of all necessary Wijmo code in the node_modules/wijmo folder when you issues an "npm install" command.

Note that this definition works only if you use it from its original location in the Wijmo zip image. If you move a sample to a new location then you need to correct this path in the sample’s package.json. The rest of the samples continue to use conventional global modules. Integrating Wijmo Controls with Module Loaders and Bundlers

  • Added a new wijmo.viewer module that includes two controls:
    • ReportViewer: displays server-side generated FlexReport and SSRS reports.
    • PdfViewer: displays PDF files using a server-side service.
  • Improved support for filtered DataMaps with duplicate display values
  • Added ability to export the FlexGrid.columnFooters panel to PDF (TFS 208282).
  • Added ‘showFilterIcons’ property for FlexSheet. User is able to show/hide the filter icons in the Column Header of FlexSheet by this property. (TFS 214354)
  • Added ability to skip columns of FlexGrid during exporting to Excel. (TFS 195426)
  • Add word wrap support for saving/loading xlsx file. (TFS 205565)
  • Replaced character-based pencil and asterisk icons used to indicate edit mode/new template in FlexGrid rows with new glyphs: "pencil" and "asterisk". This makes it possible to hide or customize the icons using CSS.
  • Added FlexGrid.rowEditStartingStarted events to complement the rowEditEnding/Ended events which were already available. Also made rowEditEnding/Ended events fire when canceling edits. These changes make it easier to implement custom behaviors such as edit mode indicators and deep-binding edit undos.
  • Improved FlexGrid.beginningEdit event parameters to set the "data" event parameter to the event that caused the grid to enter edit mode (usually a keyboard or mouse event, or null if the editing was initiated by a call to the startEditing event)
  • Improved FlexGrid column auto-generation to handle fields that contain null values
  • Added Vue2 interop (wijmo.vue2.js) https://vuejs.org/2016/04/27/announcing-2.0/
  • Added support for wijmo.olap controls to Vue/React interops
  • Added Vue/React versions of the OlapIntro sample

Download Wijmo V3 2016