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.
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.
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).
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.
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.
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.
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.
We also added a funnel chart type to FlexChart. Take a look at the new funnel chart type in the FlexChart Intro sample.
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.
New Samples
- Angular 2 Explorer
- Integrating Wijmo Controls with Module Loaders and Bundlers
- ReactJS Interop sample | How to Use Wijmo in ReactJS Apps blog
- ReactJS DyanmicDashboard sample | How to Create a Dynamic Dashboard in React blog
- VueJS Interop sample | How to Create Great VueJS applications Using Wijmo Controls blog
- ReportViewerIntro Sample | ReportViewer Tutorial
- PdfViewerIntro Sample (Beta)
- OlapShowAs Sample
- Validation Sample | Data Validation in FlexGrid Blog
- FlexChartAnalytics Sample
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
- Angular 2: Added support for Angular 2 Angular 2 Info
- ReactJS: Added support for ReactJS ReactJS Info
- ReactJS: Added DynamicDashboard sample DyanmicDashboard sample | How to Create a Dynamic Dashboard in React blog
- VueJS: Added support for Vue 2 (requires version RC.6). VueJS Interop sample | How to Create Great VueJS applications Using Wijmo Controls blog
- Added new ReportViewerIntro (Pure JS, Angular 1/2) sample for the wijmo.viewer module. ReportViewerIntro Sample | ReportViewer Tutorial
- Added new PdfViewerIntro (Pure JS) sample for the wijmo.viewer module. PdfViewerIntro Sample (Beta)
- 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. OlapShowAs Sample
- Added validation support to CollectionView (CollectionView.getError property) and to FlexGrid (FlexGrid.showErrors and FlexGrid.validateEdits properties). When showErrors is set to true, the grid shows validation errors on row headers and cells. When validateEdits is set to true, the grid remains in edit mode while there are validation errors. Validation Sample | Data Validation in FlexGrid Blog
- Added a new BoxPlot series to the wijmo.chart.analytics module. It represents Box & Whisker charts. An example is uncluded in the FlexChartAnaytics sample. FlexChartAnalytics Sample
- Angular 2 samples in the Wijmo Enterprise Evaluation build now install Wijmo modules from an online location (instead of a local one used in the rest of builds). A corresponding record in package.json files now looks like this:
"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.