Angular 2 Support for Wijmo UI Controls

Wijmo has supported Angular since the early 1.x days. Recently, we've been working alongside the Angular team to support Angular 2. Interestingly, supporting Angular 2 was even easier. Our source code is written in TypeScript, so we were able to easily extend our control classes to create Angular 2 components quite easily. Angular2 Wijmo Explorer Wijmo offers Angular 2 components for each of our UI Controls. Our Angular 2 components all offer fully declarative markup. We've included two-way binding support for properties that require it, and we also offer bonus feature—like cell templates for FlexGrid—that allow you to specify cell content in markup, including custom bindings and other components. Angular2 Markup Wijmo's Angular 2 components are packaged as modules and can be used as NPM packages in Angular 2 applications. We've followed the same pattern that the Angular 2 team set. Using Wijmo components will feel very familiar in Angular 2.

Angular 2 Samples

HTML5 OLAP Module for Wijmo

Now included in Wijmo Enterprise: OLAP for Wijmo. When you have a lot of data, analysis can be difficult if you're looking at a plain list of items. Pivot tables can help by summarizing data and allowing you to manipulate it in different ways. Excel has “Pivot Tables” that make this task easy. You select the raw data, click “Insert Pivot Table”, pick a destination, and get a panel where you can drag fields to summarize data in different ways, and instantly see the results. This is one of Excel’s most powerful and popular features. OLAP for Wijmo provides the same functionality within your HTML5 applications. Add a PivotPanel control to a page, give it some raw data by setting its dataSource property, and connect a PivotGrid and/or PivotChart controls to see the results. Try it for yourself in our Getting Started with OLAP sample.

PivotPanel

Wijmo’s PivotPanel is very similar to the PivotTable Field List in Excel, providing a familiar, quick experience for end users.

  • PivotPanel displays a list of all available fields in a database, allowing end users to easily create analytical views of data.
  • Users can drag fields to four different areas in the panel:
    • Filters
    • Columns
    • Rows
    • Values
  • PivotPanel's smart data types save the user a great deal of time. For example, if you place a checkmark next to a string type, it automatically places that field in the Rows Area, but if you place a checkmark next to a numeric type, it automatically places that field into the Values Area.
  • You can use the same field multiple times in the Values Area for displaying things like both Count and Sum aggregations.
  • PivotPanel also supports data filtering and formatting powered by Wijmo Globalize.

Wijmo OLAP: Add Fields in PivotPanel Add Fields in PivotPanel

PivotGrid

PivotGrid allows end users to create analytical view of their data. The Excel-like pivot table facilitates the display and navigation of large datasets and binds to a PivotPanel. PivotGrid supports expanding and collapsing rows and displays calculated aggregate data, including subtotals in grouped rows. Wijmo PivotGrid Display groups and subtotals in PivotGrid PivotGrid extends FlexGrid and provides very flexible rendering and easy cell formatting. Wijmo PivotGrid: Format Cells Dynamic formatting in Wijmo PivotGrid

PivotChart

PivotChart is an extension of FlexChart that is optimized for displaying aggregate data. When bound to a PivotPanel, it visually groups data as the user selects fields. Wijmo PivotChart Wijmo PivotChart

Wijmo PDF

Wijmo’s PDF module is a PDFKit-based library for generating PDF documents. It's used in extensions that export FlexGrid and FlexChart to PDF. Wijmo’s PDF module also supports drawing FlexGrid and FlexChart mixed with arbitrary PDF primitives like text, graphics and images in a single document.

Material Design Support

Material Design Lite (MDL) is Google's implementation of their Material Design specification for web developers, and is modern, beautiful alternative to Bootstrap CSS. We've created almost 300 new Wijmo themes to support all of MDL’s standard color combinations, and created a sample that shows how to use Wijmo controls along with Material Design. Material Design Lite Support Material Design Lite Support

FlexSheet Samples

We've added some comprehensive FlexSheet samples in this release. The FlexSheet Explorer sample showcases many of FlexSheet’s best feature, and you can try out many features in one place. The source code for this sample can also be used to demonstrate feature implementation. Wijmo FlexSheet Explorer Wijmo FlexSheet Explorer We've also added the FlexSheet 101 sample, a getting started guide that walks you through the basics of FlexSheet. Wijmo FlexSheet 101 Wijmo FlexSheet 101

Change Log

  • Added wijmo.angular2.* modules (Beta version), allowing developers to use Wijmo controls in Angular 2 applications markup. Angular 2 Explorer | Angular 2 Info
  • Added a wijmo.olap module that provides Excel-like pivot tables and charts to Wijmo. (Wijmo Enterprise only) OLAP 101 Sample | OLAP Blog Series
  • Added 288 Material Design themes and Material Design sample. Material Design | Material Design Blog
  • Added a wijmo.chart.animation module with the ChartAnimation main class that provides animations for the FlexChart, FlexPie and FinancialChart controls. The FlexChartAnimation sample demonstrates module's features. Chart Animation Sample
  • Added ChartGestures to the wijmo.chart.interaction module. The class adds touch zoom and panning functionality to the FlexChart control. The FlexChartZoom sample demonstrates usage of the class. Chart Zoom Sample
  • Added FlexChartBase.exportToImage method that allows exporting charts to PNG, JPEG, and SVG formats. Chart Export Sample
  • Added Axis.labelPadding property that controls padding of axis labels.
  • Added FlexSheetExplorer and FlexSheet 101 samples. FlexSheet Explorer | FlexSheet 101
  • Added a wijmo.pdf module, with the PdfDocument main class that provides client side functionality for creating files in PDF format. The module is based on a modified version of the PDFKit library (http://pdfkit.org/) with a footprint minified up to 375Kb.
  • Added wijmo.grid.pdf module which is an extension of the wijmo.pdf and wijmo.grid modules and provides functionality for exporting FlexGrid to PDF format. PDF Export Sample
  • Added a PrintDocument class to the wijmo module. This class allows you to create documents for printing, which in modern browsers includes the option to export to PDF. PrintDocument Sample
  • Modified FlexGridFilter module to clear value filters when all possible values are selected.
  • Added a FlexGrid.preserveSelectedState property to control whether the grid should preserve the selected state of rows when the data is refreshed.
  • Added a FlexGrid.preserveOutlineState property to control whether the grid should preserve the collapsed/expanded state of group rows when the data is refreshed.
  • Added a Tooltip.showAtMouse property that causes the tooltip position to be computed based on the mouse position rather than on the target element.
  • Made FlexGrid "stickyHeaders" visible to the mouse, so users can interact with columns (sort/move/resize/filter) while in sticky mode.

Breaking Changes

In the wijmo.grid.sheet.FlexSheet class the 'override' parameter for the 'addCustomFunction' method has been removed.

Get Started

Download Wijmo Enterprise to start developing with our components.