Wijmo 5

The Next Generation of JavaScript Controls

Deliver next-generation HTML5 applications with Wijmo 5, a collection of true JavaScript controls written in TypeScript and built for speed. With touch-first design and full Angular support, these lightweight controls will blow you away with their power and flexibility.

Already purchased Wijmo? Download it here.

Read about our interop support: Angular 2 ReactJS VueJS


Wijmo 5: Fast, Flexible, Familiar JavaScript Controls

Fast and Lightweight

  • We build small: our most popular control, FlexGrid, has a base size of 113 KB.
  • Our true JavaScript controls are built in TypeScript and have no dependencies.
  • Wijmo’s controls are lightning-fast. Try the benchmark demo.

Flexible and Extensible

  • Our easy-to-read, flexible API has a low learning curve and allows you to extend controls to meet your needs.
  • Controls are designed to have a simple core with as many extensibility points as possible. FlexGrid’s core has all the standard features of a data grid, but complex filtering, grouping, and more, are available as extensions.

Familiar

  • FlexChart aims for parity with Excel’s charts
  • FlexGrid and FlexSheet offer Excel-like filtering, sorting, and merging
  • Input controls are designed so that you can customize to your user’s needs

Wijmo FlexChart's performance on 10,000 data points (expressed in seconds)

Wijmo FlexChart’s performance on 10,000 data points (expressed in seconds)

Basic FlexGrid

Wijmo FlexGrid



Download Free Trial

First-Class Framework Support

Wijmo is framework-agnostic, and we continue to add support for new frameworks. Here’s a look at our current framework support.

AngularJS and Angular 2

Wijmo’s Explorer fully supports Angular 2. In addition, we ship and maintain AngularJS directives for all of our controls and use it in most of our samples.

Read more about our first-class Angular 2 Support.

ReactJS

Our controls are fully supported in ReactJS, including FlexGrid, FlexChart, Input, and Gauges.

Read more about our ReactJS Support.

More Interop Options

We’re always thinking about new directions for Wijmo.

VueJS: How to Create Great VueJS Applications Using Wijmo Controls

KnockoutJS: Read about our Knockout support

FlexGrid’s Declarative Markup in Angular 2

FlexGrid’s Declarative Markup in Angular 2


Download Free Trial

True JavaScript Controls Written In TypeScript

Large-scale, client and server side applications are possible with Wijmo 5. We built on TypeScript for a better coding experience, and to save you time.

What you’ll get with TypeScript:

  • Object-oriented C#-like feel
  • Design-time error checking
  • Complete IntelliSense for Wijmo in Visual Studio
  • True JavaScript Controls

    The ECMAScript 5 standard adds support for property getters and setters. This may seem like a small change, but it makes a huge difference. It’s given us the opportunity to create true JavaScript controls.

    Additional Benefits of Wijmo 5:

    • ICollectionView provides a familiar experience for .NET developers migrating to HTML5
    • All Wijmo 5 controls can be bound to CollectionView

    New control syntax vs old widget pattern

    New control syntax vs old widget pattern


    Download Free Trial

    Demos

    Browse, search, view source code and run all of our samples using the Wijmo 5 Sample Explorer.

    Wijmo Control Explorer

    Wijmo 5 Control Explorer

    Shows how to use all the controls in Wijmo 5, as well as the infrastructure shared by all the controls.

    Run Demo  |  Learn More

    FlexGrid JavaScript Data Grid

    FlexGrid 101

    Perform common tasks with FlexGrid, our fast and flexible data-bound grid control.

    Run Demo  |  Learn More

    Wijmo FlexChart JavaScript Chart

    FlexChart 101

    Perform common tasks with FlexChart, our beautiful and easy-to-use chart control.

    Run Demo  |  Learn More

    Wijmo FlexPie JavaScript Pie Chart

    FlexPie 101

    Get started with FlexPie, our flexible pie chart control.

    Run Demo  |  Learn More

    Wijmo JavaScript Gauge Control

    Gauge 101

    Get started with LinearGauge and RadialGauge, our smart and flexible gauge controls.

    Run Demo  |   Learn More

    Wijmo JavaScript Input Control

    Input 101

    Perform common tasks with all the Input controls in Wijmo 5.

    Run Demo  |  Learn More

    Wijmo JavaScript CollectionView Control

    CollectionView 101

    Get started with CollectionView, our .NET-like class that uses regular JavaScript arrays as data sources.

    Run Demo  |  Learn More




    What Our Customers Say

    Thomson Reuters
    “We rely on functionality of Wijmo 5’s FlexGrid in our massive next-generation platform products. Wijmo’s modern, full-featured FlexGrid with sophisticated grid manipulations is what you will find at the heart of our workflow.”

    — Aaron Mendez, Manager of User Experience, Thomson Reuters

    Cisco
    “We purchased Wijmo and their team is doing a great job: good-looking, well-thought-out architecture; documentation; keeping up with ever-changing landscape like no others.”

    — BJ Jeong, Cisco

    Our Customers

    Our Customers



    What’s New

    What’s New in Wijmo 2016 v3 Release

    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

    View Changelog History