Wijmo has continued to expand interop to include Angular 2, ReactJS, and VueJS.
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.
Angular 2 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.
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.
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.
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.
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).
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.
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.
- 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.
- 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);
- FlexSheet: Changed .wj-header-row font and background colors. To get old styles reset values to: background-color: #4800ff !important; color: #ff6a00 !important;
- 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:
... 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:
... 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.
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