Wijmo Build 5.20182.523 Available

Build 523 has released. It includes an interesting new Business Intelligence PWA sample, submenu support added to our Menu control, PDF performance enhancements, and more.

New Business Intelligence PWA Sample

Progressive Web Apps (PWAs) are regular web apps that behave like native applications on mobile devices. They can be installed, open quickly, and can operate without a network connection.

We created a MyBI sample app to show how easy it can be to build progressive web apps using Wijmo. It gets sales data stored in a Google Sheet and creates a dashboard to support business decisions.

Progressive Web App

Read more about how we created this PWA | Launch the MyBI sample

Change Log

  • [WebComponents] Added Beta version of the WebComponents interop (wijmo.webcomponents.xxx.js modules). The Samples\TS\WebComponents\WebComponentsIntro sample explains the status and usage of the interop. WebComponentsIntro sample | Read about web components
  • [npm] Wijmo is published to the global npm registry as the 'wijmo' package. | Read about Wijmo on NPM
  • [PWA] Added new MyBI sample, a Business Intelligence Progressive Web Application. It gets sales data stored in a Google Sheet and creates a dashboard to support business decisions. MyBI sample | Read more about how we created this PWA
  • Added new HierarchicalMenu sample that demonstrates how to use the new submenu feature of our Menu control. HierarchicalMenu sample
  • Added new DropDownTree sample that demonstrates how to show a TreeView in the drop-down. DropDownTree sample
  • [Menu] Added a Menu.subItemsPath property that allows the creation of hierarchical (multi-level) menus. This is similar to the childItemsPath property in the FlexGrid and TreeView controls. The Menu.subItemsPath property specifies the name of a property that is used to populate child menus when the parent item is clicked.
  • [Menu] Added a Menu.openOnHover property that causes the menu (and any sub-menus) to open and close automatically when the mouse hovers over the control.
  • [wijmo.pdf][wijmo.grid.pdf] Improved performance, memory consumption is reduced.
  • Improved accessibility for grids with imeEnabled (made IME element aria-invisible)
  • Improved RTL support in Calendar/DropDown/Popup controls.
  • Improved touch support on input (don't show the soft keyboard when picking from drop-downs) and gauge controls (allow touch-scrolling on read-only gauges)
  • Added support for popups in HTML elements.

New Samples

Get Build 5.20182.523 now

Current customers can download on their My Licenses page.


Wijmo 2018 v2

New Samples

Change Log

  • [WebComponents] Added Beta version of the WebComponents interop (wijmo.webcomponents.xxx.js modules). The Samples\TS\WebComponents\WebComponentsIntro sample explains the status and usage of the interop. WebComponentsIntro sample | Web Components introduction blog
  • [npm] Wijmo is published to the global npm registry as the 'wijmo' package. | Wijmo and NPM
  • [WebComponents] Added AllComponents sample, which includes all major supported components. WebComponents AllComponents sample
  • Added web-based Wijmo Designer application for designing PureJS controls with a Visual Studio-like property grid and design surface Web-based JS Designer | Web designer blog
  • Added VSCode Wijmo Designer extension for designing controls with a Visual Studio-like property grid and design surface VSCode Designer | VSCode designer blog
  • Wijmo CSS files are implemented using Sass now. Read the blog
  • [React/Redux] Added React/Redux CryptoCurrencyTracking sample. This is a quite big application implemented using React, Redux and Wijmo for React interop. React/Redux CryptoCurrencyTracking sample
  • [ES6] Wijmo ES6 npm images (wijmo-es2015-commonjs-min and wijmo-es2015-esm-min folders in NpmImages) of build 462 are approved as a release version.
  • [a11y] Added a wj-state-focus class selector that complements the wj-state-focused selector. The wj-state-focus selector gets the Wijmo control that has the focus. The wj-state-focused selector gets all Wijmo controls that contain the focus. For example, if you have nested Wijmo controls A, B, and C, and control C contains the active element, then .wj-state-focus will select C and .wj-state-focused will select A, B, and C. The wj-state-focus selector can be useful for implementing focus outlines in CSS. For example:
.wj-state-focus,
a:focus,
button:not(.wj-btn-default):focus,
input:not(.wj-form-control):focus,
input[type=checkbox]:focus {
    box-shadow: 0px 0px 17px 0px rgb(41,173,68);
}
  • [a11y] Improved accessibility for Calendar, TreeView, InputDate, and FlexGridFilter.
  • [a11y] Added aria-required attribute to the FlexGrid native editor element
  • [a11y] Replaced buttons with button elements (better accessibility, supports enter/space keys)
  • [a11y] Replaced all cell buttons in FlexGrid with button elements (filter, detail, list, collapse/expand)
  • [a11y] Added ARIA attributes to buttons in DropDown, InputDateTime, InputNumber, Calendar, ColumnFilterEditor controls
  • [a11y] Added aria-selected attribute to selected items in ListBox, Calendar, TreeView (like FlexGrid and TabPanel)
  • [a11y] Cleaned up ComboBox ARIA attributes
  • [a11y] Added roving tabindex to Calendar and TreeView controls (better accessibility, like FlexGrid and TabPanel)
  • [a11y] Added a 'describedById' property to the FlexGrid's ColumnCollecion and Column classes. This is used to set the aria-describedby attribute on column header and filter elements.
  • [a11y] Added a keyActionEnter property to the FlexGridDetailProvider class.
  • Improved FlexGrid.virtualizationThreshold to support arrays: [rowThreshold, columnThreshold]* [Vue2] Added numerous child components, like various chart series.
  • [Vue2] Child components now correctly work in dynamic scenarios like along with the v-for and v-if directives.
  • [Vue2] Added WjFlexGridDetail component.
  • [Vue2] Added new samples.
  • All samples use httpS CDN references.
  • OData samples use httpS now.
  • WijmoHelp is updated with the Wijmo Designer topic.
  • Documentation is updated with the Sass related topics.
  • Added a Gauge.stackRanges property that causes the control to stack the ranges. The RadialGauge shows them as concentric sectors, the LinearGauge as stacked bars.
  • Added a FlexGrid.autoSearch property that allows users to search for content in the grid by into non-editable cells.
  • Optimized ComboBox performance when opening the drop-down.
  • Optimized ListBox performance when populating the list.
  • Added an ODataCollectionView.expand property to allow retrieval of related entities (as in OData's $expand option).
  • Added an ODataCollectionView.jsonReviver property that allows customization of the parsing process for JSON data returned from the server.
  • Support to insert/remove columns in bound sheet for FlexSheet.
  • Added a document property to the PdfPageArea class.
  • Added a drawDetailRows property to the IFlexGridDrawSettings interface.
  • Added a requestHeaders property to the ReportViewer and PdfViewer controls.
  • Added a beforeSendRequest event to the ReportViewer and PdfViewer controls.
  • Added a parameters property to the ReportViewer control.
  • Improved CollectionView sorting to handle diacritics (accents).

Breaking Changes

  • [NPM] The "themes" folder is a child of the "styles" folder now. It was the sibling with "styles" before.
  • The new Sass-based CSS files contains some rules that are more specific than the original CSS, so if you have custom CSS files you may need to adjust their rules.
  • The new CSS files have more consistent rules about colors, padding, etc, so you may see some small changes when you upgrade. For example, we made item padding consistent among ListBox, FlexGrid, Calendar, etc.
  • The new Sass-based theme files are self-contained and do not require you to add the base wijmo.css file to the page anymore. This means one less HTTP request for pages that contain themed controls. This is not a breaking change, but a chance to improve performance.
  • Changed the default value of the AutoComplete.isContentHtml property from true to false. This should not affect most applications, and the new default prevents involuntary script/html injection. If it does affect your application, set the AutoComplete.isContentHtml property to true and you will get the original behavior.

Wijmo Build 5.201801.462 is Available

Build 462 has released. It includes an exciting new interop with web components (beta) and some nice new PDF and ReportViewer features. It also includes a fix for license validation in older versions of Chrome.

Angular 6

As we already announced, Wijmo supports Angular version 6.0.0. We're still working on upgrading all our samples to Angular version 6 and our TypeScript version to 2.7. A future release will include those.

We also have an interesting blog about using Wijmo with Angular Elements: Angular 6 Support blog

Wijmo controls as web components

This build introduces a beta version of the Wijmo web components interop, which exposes Wijmo controls as web components, or more specifically as custom elements. Wijmo web components allows you to declaratively add Wijmo controls to HTML page, and manipulate them as usual DOM elements, without the use of any additional framework. Some browsers that don't fully support web components standards may require some additional polyfills.

Web components in Wijmo JavaScript controls

If you're not familiar with web components, here's a good introduction to this technology.

The key aspects of the current state of the Wijmo web components implementation:

  1. Wijmo "top-level" web components that represent Wijmo controls, like wjc-flex-grid component representing FlexGrid control, are inherited from the corresponding control classes. For example, WjcFlexGrid component class extends FlexGrid control class. This also means that the base Wijmo Control class extends the HTMLElement class when Wijmo is used in the "web components mode".

  2. Child components that are complementary to top-level components, like wjc-flex-grid-column components that define FlexGrid columns, function as wrappers over Wijmo classes they represent. Child components are directly inherited from the HTMLElement class, and the underlying Wijmo class instance is accessible via the special control property of the component.

  3. Wijmo class properties can be defined using attributes on the component element. When the attribute value changes, the corresponding Wijmo class property is updated accordingly. Changing the class property value doesn't entail changing of the corresponding attribute value. This probably can be changed in the future, but right now we have not decided whether it's necessary.

  4. JavaScript code can subscribe handlers to Wijmo control events using native Element.addEventListener('event', handler) method.

  5. Wijmo components don't use Shadow DOM now. This will be addressed in future versions of the interop. One of the challenges here is that Wijmo allows deep customization of its control's parts via CSS, whereas the goal of Shadow DOM is to prevent it. There are new proposals to the Shadow DOM specification that can mitigate this limitation. We continue to keep track of the changes. For now, Wijmo web components and their parts can be customized in the same way as ordinary Wijmo controls, using global CSS.

One of the benefits of web components is that the same component can be used in different frameworks and benefit from the frameworks’ additional capabilities like attribute, property, and event bindings.

For now, we added the Web Components In Angular sample that demonstrates how to use Wijmo web components in an Angular application. Samples for other popular frameworks like React, Vue, Polymer, and others are on the way.

Please send us feedback while our WebComponent interop is in beta: Web Components Intro sample | Web Components In Angular sample

ECMAScript 6

We have also added ES6 versions of Wijmo modules (Beta version), which you can find in the NpmImages folder of Wijmo download zip:

  • wijmo-es2015-esm-min – in ESM module format (ES6 import/export statements)
  • wijmo-es2015-commonjs-min – in CommonJS module format

We will be continuing to research and develop our ES6 support this year. Feedback here is also welcome.

Change Log

  • [Web Components] Added Beta version of the web components interop (wijmo.webcomponents.xxx.js modules). The Samples\TS\WebComponents\WebComponentsIntro sample explains the status and usage of the interop. Web Components Intro sample
  • [Web Components] Added a sample that demonstrates how to use Wijmo web components in an Angular application. Web Components In Angular sample
  • [licensing] Added a wijmo.setLicenseKey method that enables single-build deployment, including npm. If the licenseKey is not set, Wijmo runs in evaluation mode (with a watermark). Setting the licenseKey (keys are provided to customers on our site) causes Wijmo to run in production mode (no watermark). Read more about Wijmo licensing | How to deploy a Wijmo app with distribution licensing blog
  • [licensing] Fixed issue of license validation in older versions of Chrome.
  • [npm] Wijmo is published to the global npm registry as the 'wijmo' package. Read the blog on Wijmo and NPM
  • [Angular] Disabled state of Wijmo components inside Angular forms now changes on the Angular AbstractControl.disable()/enable() method calls.
  • Added Beta version of Wijmo npm image with ES2015 (ES6) code in CommonJS module format, in the NpmImages/wijmo-es2015-commonjs-min folder.
  • Added Beta version of Wijmo npm image with ES2015 (ES6) code, in the NpmImages/wijmo-es2015-esm-min folder.
  • [wijmo.pdf] Moved to PDFKit 0.8.3.
  • [wijmo.pdf] PdfPageArea.openImage() method added.
  • The PdfExport samples have been updated to use openImage() method to get the actual image sizes when drawing cells manually.
  • [ReportViewer] Added support for new properties of string parameters, maxLength and allowBlank.
  • PivotGrid now honors the allowDragging property and allows users to reorder the row fields by dragging their column headers.
  • Optimized the FlexGrid.autoSizeRows method.

New Samples

Breaking Changes

  • [NpmImages] Npm image with modules in System format is abolished. This module format makes sense only in conjunction with the SystemJS run-time loader, but the latter is capable to load modules in CommonJS format, so there is no need to ship a separate System npm image.

Get Build 5.20181.462 now


Wijmo 2018 v1

 

New Licensing Mechanism

We've implemented a new licensing mechanism in Wijmo when you deploy to a server. You'll now need to create a distribution key for applications that use Wijmo. A distribution key authorizes your application to use Wijmo.

You can generate a distribution key using your account on our website. To make a distribution key, add the domains that need to be authorized, generate the key, and apply the key to your application.

Wijmo licensing will not need a distribution key when on localhost, so your development process will go uninterrupted. You only need to generate and apply a distribution distribution key when you're deploying your application to a server.

If you deploy a Wijmo application without a distribution key, you'll see this popup:

Licensing popup

To use Wijmo in production, follow these simple steps:

Note: We used to releae two editions of Wijmo, one for evaluation and one for production. We now have a single edition that runs in two modes (eval or production), so you no longer have to replace Wijmo files when going to production.

Watch the video:

Wijmo Licensing Info | Deploying a Wijmo Application blog

Published to NPM

The biggest benefit from adding our new licensing mechanism is that we now have a single distribution and can publish it to NPM! We've all waited a long time for this, and we're happy to finally publish Wijmo on NPM.

NPM logo

We've published NpmImages ourselves for years. All our Angular v5 samples used these to install Wijmo as modules from our own server, and we also had documentation that instructed you to install Wijmo from the local file system. The great news is that if you copied either pattern, you can easily move to NPM.

The only thing that needs to change is to remove the custom URL in the package.json that points to our server, and add the specific version of Wijmo that you want to use:

Old (hosted):

  "dependencies": {
    "@angular/common": "^5.0.0",
    ...
    "wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.409.tgz",
    "zone.js": "^0.8.18"
  },

Old (local):

  "dependencies": {
    "@angular/common": "^5.0.0",
    ...
    "wijmo": " ../wijmo_download/NpmImages/wijmo-commonjs-min",
    "zone.js": "^0.8.18"
  },

New:

  "dependencies": {
    "@angular/common": "^5.0.0",
    ...
    "wijmo": "5.20181.450",
    "zone.js": "^0.8.18"
  }, 

The NPM install command is the same:

npm install Wijmo 

The @import statements are also the same:

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

That’s all there is to it! We hope you enjoy how much more accessible Wijmo will be for modern web development. We are happy to be published to NPM!

New TabPanel Control

Another big request has been to add a tab control. As usual, when we hear common requests, we add them to our roadmap, and we now have a no-frills TabPanel control:

New TabPanel Control

One nice benefit of our TabPanel is that it's smart: it refreshes Wijmo controls when the tabs become visible. Because controls need to be visible on the screen when they're rendered (for calculating dimensions), other tab controls force you to refresh our controls manually. So this is a nice feature for customers using our TabPanel with embedded Wijmo controls (like FlexGrid).

Another nice benefit of having our own tab control is that we removed Bootstrap tabs from all our samples, and thus completely removed jQuery from all samples.

TabPanel Intro sample | TabPanel Blog | TabPanel documentation

Microsoft SSAS Cube Support in OLAP

Wijmo OLAP is even more powerful now that it can connect directly to Microsoft SSAS Cubes. Previously, Wijmo OLAP could handle client-side aggregation so that it didn’t require a server. We also had an option for server-side aggregation, but it required installing a custom DataEngine.

Wijmo OLAP connections

Now, Wijmo OLAP can talk directly to SSAS Cubes. This is great for those of you who have existing SSAS cubes and want to create a PivotGrid (and PivotChart) bound directly to the cube.

This feature requires that you configure a few things in your SSAS Cube to make sure it's accessible via AJAX requests. Read our blog on how to setup Wijmo OLAP and SSAS cubes.

OLAP Server sample | OLAP and SSAS Cube Blog | OLAP PivotEngine documentation

ActiveReports Support in ReportViewer

Wijmo has a modern client-side ReportViewer control that now supports ActiveReports. The Wijmo ReportViewer is written as a control in TypeScript and comes with built-in support for Angular, React, Vue and more. It's also provided in multiple module formats for use with module loaders. This cutting-edge ReportViewer complements a cutting-edge report engine.

ActiveReports support in ReportViewer

ReportViewer sample | About ActiveReports

FlexSheet Tables

We worked closely with one of our customers to add Table support to FlexSheet. Tables in FlexSheet act similarly to Excel; you can select a range of cells in a sheet and convert them to a formatted table:

FlexSheet tables

FlexSheet Intro sample

React Child Component Support

We've added child component support for controls with complex properties: for example, FlexGridColumn for FlexGrid Column objects and FlexChartSeries for Chart Series objects. This makes declaring controls and bindings in markup even more powerful.

Here's an example of a FlexGrid with columns declared in markup:

<Wj.FlexGrid itemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>

React FlexGrid Intro sample | React documentation

HTTPS CDN

Moving forward, all new versions of Wijmo will be published to a new CDN that supports HTTPS. HTTPS is becoming the standard for hosting almost all web content, so we wanted to make sure you can host your applications on HTTPS and still use Wijmo. It also makes Wijmo easier to use on sites like jsfiddle, codepen, jsbin, etc.

The new URLs for the Wijmo CDN are as follows:

<!-- Wijmo references (required) -->
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/wijmo/5.20181.450/styles/wijmo.min.css" rel="stylesheet"/>

<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.gauge.min.js"></script>

We also host a latest version, updated with each official release:

<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>

<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>

Read more about how to reference Wijmo in our documentation.

Accessibility Enhancements

We're committed to accessibility and added more enhancements in this release. We've improved accessibility for:

  • Hierarchical FlexGrid (with ARIA treegrid attributes)
  • AutoComplete & ComboBox
  • FlexGridFilter Dialog

Our next focus is on FlexChart accessibility.

New Samples

Change Log

  • [licensing] Added a wijmo.setdistribution key method that enables single-build deployment, including npm. If the distribution key is not set, Wijmo runs in evaluation mode (with a watermark). Setting the distribution key (keys are provided to customers on our site) causes Wijmo to run in production mode (no watermark).
  • [npm] Wijmo is published to the global npm registry as the 'wijmo' package.

  • To install the release builds

> npm install Wijmo             // latest
> npm install wijmo@5.20173.431 // specific version
  • To install RC builds
> npm install wijmo@rc              // latest
> npm install wijmo@5.20181.432-rc  // specific version

To install nightly builds

> npm install wijmo@nightly                             // latest
> npm install wijmo@5.20173.431-nightly.d20180312.t0720 // specific version (suffix denotes build date/time)
  • The on-line npm packages offer Wijmo modules in the CommonJS format. Alternative module formats are available in the NpmImages folder of Wijmo download zip as before.
  • [npm] Wijmo npm images now include css styles and culture files:

  • wijmo.css in the 'styles' subfolder. Usage example: import 'wijmo/style/wijmo.css';

  • themes css in the 'themes' subfolder. Usage example: import 'wijmo/themes/wijmo.theme.dark.css';
  • culture js files in the 'cultures' subfolder. Usage example: import 'wijmo/cultures/wijmo.culture.ja';

  • [accessibility] Improved ARIA support on FlexGrid, FlexGridFilter, and ComboBox components.

  • [Olap] Added support for binding PivotEngine components directly to SSAS cubes. Previously, binding to SSAS cubes required setting a server and with ComponentOne data engine services which exposed the cubes. Now, you can bind the PivotEngine directly to the SSAS cubes. OLAP SSAS Cube sample | OLAP and SSAS Cube Blog

    For example:

var ng = new wijmo.olap.PivotEngine({
    itemsSource: {
        url: 'http://ssrs.componentone.com/OLAP/msmdpump.dll',
        cube: 'Adventure Works'
    }
  • [ReportViewer] Added support for the GrapeCity ActiveReports report generator. The PureJS ReportViewer sample has been updated to demonstrate the new feature. ActiveReport ReportViewer sample
  • Added a wijmo.nav.TabPanel control that provides tab navigation. This new control can be used to replace bootstrap tabs, which require bootstrap.js and jQuery. TabPanelIntro sample | TabPanel blog
  • [React] Added child components support.
  • [React] Added support for child components representing complex objects for some control properties, for example FlexGridColumn for FlexGrid Column objects and FlexChartSeries for Chart Series objects.

  • So from now, on in addition, to the static columns definition like this:

<Wj.FlexGrid autoGenerateColumns={ false }
    columns={[
        { header 'Country' , binding 'country' , width '*' },
        { header 'Date' , binding 'date' },
        { header 'Revenue' , binding 'amount' , format 'n0' },
        { header 'Active' , binding 'active' }
    ]}
    itemsSource={ this.state.data } />

... you can use the following dynamic definition:

<Wj.FlexGrid itemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>
  • This improvement makes it possible to dynamically update array property items, for example a set of grid columns, with the 'render' code like this:
<Wj.FlexGrid itemsSource={this.state.data}>
    {this.state.columnsDefinitions.map((colDef) => {
        return <Wj.FlexGridColumn key={colDef.binding} binding={colDef.binding} />
    }
    )}
</Wj.FlexGrid>
  • [olap.PivotPanel] Added support for hierarchical field structures in non-cube data sources.
  • [Excel] Added support for tables in the FlexSheet control and wijmo.xlsx module. The ExcelBook/FlexSheetIntro/FlexSheetExplorer samples have been updated to demonstrate the new feature.
  • [FlexSheet] Expose _filter as public property instead of private.
  • [FlexGrid] Added a Column.multiLine (and Row.multiLine) feature that supports multi-line text in cells. Setting multiLine to true causes the cell to honor embedded line-break characters (\n) when rendering the cell content. Users may enter line breaks by pressing alt+Enter, as in Excel.
  • [FlexGrid] Added support for Column.textAlign = 'justify-all'. This new setting explicitly sets CSS properties textAlignLas and textJustify, which is important for ideograph-based languages such as Chinese and Japanese.
  • [Globalize] Added support for escaped characters in date formats, e.g. wijmo.Globalize.format(date, '\\h h \\m m'); // h 3 m 55
  • Configs of all Angular and React npm module based samples are updated to support symlinked modules installation.
  • Added a FlexGrid.autoScroll property that determines whether the grid should automatically scroll its contents when the user drags rows or columns near the edges of the control.

Wijmo 2018 v1

New Samples

Change Log

  • [licensing] Added a wijmo.setdistribution key method that enables single-build deployment, including npm. If the distribution key is not set, Wijmo runs in evaluation mode (with a watermark). Setting the distribution key (keys are provided to customers on our site) causes Wijmo to run in production mode (no watermark).
  • [npm] Wijmo is published to the global npm registry as the 'wijmo' package.

  • To install the release builds

> npm install Wijmo             // latest
> npm install wijmo@5.20173.431 // specific version
  • To install RC builds
> npm install wijmo@rc              // latest
> npm install wijmo@5.20181.432-rc  // specific version

To install nightly builds

> npm install wijmo@nightly                             // latest
> npm install wijmo@5.20173.431-nightly.d20180312.t0720 // specific version (suffix denotes build date/time)
  • The on-line npm packages offer Wijmo modules in the CommonJS format. Alternative module formats are available in the NpmImages folder of Wijmo download zip as before.
  • [npm] Wijmo npm images now include css styles and culture files:

  • wijmo.css in the 'styles' subfolder. Usage example: import 'wijmo/style/wijmo.css';

  • themes css in the 'themes' subfolder. Usage example: import 'wijmo/themes/wijmo.theme.dark.css';
  • culture js files in the 'cultures' subfolder. Usage example: import 'wijmo/cultures/wijmo.culture.ja';

  • [accessibility] Improved ARIA support on FlexGrid, FlexGridFilter, and ComboBox components.

  • [Olap] Added support for binding PivotEngine components directly to SSAS cubes. Previously, binding to SSAS cubes required setting a server and with ComponentOne data engine services which exposed the cubes. Now, you can bind the PivotEngine directly to the SSAS cubes. OLAP SSAS Cube sample | OLAP and SSAS Cube Blog

    For example:

var ng = new wijmo.olap.PivotEngine({
    itemsSource: {
        url: 'http://ssrs.componentone.com/OLAP/msmdpump.dll',
        cube: 'Adventure Works'
    }
  • [ReportViewer] Added support for the GrapeCity ActiveReports report generator. The PureJS ReportViewer sample has been updated to demonstrate the new feature. ActiveReport ReportViewer sample
  • Added a wijmo.nav.TabPanel control that provides tab navigation. This new control can be used to replace bootstrap tabs, which require bootstrap.js and jQuery. TabPanelIntro sample | TabPanel blog
  • [React] Added child components support.
  • [React] Added support for child components representing complex objects for some control properties, for example FlexGridColumn for FlexGrid Column objects and FlexChartSeries for Chart Series objects.

  • So from now, on in addition, to the static columns definition like this:

<Wj.FlexGrid autoGenerateColumns={ false }
    columns={[
        { header 'Country' , binding 'country' , width '*' },
        { header 'Date' , binding 'date' },
        { header 'Revenue' , binding 'amount' , format 'n0' },
        { header 'Active' , binding 'active' }
    ]}
    itemsSource={ this.state.data } />

... you can use the following dynamic definition:

<Wj.FlexGrid itemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>
  • This improvement makes it possible to dynamically update array property items, for example a set of grid columns, with the 'render' code like this:
<Wj.FlexGrid itemsSource={this.state.data}>
    {this.state.columnsDefinitions.map((colDef) => {
        return <Wj.FlexGridColumn key={colDef.binding} binding={colDef.binding} />
    }
    )}
</Wj.FlexGrid>
  • [olap.PivotPanel] Added support for hierarchical field structures in non-cube data sources.
  • [Excel] Added support for tables in the FlexSheet control and wijmo.xlsx module. The ExcelBook/FlexSheetIntro/FlexSheetExplorer samples have been updated to demonstrate the new feature.
  • [FlexSheet] Expose _filter as public property instead of private.
  • [FlexGrid] Added a Column.multiLine (and Row.multiLine) feature that supports multi-line text in cells. Setting multiLine to true causes the cell to honor embedded line-break characters (\n) when rendering the cell content. Users may enter line breaks by pressing alt+Enter, as in Excel.
  • [FlexGrid] Added support for Column.textAlign = 'justify-all'. This new setting explicitly sets CSS properties textAlignLas and textJustify, which is important for ideograph-based languages such as Chinese and Japanese.
  • [Globalize] Added support for escaped characters in date formats, e.g. wijmo.Globalize.format(date, '\\h h \\m m'); // h 3 m 55
  • Configs of all Angular and React npm module based samples are updated to support symlinked modules installation.
  • Added a FlexGrid.autoScroll property that determines whether the grid should automatically scroll its contents when the user drags rows or columns near the edges of the control.

Wijmo build 5.20173.409 Available

Build 409 has released. It includes a rolled-back fix for input buttons that resulted in making the input controls slightly oversized. It also includes a new, better fix for input buttons. We apologize for any inconvenience this introduced. We also included an enhancement to smooth scrolling on MacOS.

Notice: Wijmo 3 is now a Separate Download

As of build 409, we have removed Wijmo 3 from our Wijmo Enterprise download. The vast majority of our customers are using only Wijmo Core. So in order to make the Wijmo Enterprise download smaller, we removed Wijmo 3. To our loyal Wijmo 3 customers: not to worry, Wijmo 3 is still available to download separately! And Wijmo Enterprise still includes a license granting you the right to use Wijmo 3. Download Wijmo 3

Wijmo build 5.20173.403 Available

Build 5.20173.403 has released. It includes a huge list of bug fixes, nice new OLAP features, FlexGrid performance improvements, and some very cool samples.

New Samples

  • JavaScript GanttChart Sample | Create Gantt Charts using FlexChart blog
  • JavaScript Calendar Sample

    Change Log

  • Added new JavaScript Gantt Chart sample that extends FlexChart. JavaScript GanttChart Sample | Create JavaScript Gantt Charts using FlexChart blog

  • Added Calendar sample inspired by the Slack status page. JavaScript Calendar Sample
  • [nodejs] Made some changes in wijmo.pdf code that make it possible to use Wijmo PdfDocument in NodeJS (with a specific Domino based setup). The public API adds the PdfDocumentEndedEventArgs.chunks property, which returns an array of Uint8Array objects that can be saved to a file or a stream using NodeJS file API.
  • [VSCode] Added IntelliSense support for Wijmo Angular components in VSCode HTML editor. IntelliSense in VSCode blog
  • Improved FlexGrid layout performance.
  • Improved export to xlsx performance for FlexGrid containing Angular cell templates.
  • [FlexGrid] Added a 'refresh' parameter to the CellEditEnding event parameters. This allows event handlers to suppress the full refresh that happens by default when cell editing ends.
  • [OLAP] Allow generating views with value fields only (grand totals) or row/column fields only (unique values).
  • [OLAP] Improved PivotEngine sorting of value fields (measures) to sort groups by aggregate. (this can be disabled by setting the new PivotEngine.sortableGroups property to false).
  • [OLAP] Improved PivotGrid collapse/expand to keep the original state of child nodes.
  • [OLAP] PivotGrid now honors the preserveOutlineState property (inherited from FlexGrid).
  • [Angular/AngularJS] textarea elements used as cell editors now correctly consume characters that were typed by a user to initiate cell editing.
  • [AngularJS] For FlexGrid with ime-enabled="true" and a cell editor represented by a cell edit template, cell editing can now be correctly initiated by IME input.
  • Added an InputNumber repeatButtons property that determines whether the control's spinner buttons should act as repeat buttons (fire continuously while pressed).
  • Added several new members to the TreeView and TreeNode classes:
    • TreeNode.addChildNode(index, dataItem) adds a child node to a TreeNode
    • TreeView.addChildNode(index, dataItem) adds a child node to a TreeView
    • TreeNode.remove() removes a node from the TreeView
    • TreeNode.refresh() refreshes a node with updated data content
    • TreeNode.itemsSource gets a reference to the array that contains the node data

Update 1/19/2018: We introduced a minor glyph bug in build 403. In Chrome for macOS, 4 of the wijmo glyphs do not render correctly. The broken glyphs are calendar, clock, minus, and plus. Here's the fix. The bug is fixed in build 405.


Wijmo build 5.20173.380 Available

Change Log

  • [FlexGrid] Major performance enhancement: Added a quickAutoSize property to the wijmo.grid.FlexGrid and wijmo.grid.Column classes. This new property can improve auto-sizing performance by a factor of 10 to 100, depending on the scenario/browser.
  • [FlexGrid] Added support for row/column resizing on touch devices.
  • [Accessibility] Added new AccessilityExtender for FlexGrid sample. It implements a class that provides additional accessibility support to FlexGrid controls. You can use it or modify it to fit your accessibility needs. Accessibility Extender Sample | Accessibility Blog
  • [Accessibility] Improved (ARIA attributes and keyboard support) for the ListBox, ComboBox, Menu, InputNumber, Gauge, and Calendar controls.
  • [VSCode] Added IntelliSense support for Wijmo Angular components in VSCode HTML editor.
  • [Angular] Angular version 5.0.0 is officially supported by wijmo. Earlier Angular versions are still supported as well. Wijmo Supports Angular version 5 blog
  • [Angular] Added 27 new Angular samples (ported from AngularJS). Angular Support
  • [React] Added components for all Wijmo controls. React All Components Sample
  • Made some improvements in InputNumber's editing experience.
  • Improved popup positioning on mobile devices with pinch-zooming (including Android and IOS).
  • [wijmo.grid.pdf] Added support of cell text wrapping in FlexGrid.
  • Added search capability to LearnWijmo along with many more lessons. Learn Wijmo
  • Added UndoStack sample that demonstrates how to create a class that provides form-level undo/redo services. Undo Redo Stack Sample | Easy Undo/Redo for HTML Forms Blog
  • [FinancialChart] Added new financial chart type 'PointAndFigure'. The demo page included in Angular2 FinancialChartExplorer sample. Point and Figure FinancialChart Sample

Read more about the Build 380 Release

Download Wijmo build 5.20173.380

New Samples

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


Wijmo build 5.20172.359 Available

Change Log

  • Improved accessibility by adding ARIA 1.1 built-in support Accessibility Sample | Accessibility Blog
  • Added search capability to LearnWijmo along with many more lessons. Learn Wijmo
  • Added UndoStack sample that demonstrates how to create a class that provides form-level undo/redo services. Undo Redo Stack Sample | Easy Undo/Redo for HTML Forms Blog
  • [FinancialChart] Added new financial chart type 'PointAndFigure'. The demo page included in Angular2 FinancialChartExplorer sample. Point and Figure FinancialChart Sample
  • [Interop] Reduced code size of the Angular, React and Vue2 interops.
  • [React] Added Simple Reports in React sample React Simple Reports Sample | Creating Simple Reports with React and Wijmo Blog
  • [React] Added components for all Wijmo controls. Added AllComponents sample that demonstrates all available components.
  • [React] Wijmo for React interop can be used now in a project that contains React declaration files (.d.ts). This may be a compatibility breaking change for your React projects that use Wijmo, see the "Breaking Changes" section for details.
  • [Angular] New Angular samples were added (ported from AngularJS and PureJS). Material Design Lite Sample | InputLabels Sample | MultiColumnDropDowns Sample
  • [Angular] [VSCode] Added Intellisense support for Wijmo Angular components for VSCode HTML editor. It's implemented in the wijmo5-ng2-1.0.0.vsix file located in the Intellisense folder of Wijmo download zip, which should be installed as VSCode extension. For more details about installing the file refer to the accompanying readme.txt file located in the same folder.
  • [Angular] Wijmo components don't cause change detection anymore for frequently triggered events like mousemove, to which components are subscribed internally.
  • [Angular] Sometimes Wijmo components' normal functionality could lead to the ExpressionChangedAfterItHasBeenCheckedError exception when Angular runs in development mode. Now all two-way bindings to Wijmo properties are updated asynchronously in the target-to-source direction, which prevents from triggering this exception. This behavior change could potentially break some parts of your applications, so it can be changed to synchronous binding updates, globally or for a specific component. See the "Breaking Changes" section for details.
  • [Angular] Before now, the e.cancel property of the FlexGrid.cellEditEnding event was always set to true if a cell editor is implemented as a CellEdit template. From now on, this property has a consistent value that reflects actual user's action.
  • [Angular/AngularJS/Knockout] Improved FlexGrid with cell templates performance for operations like column resizing, row addition, cell editing ending, and many more.
  • Added new culture files: wijmo.culture.es-MX.js (Spanish/Mexico) and wijmo.culture.es-419.js (Spanish/Latin America).
  • Made FlexGrid.virtualizationThreshold property public, deprecated old internal '_virtualizationThreshold' version.
  • [PdfExport sample] Added new sample, "Highlight invalid cells" (Angular 1/2).
  • Added a FlexGrid.toggleDropDownList method to show the list of options when editing cells with data maps.
  • [FlexGridPdfConverter] Added a IFlexGridStyle.errorCellStyle property.
  • [FlexGridPdfConverter] Improved handling of boolean columns in customCellContent mode.
  • Added a KeyAction.CycleOut setting to support tabbing through cells and then on to the next control on the form (see FlexGrid.keyAction property).
  • [FlexSheet][Enhancement] Request to support undo and redo for filtering action. (TFS 278949)
  • Made Popup ignore Escape key while IME mode is active.
  • Added a Popup.removeOnHide property to control whether the Popup should be removed from the DOM or just hidden when the popup closes.
  • [ReportViewer] Hide the Parameters tab if all parameters are hidden.
  • Added a MultiSelect.showSelectAllCheckbox property to display a "Select All" checkbox above the items, so users can select/de-select all items with a single click (in addition to the ctrl+A keyboard shortcut that performs the same function).
  • Added a MultiSelect.selectAllLabel property to customize the label shown next to the "Select All" checkbox displayed when the showSelectAllCheckbox property is set to true.
  • Made OData value filter smarter. Now it serializes the lesser of items checked or unchecked, which results in shorter URLs and prevents request errors in some common scenarios (like unchecking one or two items out of a huge number).
  • Added some configuration properties to the wijmo.olap.PivotEngine class: serverTimeOut: the timeout value for retrieving results from the server, serverPollInterval: the poll interval for getting progress reports from the server, serverMaxDetail: the maximum number of detail records to retrieve from the server.

Read more about the Build 359 Release

Download Wijmo build 5.20172.359

New Samples

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

Breaking Changes

  • [Angular] Before now two-way bound Wijmo properties updated their binding source properties synchronously. From now on, such updates will happen asynchronously, which saves your applications from the ExpressionChangedAfterItHasBeenCheckedError exception that may be caused by Wijmo components under some specific conditions when Angular runs in development mode. This behavior can be changed back to synchronous updates:
    • Globally for all Wijmo components, by setting the static WjOptions.asyncBindings property to false.
    • For a specific component, by assigning component's asyncBindings property. See the WjOptions.asyncBindings property description for details. The WjOptions class is contained in the wijmo.angular2.directiveBase module.
  • In previous versions of the FlexGrid, users could click the top-left header cell to select the whole grid content. In new versions, clicking any cell in the top-left panel selects the whole grid content.
  • [React] Wijmo for React interop now depends on React declaration files (.d.ts), which should be installed in a project that uses Wijmo for React interop. The declaration files can be installed using the following npm command: > npm install @types/react @types/react-dom More details can be found here: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Wijmo build 5.20172.328 Available

Change Log

  • Improved accessibility by adding ARIA 1.1 built-in support to the following controls:
  • Added two new properties to improve FlexGrid keyboard accessibility: keyActionTab and keyActionEnter. These properties allow you to customize the behavior of special keys so the grid becomes more accessible or more compatible with Excel.
  • Added a new property to improve FlexGrid screen-reader accessibility: rowHeaderPath. If provided, this property specifies the name of a binding to use as a provider of 'row header' accessibility values. If not provided, most readers will use the content of the first visible column as the row header.
  • Reduced code size of the Angular, React and Vue2 interops.
  • The AngularJS Benchmark sample has been updated to the latest versions of vendor libraries.
  • Added a TreeView.loadTree method to rebuild the tree after making changes to the itemsSource array.
  • Added a new PivotField.sortComparer property to allow customization of the sort order in dimension fields. This is similar to the CollectionView's sortComparer property, except it applies to pivot dimensions (grid headers) as opposed to measures (summary data).
  • [FlexGridPdfConverter] added support for PivotGrid.
  • Added several new properties to make the Calendar control more customizable: formatYearMonth, formatDayHeaders, formatDays, formatYear, and formatMonths. All these properties represent format strings used to format different parts of the Calendar in month and year view.
  • Added time zone offset date format parts ('z', 'zz', 'zzz') to Globalize.formatDate.
  • Added a new FlexGrid.itemValidator property to improve validation support, especially for unbound grids (bound grids can be validated using the CollectionView.getError property which provides the same functionality).
  • [Wijmo5 Mvc][FlexViewer]Internet error displays after running different report quickly in "FlexViewerExplorer" sample. (TFS 257523)
  • FlexGrid exports the default border and style of merged cell to xlsx incorrectly.
  • [ReportViewer][PdfViewer] ReportViewer and PdfViewer are partially localized when setting Cultures. (TFS 258374)

Read more about the Build 328 Release

Download Wijmo build 5.20172.328

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

Breaking Changes

  • [React] itemsSource property of Wijmo components is updated now each time when React updates component bindings. Because of this, if binding expression returns a new array or CollectionView each time it's called, even if it contains the same data (e.g. function getData { return [1, 2, 3]; }), you may get weird effects in some controls, and even get a "Stack overflow" exception, because controls detects a different data source by comparing references to the current and the new data source instances, and refreshes control if references are different. You should make sure that binding expression returns the same instance of an array or a CollectionView, until a new instance is really required by the application logic.
  • In previous versions of the FlexGrid, users had to click the first cell in the top-left panel to select the whole grid. In new versions, clicking any cell in the top-left panel will select the whole grid.
  • The default behavior of the Tab key when the FlexGrid has the focus has changed. By default, the Tab key cycled through the grid cells (Excel style). The new default behavior is to let the browser cycle through the elements on the page (to improve accessibility). You can revert to the old behavior by setting the new keyActionTab property to wijmo.grid.KeyAction.Cycle.

What's New in Build 293

New Samples

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

Breaking Changes

  • Changed default style for FlexChart's minor grid line from dashed to solid. The new default looks better in most applications; if anyone prefers the old style, it can be restored with this CSS rule:

    /* old-style minor grid line */
    .wj-flexchart .wj-axis-x .wj-gridline-minor {
        stroke: black;
        stroke-dasharray: 6;
        stroke-width: 0.25px;
    }
    

Change Log

  • [Documentation] New Learn Wijmo app with over 300 lessons including fiddles that introduce the main features in all Wijmo modules. Learn Wijmo Blog | Learn Wijmo
  • [TypeScript] Library has been adapted to TypeScript 2.2.
  • [Angular] Angular samples' package.json have been upgraded to Angular 4. Angular resources
  • [React] External modules for the React interop are included in Wijmo NpmImages (module names begin with "wijmo.react"). Added the ReactExternalModules sample demonstrating how to use them with WebPack 2 and SystemJS. React External Modules Sample
  • [Vue2] External modules for the Vue2 interop are included in Wijmo NpmImages (module names begin with "wijmo.vue2"). Added the Vue2ExternalModules sample demonstrating how to use them with WebPack 2 and SystemJS.
  • [PdfExport sample] Added new samples: "Custom cell content", "Customize cell rendering" and "Drawing cells manually". PDF Export Sample
  • [wijmo.grid.xlsx] Added a possibility to perform custom cell content export (via IFlexGridXlsxOptions.formatItem callback). The Angular 2 ExcelImportExport sample, "FlexGrid Import Export (JSZip3)" page is updated to demonstrate the feature (check on the "Custom cell content" checkbox).
  • [wijmo.grid.pdf] Added customCellContent and formatItem properties to the IFlexGridDrawSettings interface.
  • Improved keyboard handling/accessibility in MultiSelect control.
  • Added support for CTRL+A key to check/uncheck all items in MultiSelect and ListBox controls.
  • Added border support for xlsx importing. (TFS 238473)
  • Disable (rather than hide) ComboBox drop-down button when list is empty. This reduces flicker in some scenarios, especially in AutoComplete.
  • Added sumProduct formula in FlexSheet inbuilt formula. (TFS 237586)
  • Optimized wijmo.grid.DataMap.getDisplayValue(key) performance.
  • Optimized grid touch operations when used with DragDropTouch polyfill.

What's New in 2017 v1

New Samples

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

Breaking Changes

  • [Angular1/Angular2] An ngModel directive specified on a WjMultiSelect directive/component is now mapped to the 'checkedItems' property, instead of the 'selectedValue' property. The previously used mapping to the 'selectedValue' property didn't have any practical sense, so this change should not hurt your code.
  • Angular 2 WjFlexGrid component - added the following constructor parameter: @Inject(ChangeDetectorRef) cdRef: ChangeDetectorRef This change may affect your code in case if you use custom components derived from WjFlexGrid. You need to add this last constructor parameter to these components if this is the case.

Change Log

  • Added wijmo.nav module with the TreeView control. (See TreeViewIntro sample for details). TreeView Intro
  • Added new MultiAutoComplete control to wijmo.input module. MultiAutoComplete Sample
  • Added gradient color support in chart controls. (See FlexChartIntro sample for details). FlexChart Intro
  • Added server-side support for wijmo.olap. To use server-side data providers, set the itemsSource property to a URL string pointing to a WebAPI service.
  • Add mobile support to reportviewer control. Added a thresholdWidth property to switch mobile or PC UI template. If width of control is smaller than thresholdWidth, mobile UI will be applied. If width of control is equal or greater than thresholdWidth, PC template will be applied. If thresholdWidth is set to 0, then only PC template is applied and if it's set to a large number e.g. 9999, then only mobile template is applied.
  • [Angular2] Improved Wijmo components inheritance experience. Every Wijmo component/directive now have a corresponding variable exported from the component's module that represents its @Component/@Directive decorator properties.
  • [Angular2] Restored CustomizedComponents sample.
  • [Angular2] Component metadata variables made typed using the IWjComponentMeta and IWjDirectiveMeta interfaces (for components and directives respectively).
  • [Angular 2] Every Wijmo component constructor now calls the special 'created' method. If you create a custom component inherited from a Wijmo component, and need to perform some initializations in its constructor then instead of declaring a constructor you can just override the 'created' method and perform initializations in it. This will prevent you from the necessity to maintain constructor parameters and keep them in synch with parameters of the base Wijmo component. The details of how Angular processes components inheritance can be found here: https://github.com/angular/angular/commit/f5c8e09
  • [Angular 2] Samples moved to Angular 2.4.
  • Added pluralization feature to the wijmo.format method. see https://wijmo.com/5/docs/topic/wijmo.Module.html#format for details and an example.
  • Added FlexGrid draggingColumnOver and draggingRowOver events to provide control over drop targets (e.g. prevent users from moving certain columns to certain positions).
  • Improved FlexGridFilter performance when displaying long value lists.
  • Removed deprecated properties 'disabled' and 'required'. These were replaced in build 5.20162.192 with 'isDisabled' and 'isRequired', in order to avoid conflicts with standard HTML attributes in the markup.

What's New in Build 259

  • Angular 2: Added support for Angular 2.4.1 Angular 2 Info
  • ReactJS: Added support for ReactJS ReactJS Info
  • VueJS: Added support for Vue 2 VueJS 2 Interop sample | How to Create Great VueJS applications Using Wijmo Controls blog
  • ReportViewer and PdfViewer updated to support new FlexReport server.
  • Added ServerCollectionView sample to demonstrate using remote datasources with FlexGrid. ServerCollectionView sample
  • Added FilterPanel sample that shows currently active filters and allows users to remove filters by clicking. FilterPanel sample
  • Added Angular 1/2 PdfViewerIntro samples.PdfViewerIntro sample
  • Added Angular 2 version of the HeaderFilters sample. HeaderFilters sample
  • The following modules can now work with JSZip 3: wijmo.xlsx, wijmo.grid.xlsx and wijmo.grid.sheet. In addition to existing sybchrinous load/save methods that work only with JSZip 2, the asynchronous loadAsync/saveAsync methods were added, which require JSZip 3. The ExcelImportExport sample is updated to demonstrate the feature.

New Samples

Breaking Changes


What's New in Build 254

New Samples

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

Change Log

  • Angular 2: Added support for Angular 2.4.1 Angular 2 Info
  • ReactJS: Added support for ReactJS ReactJS Info
  • VueJS: Added support for Vue 2 VueJS 2 Interop sample | How to Create Great VueJS applications Using Wijmo Controls blog
  • Added PeriodicSunburst sample. PeriodicSunburst sample | Rethinking the Periodic Table with Wijmo's Sunburst blog
  • Improved FlexGrid performance when binding to large collections and not limiting grid height (automatically sized grids). This used to cause poor performance since the grid only took its host element into account when virtualizing cells; now it also takes into account the browser window.
  • Improved FlexGrid clipboard support to handle cells with line breaks.
  • Added a FlexGridDetailProvider.isAnimated property to enable animated transitions when showing row details.
  • Improved FlexSheet support to copy/paste the content of the HeaderRow in the bound sheet.
  • Added a Control.rightToLeft property that determines whether the control is hosted in an element with right-to-left layout.
  • Improved showPopup method to handle screen boundaries when reference is a point.
  • Added RTL support to LinearGauge and BulletGraph controls. The gauges now take RTL into account when rendering and handling the keyboard. The new behavior is compatible with the input element's when type="range".
  • Wijmo *culture.js files can be loaded before wijmo.js now.
  • Added support for Angular 2 Ahead-of-Time compiler. .metadata.json files for Wijmo Angular 2 components are added to NpmImages' subfolders. Check also Breaking Changes section.
  • Angular 2 specific properties (like isInitialized) and events (like 'initialized'/valueChangedNg/etc) of Wijmo components are now exposed in class declarations in .d.ts and hence available for Intellisense.
  • Added a getCellElement method to the wijmo.grid.GridPanel class to retrieve the HTMLElement that represents a given cell in the panel.
  • Added Menu.show method to display the menu at arbitrary positions on the screen (context-menu style).
  • Added a twoDigitYearMax property to the culture calendar so users can control the threshold used for converting two-digit year strings into full years.
  • Added support for showing group and column headers in the MultiRow control. This is done by setting the collapsedHeaders property to null (rather than true or false).
  • FlexGridPdfConverter added support for FlexSheet.
  • Added support for dataMaps on Boolean FlexGrid columns.
  • Added a dataMap property to the wijmo.grid.filter.ColumnFilter class. This dataMap takes precedence over the owner column's DataMap and is used to provide the strings displayed by the filter editors. For example, it can be used to change the strings displayed for Boolean column filters from 'true/false' to 'yes/no'.

Breaking Changes

  • @WjComonent decorator is removed from the library, because AoT compiler doesn't support custom decorators.
  • A suffix in implementation names of Angular incarnations of Wijmo events has been changed from 'Wj' to 'Ng' (e.g. valueChangedWj became valueChangedNg). Note that these events was not officially documented and their direct usage was not presumed.
  • A suffix in implementation names of Angular property change events (intended to implement two-way binding) has been changed from 'Ng' to 'PC' (e.g. valueChangeNg became valueChangePC). Note that these events was not officially documented and their direct usage was not presumed.
  • Added an optional 'fn' parameter that was missing in the wijmo.removeEventListener method. This will only break code that called removeEventListener specifying all optional parameters, which should be rare. The change provides more control over event removal and consistency with the wijmo.addEventListener method.

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.

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

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;

What's New in Build 211

New Samples


What's New in Build 207

  • Angular 2: Wijmo interop adapted to RC.6, and can still work with RC.5. Angular 2 Info
  • Angular 2: all samples ported to RC.6 Angular 2 Explorer
  • Angular 2: added support for NgModule system introduced in RC.5. Each Wijmo Ng2 module includes corresponding NgModule that represents the module in Ng2 application and exports all its components. NgModule's name is inferred from ES6 module name, e.g. for ES6 module wijmo/wijmo.angular2.grid.filter the name of corresponding NgModule is WjGridFilterModule. Only few samples are reworked so far to use NgModel: InputIntro, FlexGridIntro, ngForms and FlexSheetExplorer. The latter is SPA application that implements lazy modules loading.
  • ReactJS: Added a new interop module for React: wijmo.react.js. ReactJS Interop sample | How to Use Wijmo in ReactJS Apps blog
  • VueJS: Added a new interop module for Vue: wijmo.vue.js. VueJS Interop sample | How to Create Great VueJS applications Using Wijmo Controls blog
  • Completely redesigned help system. new Wijmo 5 Documentation
  • Added support for column footers panel on the FlexGrid. Column footers have their own 'columnFooters' grid panel (similar to columnHeaders and rowHeaders). To add column footers to a grid, add one or more rows to its columnFooters panel. For example: grid.columnFooters.rows.push(new wijmo.grid.GroupRow()) In this example, we added a GroupRow, which will cause the grid to automatically display the aggregates set in each Column. Alternatively, you could add on or more regular rows, and set the cell contents of those row using the columnFooters.setCellData method: grid.columnFooters.rows.push(new wijmo.grid.Row()); grid.columnFooters.setCellData(0, 0, 'column footer value'); FlexGrid Custom Footers sample
  • Added a new charting control: FlexRadar for creating radar and polar charts. The control is in new module: wijmo.chart.radar.js. FlexRadarIntro samples (PureJs, Angular 1/2) are added to demonstrate the new control's features. FlexRadar Intro sample
  • Added a new funnel chart type. Added funnel chart sample to FlexChartIntro sample. FlexChart Intro sample
  • Added a new FlexGrid.newRowAtTop property to control whether the new row template should be displayed at the top or at the bottom of the data rows.
  • Improved FlexGrid scrolling with frozen cells (used to be a little jerky in IE).
  • Angular 2: added the autoSizeRows boolean property to the wjFlexGridCellTemplate directive that allows to disable automatic row height expansion.
  • Angular 1/2: added support for cell templates for FlexGrid column footers. WjFlexGridCellTemplate.cellType property now accepts 'ColumnFooter' and 'BottomLeft' to be applied to the corresponding cell types. In order to get a cell value in 'ColumnFooter' cell templates the $value (Angular 1) or cell.value (Angular 2) properties can be used.
  • Improved performance of Row/Col.IsSelected method.
  • Improved performance of FlexGrid.preserveOutlineState property.
  • Improved keyboard support in wijmo.Menu. Now users can use the keyboard to open the menu with (Enter/f4/alt+up/alt+down) and to navigate the options (up/down/ autosearch).
  • Added a Gauge.showTicks property that causes linear and radial gauges to show tick marks on the gauge face. The tick marks start from "min" to "max" at every "step". By default, the tick marks are white and 2 pixels in thickness. They can be styled using a ".wj-gauge .wj-ticks" CSS selector to customize their "stroke" and "stroke-width" values.
  • Added an optional 'dataItem' parameter to the DataMap.getDisplayValues method. The dataItem can be used to restrict the list of display values based on properties of the data item being rendered/edited (see https://wijmo.com/topic/flexgrid-datamap-that-is-row-dependent/).
  • Added support for "deep-binding" to the ListBox control (e.g. "customer.name").

What's New in Build 198

  • Angular 2: tested against RC.4. Angular2 Info
  • Angular 2: added support for Angular forms. The ngForms sample demonstrates the feature. The implementation is based on the new forms implementation from the @angular/forms module, instead of deprecated forms stuff from the @angular/common module. See the documentation on the new forms stuff here: https://angular.io/docs/ts/latest/guide/forms.html. The dynamic forms scenario described here https://angular.io/docs/ts/latest/cookbook/dynamic-form.html is supported as well. The ngForms sample includes the modified version of the abovementioned Dynamic Forms example that uses Wijmo input components. Angular 2 ngForms sample
  • Modified input controls to support the 'for' attribute of labels. The control modifies the for attribute from targeting the host element so they target the inner input element instead. For example:

                
                
    

    The InputDate will automatically set the id to its inner input element to 'inputDate.input' and will switch the "for" attribute of the label to target the input element instead. InputLabels sample | Building Great Web Forms with Wijmo blog

  • Rewrote parts of the XLSX module to no longer include xlsx.js dependency. This allowed us to remove the restricitve Microsoft copyright and license.
  • Added a few class names to FlexGrid elements to enable more flexible CSS-based styling. The new class names are:
    • wj-elem-collapse Element that holds the expand/collapse glyphs in group rows
    • wj-elem-dropdown Element that holds the drop-down glyph in data-mapped cells
    • wj-elem-filter Element that holds the filter glyph in column headers
  • Added a "wj-autocomplete-match" class to define the default style used for highlighting AutoComplete matches (can be overridden by the cssClass property).
  • Added an AutoComplete.searchMemberPath property that allows you to specify item properties to use when searching (in addition to displayMemberPath).
  • Added an 'isReadOnly' property to all input controls (DropDown, InputNumber, Calendar). This prevents users from changing the value, but still allows selection, focus, and events. It is equivalent to the 'readonly' property in HTML input elements, but also prevents editing with the mouse (drop-downs, buttons, wheel).
  • Added a selectionMode property to the InputDate and Calendar controls to allow selecting months rather than specific days.
  • Added specific class names to derived controls (for example, the ComboBox control host element now has class wj-combobox in addition to wj-control and wj-dropdown).
  • Improved CSS to keep InputDate calendar width constant as the user navigates months in IE.
  • Added undo/redo processing for inserting/removing chart in FlexSheet. (TFS 191085)
  • Added a new 'wj-state-empty' class to controls that contains empty input elements. This class can be used in CSS selectors along with the wj-state-focused class.
  • Allow empty strings on masked inputs when "isRequired" is false.

Breaking Changes

  • Replaced some custom attributes used by the FlexGrid control with class names for better W3C compliance and CSS support:

    • "wj-collapse" attribute was replaced with "wj-elem-collapse" class name
    • "wj-dropdown" attribute was replaced with "wj-elem-dropdown" class name
    • "wj-filter" attribute was replaced with "wj-elem-filter" class nameThis change may affect applications that customize the display of node cells. For example, you should replace:
    cell.innerHTML = '
    
  • Deprecated ' disabled' and 'required' properties on all controls and replaced them with 'isDisabled' and 'isRequired' . This avoids conflicts with HTML attributes in markup. The old properties still work, but will be removed in a future release, so this is not a breaking change yet, but will be.


What's New in Build 188

  • Added wijmo.chart.hierarchical.Sunburst control. The control displays hierarhical data as multi-level pie charts. Sunburst Sample
  • Added wijmo.chart.analytics.Waterfall class. The Waterfall series represents data values with cumulative effects(Waterfall chart). Waterfall Sample
  • Added ReportViewer sample, which includes a client-side ReportViewer control that uses FlexReport on the server to render reports. ReportViewer Sample
  • wijmo.pdf - added support for drawing SVG images (the PdfPageArea.drawSvg method).
  • Added customized filter for FlexSheet, make the filtering behave exactly like in Excel.
  • Updated the cell ranges processing in formula that Insert/delete row/column will update affected cell ranges in formulas.
  • Added a CollectionView.sortComparer property to support using custom value comparers such as Dave Koele's "natural sorting": https://www.davekoelle.com/alphanum.html
  • Added JavaScript Intellisense support, see the Intellisense folder in Wijmo zip.
  • Angular 2 - adapted to Angular 2 RC.3 Angular2 Info
  • Angular 2: the 'initialized' event and 'isInitialized' boolean property are added to all components. The event triggers when the bindings on the component and all its child components have been initialized, and the property changes its value from false to true at this moment. Note that 'isInitialized' is a dynamic property, in a sense is that it's not exposed as a TypeScript property out of the component interface, so it should be read using the component['isInitialized'] syntax.

What's New in Build 164

  • Angular 2: refined component initialization functionality.
  • Improved FlexGrid.stickyHeaders property to work within nested scrollable container elements, improved StickyHeaders sample to demonstrate this and how to add sticky toolbars to the grid. FlexGrid StickyHeaders Sample | Sticky Headers Blog
  • Added SimpleReports sample. Simple Reports Sample | Simple Reports Blog
  • Added DynamicDashboard sample. Dynamic Dashboard Sample
  • Added Popup.dialogResult and Popup.dialogResultEnter properties to make it easier to create and handle modal dialogs. Popups Sample
  • Added wijmo.grid.multirow extension module. Contains the MultiRow control that extends conventional grid layouts by using multiple rows to represent each data item. MultiRow Intro Sample
  • Added a Gauge.getText callback property used to customize text values shown on gauges. This new property is shown in the GaugeIntro sample: Gauge Intro Sample
  • Added FlexGrid.updatingLayout and updatedLayout events.
  • Added a FlexGrid.updatingView event to match FlexGrid.updatedView.
  • Addled a ValueFilter.sortValues property that allows users to specify that they don't want the values to be sorted when displayed in the filter editor.
  • Improved focus handling to work with controls hosted in "shadowRoot" elements (see the wijmo.getActiveElement() method).
  • Added style property for WorkSheet class, user is able to set the style for all the cells in the Worksheet for exporting.
  • Added PivotGrid.showRowFieldSort property. See this thread for details.
  • Added MultiSelect.checkedItems property to Angular directives.
  • The Angular 2 samples missed in build 153 have been ported to RC.1
  • Wijmo for Angular 2 components adapted to Angular 2 RC.1

Breaking Changes

  • Angular 2: bound events are triggered during component initialization now; before now they started to trigger after a component got to ngOnInit lifecycle hook.
  • The CollectionView.moveCurrentToPrevious method used to allow moving the cursor to position -1. Now it stops moving when the cursor reaches the first item (position zero). This was done for two reasons: 1) To make the method more convenient to use in typical first/prev/next/last VCR-style navigation buttons (the 'prev' button can now be linked to moveCurrentToPrevious without any additional tests), and 2) To improve consistency with the moveCurrentToNext method, which stopped at the last item in the collection.

What's New in Build 154


What's New in Build 151:

  • Wijmo Angular 2 components adapted to Beta.15. Learn more about our Angular 2 support
  • More than 20 samples ported to Angular 2.
  • Added Flyout sample that shows how to implement flyout menus on grid columns.
  • Added DragDropTouch sample that shows how to improve touch support in mobile devices, including drag/drop operations like column dragging as well as resizing.
  • Added OlapModal sample to show how to use PivotPanel in a modal dialog.
  • Added FlexGrid CellFactory sample that shows how to override the CellFactory in FlexGrid for custom rendering.
  • Added Chart support in FlexSheet (as a part of ExcelBook sample).
  • Added a wijmo.olap.PivotEngine.totalsBeforeData property that determines whether totals and grand totals should be displayed before or after the data they summarize.
  • Optimized horizontal scrolling on the FlexGrid (especially noticeable in IE, with large numbers of columns).
  • Added an ODataCollectionView.load method to re-fetch the data from the server.
  • Added CollectionView.sourceCollectionChanging and CollectionView.sourceCollectionChanged events.
  • Added support for deleting the content of multiple cells on the FlexSheet.
  • Added support for exporting borders in xlsx export.
  • Added a 'wj-header-alt' class to alternating cell headers (to avoid interference with existing CSS using 'wj-alt' class, which is applied only to scrollable cells).
  • Improved keyboard/focus handling in Popup control
  • Improved the FlexGridFilter value filters to behave more like Excel. The values shown for a column include only items that are not excluded by other filters. For example, if you filter a list by 'name' and that results in two items being shown, other field filters will only show the values of those two items.
  • Added new settings to AllowResizing enum to allow resizing rows and columns by dragging the edges of scrollable (non-header) cells. This is especially useful when headers are hidden (see headersVisibility). The updated settings are export enum AllowResizing { None, Columns, Rows, Both, ColumnsAllCells, RowsAllCells, BothAllCells }
  • Improved the adding/removing/changing sheet operations of sheets collection for FlexSheet control.

Read more about the Build 151 Release


What's New in Build 138:

  • 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 (https://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.

Read more about the Build 138 Release


What's New in Build 117:

  • Added Angular 2 Explorer sample with components for core Wijmo controls. The sample uses Beta.1 version of Angular 2. Angular 2 Explorer | Angular 2 blog
  • Added a wijmo.input.DropDown.dropDownCssClass property to make it easier to style the drop-down elements of the controls (this applies to all controls that extend DropDown, including ComboBox, MultiSelect, InputDate, InputTime, etc). MultiColumn DropDowns sample | MultiColumn DropDown blog
  • Added a wijmo.grid.Column.dropDownCssClass property to make it easier to style the drop-down list used to edit cells in columns that have dataMaps.
  • Added a wijmo.collections.CollectionView.useStableSort property that causes the CollectionView class to use a stable sort algorithm which is 30 to 50% slower than the native sort but maintains the relative order of records with equal keys.
  • Added a new InputDateTime control to enter/edit date and time values using a single control (as opposed to using an InputDate and an InputTime). InputDateTime sample | InputDateTime blog
  • Added a new FlexGrid.imeEnabled property to support IME modes while the grid is not in edit mode. This property benefits sites and applications in Japanese, Chinese, Korean and other languages that require IME support.
  • Improved FlexGrid.focus() implementation to prevent the browser from scrolling the grid's hostElement into view when the grid gets the focus.
  • Improved allowAddNew to work better with childItemsPath.
  • Improved IE9 polyfill to support drag/drop in modal dialogs
  • wijmo.xlsx added support for several new functions: Column, Columns, COUNTA, COUNTBLANK, COUNTIF, COUNTIFS, DATE, DATEDIF, DCOUNT, HLOOKUP, HOUR, INDEX, MOD, RANK, RATE, ROUNDDOWN, ROUNDUP, ROW, ROWS, SUBTOTAL, SUMIF, SUMIFS, TIME, TODAY
  • wijmo.xlsx added support for importing shared formulas.
  • wijmo.xlsx improved performance.
  • wijmo.grid.sheet added support for user-provided custom functions, see the FlexSheet.addCustomFunction method.
  • wijmo.grid.sheet added FlexSheet.unknownFunction event that allows to process non-supported functions found in cell expressions.
  • wijmo.grid.sheet added Sheet.itemsSource property that allows to change the items source for data bound sheets.

Read more about Build 117 Release


What's New in Build 109:

  • Improved Globalize to support formatting of fiscal years and quarters with the following format specifiers:
    • 'EEEE': government fiscal year
    • 'eeee': corporations fiscal year
    • 'U': government fiscal quarter
    • 'u': corporations fiscal quarterThe conversion from calendar to fiscal date is culture-dependent. If you are not using the appropriate culture file (and don't want to), then you can specify the conversion factor by setting the wijmo.culture.Globalize.calendar.fiscalYearOffset variable to an array containing two integers that represent the offset (in months) of the start of the fiscal year for government and for the private sector. For example, the Japanese culture uses a three month offset for the government's fiscal year and no offset for the private sector: wijmo.culture.Globalize.calendar.fiscalYearOffsets = [3, 0];
  • Added support for Japanese characters (IME, Katakana, Hiragana) in InputMask control.
  • Added automatic label rotation for category x-axis. The labels are rotated to avoid overlapping if axis.labelAngle is not specified.
  • Improved CollectionView.trackChanges to allow tracking of changes made to items that are not the current edit item. The most common scenario is pasting blocks of data into a FlexGrid.
  • Improved FlexGrid.childItemsPath property to accept arrays of strings in case items at different levels use different property names for their child items.
  • Changed the default value of the InputTime.step property to 15 (which seems to be the most common/useful setting). This causes the control to display the drop-down button by default; to remove the button, set the step property to null.
  • Added support for opening FlexGrid.dataMap dropdowns using the keyboard (F4, alt+up/down, like WinForms and WPF/Excel)
  • Improved the Control.dispose method to remove all Wijmo event listeners from the control being disposed (dispose also removes all HTML event listeners added with the Control.addEventListener method).
  • Added a DropDown.autoExpandSelection property that determines whether input controls should automatically select whole words/numbers when clicked. This applies to all controls that derive from DropDown, and makes it easier to edit dates, times, colors, etc.
  • Added a ComboBox.headerPath property that allows decoupling the values shown in the combo's input element from the values shown in the drop-down list.
  • Added five new glyphs to wijmo.css:
    • wj-glyph-step-forward
    • wj-glyph-step-backward
    • wj-glyph-file
    • wj-glyph-calendar
    • wj-glyph-clock
  • The FlexGridXlsxConverter class adds support for row headers export. The behavior is controlled by the IFlexGridXlsxExportOptions.includeRowHeaders property.
  • Improved InputMask handling of delete key with masks that contain numbers in the template (e.g. "99-55-9999").
  • Added FlexGrid.selectedRows and selectedItems properties. Both can be used to get a list with the currently selected rows or their associated data items. When the selectionMode property is set to ListBox, they can also be used to set the selected rows or data items.
  • Refactored wijmo.grid.filter.FlexGrid filter by removing the OData-specific getODataFilterDefinition method and replacing it with a call to the collection view's updateFilterDefinition method; which if present updates the filter definition used on the server-side. This refactoring allows other CollectionView implementations (such as BreezeCollectionView) to support server-side filtering.
  • Improved BreezeCollectionView sample to show server-side filtering.
  • Added a FlexGrid.showAlternatingRows property to allow disabling alternate row styling without changing any CSS rules.
  • Added a FlexGrid.updatedView that fires when the grid finishes creating/updating the cell elements for the current view (e.g. after binding, refreshing, resizing, scrolling, etc.)
  • Used IntelliSpell to spell-check all the documentation.

Read more about Build 109 Release


What's New in Build 102:

  • Added wijmo.xlsx module that provides client-side functionality for exporting and importing to/from Excel xlsx file. The ExcelImportExport sample is updated with examples demonstrating its usage.
  • Added wijmo.grid.xlsx module, which is an extension to the wijmo.xlsx module, that provides client-side functionality for exporting and importing FlexGrid to/from Excel xlsx file. The ExcelImportExport sample is updated to use this module.
  • Added wijmo.grid.sheet module, which is an extension to the wijmo.grid and wijmo.grid.xlsx modules. It implements the FlexSheet control that provides an Excel-like functionality. The ExcelBook sample is updated to use this module.
  • New FinancialChart overlays: Bollinger Bands & Moving Average Envelopes.
  • New FinancialChart indicators: Average True Range, Relative Strength Index, Commodity Channel Index, Williams %R, MACD/MACD Histogram, Stochastic Oscillator.
  • New Fibonacci Extensions for FinancialChart: Fans, Arcs, Time zones.
  • Added AngularJS PdfExport sample that implements client-side export of a FlexGrid control to PDF format.
  • Added AngularJS FlexChartAnimation sample. The sample shows chart animation when loading and updating chart data.
  • Added AngularJS FlexChartZoom sample. The sample demonstrates chart interaction using touch gestures or mouse.
  • Added PureJS AggregateSeries sample for FlexChart. The sample shows data aggregation based on selected data range.
  • New RangeSelector.seamless property allows seamless transition between selector handles.
  • New appearance of RangeSelector handles simplifies dragging at smaller ranges.
  • Improved wijmo.grid.filter.FlexGridFilter to allow filtering with merged headers.
  • Improved auto-generated column headers. (we now capitalize first letter, break up camel-case binding strings, so the header for a column bound to the 'productName' property becomes 'Product Name' be default).
  • Optimized wijmo.closest method to use 'matches' method instead of 'querySelectorAll'.
  • Improved InputNumber control behavior on mobile devices.
  • Added a FlexGrid.stickyHeaders property that keeps column header cells in view even when the top of the grid scrolls off view.
  • Improved CollectionView change tracking to ignore items that are added and subsequently removed in the same session.
  • Improved Globalize to support formatting of date quarters with the 'q' or 'Q' format specifiers (e.g. format(someDate, 'yyyy "Q"q') => '2014 Q4').

Read more about Build 102 Release


What's New in Build 90:

  • Added a wijmo.odata.ODataVirtualCollectionView class that loads data on demand. See the VirtualData sample for details.
  • ODataCollectionView.filterDefinition property is applied to filter on the server even when filterOnServer is set to false. This allows applications to apply server and client-side filtering to the same collection.
  • Added FlexGrid.pastingCell/pastedCell events. These events fire while the grid is pasting data into individual cells. Previously, the grid would fire editing events in these situations, but that led to some ambiguities that affected the implementation of custom editors.
  • Added support for hexadecimal formatting/parsing; use format 'xn' or 'Xn'
  • Made AutoComplete control honor the "isEditable" property (inherited from ComboBox)
  • Added a wijmo.grid.CellFactory.disposeCell method to allow better resource cleanup when using custom cell factories.
  • Improved Angular FlexGrid.CellEdit template to use the character that was typed when initiating the edits (as the built-in editors do).
  • Made FlexGrid.cellFactory property get/set.
  • Added a wijmo.grid.DataMap.isEditable property to allow users to enter data that is not on the DataMap (mapped items become non-exclusive options).
  • wj-menu-item directive now supports AngularJS interpolation expressions and directives inside it, and can be used in conjunction with ng-repeat/ng-if directives.
  • Data-bound Menu controls now support wj-item-template directive that allows to define an arbitrary menu item content.
  • ng-class AngularJS directive is now supported on the wj-flex-grid-column and wj-flex-grid-cell-template directives.

Read more about Build 90 Release


What's New in Build 84:

  • Added a FlexGrid.showMarquee property that determines whether the grid should display an Excel-style marquee around the current selection. The marquee may be styled using the "wj-marquee" class selector. Article: Highlight Cell Selections in FlexGrid
  • Added a FlexGrid.showSelectedHeaders property that determines whether the grid should add a "wj-state-multi-selected" class selector to row and/or column header elements; these can be used in CSS to highlight header cells that correspond to the current selection.
  • Added a new 'clip' parameter to the FlexGrid.getMergedRange method; if true (the default), the method clips the merged range to the current view range.
  • Added Calendar.itemValidator and InputDate.itemValidator properties to enable preventing certain days from being selected. Article: Customize and Edit Dates and Times with Wijmo Calendar, InputDate and InputTime
  • Added a Calendar.formatItem event to complement the Calendar.itemFormatter property.
  • Added a new 'wj-state-focused' class to controls that contains the focus. This class is toggled automatically to reflect the control's focus state and can be used in CSS selectors to add focus-related styles to parts of focused controls, such as gauge cursors, chart series, and grid ranges. Article: Apply Special Formatting to Focused Controls
  • Added Angular attributes for chart series axisX and axisY .
  • Added wijmo.input.DropDown.isDroppedDownChanging event to allow for customization of the drop-down before it is shown.
  • Added wijmo.grid.filter.ValueFiler.uniqueValues property to specify the list of values to be shown on the list, which is more efficient than building the list from the data and works on collections that are filtered on the server.
  • Improved features and performance of Globalize.formatDate and parseDate methods.
  • Added scaling specifiers to Globalization.formatNumber and parseFloat. For example, 'n0,' divides the value by one thousand, 'n0,,' by one million, and 'n0,,,' by one billion. The scaling specifiers are especially useful in charts based on large values so the axis display scaled values which are easier to read and take up less space. Article: Break up Data Clusters in a Chart With a Logarithmic Scale
  • Added a Gauge.thumbSize property that enables displaying a 'thumb' element to show the current value at the end of the 'pointer' range. This applies to linear and radial gauges.
  • Added mouse wheel support to editable Gauges.
  • Added support for 24 new cultures.

Read more about Build 84 Release


What's New in Build 70:

  • Added wijmo.chart.finance extension module, contains FinancialChart control. The module is a part of Wijmo Enterprise only.
  • Added StockChart. The sample shows various features of FinancialChart control. StockChart Application
  • Added FinancialChartExplorer sample. The sample shows available financial chart types. FinancialChart Explorer
  • Added FinancialChartIntro. The sample in an introduction to FinancialChart control. FinancialChart 101
  • Added wijmo.chart.finance.analytics module, contains Fibonacci tool.
  • Added ExcelBook sample that implements FlexSheet control that provides Excel-like functionality. The implementation is based on the FlexGrid control. ExcelBook FlexSheet Sample
  • Added wijmo.chart.analytics extension module, containing a set of specialized series classes intended for creating of analytical charts using FlexChart and FinancialChart controls:
    • TrendLine (A calculation of simple linear or growth trend that fits diffrent fitType)
    • MovingAverage (A calculation by creating a series of averages of different subsets)
    • YFunctionSeries (A calculation of y by given function)
    • ParametricFunctionSeries (A calculation of x and y by given xFunc and yFunc)
  • Added wijmo.chart.annotation extension module, implements a possibility to add annotations of different types to FlexChart and FinancialChart controls:
    • AnnotationLayer (A layer that contains a collection of annotations of different types)
    • Annotations: Circle, Ellipse, Image, Line, Polygon, Rectangle, Square, Text
  • Added AxisScrollBar sample. The sample demonstrates axis scroll bars that allow to scroll through and change scale of displayed data. Axis Scrollbar
  • Added FlexChartAnalytics. The sample shows extended chart functionality from wijmo.chart.analytics module. FlexChart Analytics
  • Added FlexChartAnnotation. The sample demonstrates annotations created with wijmo.chart.annotation module. FlexChart Annotation
  • Added a new wijmo.input.MultiSelect control (allows picking multiple items from a drop-down). MultiSelect Control
  • Added a new wijmo.input.Popup control (shows arbitrary elements as popups/popovers/dialogs). Popup Control
  • Improved label generation for time and category axes.
  • Added support of custom data label rendering(DataLabel.rendering event).
  • Added connecting lines for data labels(DataLabel.connectingLine property).
  • Added DataLabel.offset property to specifies offset from date point to the corresponding label.
  • Added Axis.labelAlign property to control alignment of axis labels.
  • Axis properties min, max, actualMin, actualMax support Date objects for time-based data source.
  • Added property SeriesBase.altStyle to specify alternative style for data series.
  • Added Position.Auto option that allows to automatically set chart legend position depending on control's size.
  • Added a Menu.owner property for use in shared context menus.
  • Added filterChanging and filterChanged events to the FlexGridFilter class.
  • Improved FlexGridFilter to ignore invalid condition filters such as "contains('')" or "beginswith('')".
  • Optimized ODataCollectionView to skip schema/version query in some situations.
  • Prevent browser from trying to scroll the whole grid into view when it gets focus.
  • Added Control.gotFocus and lostFocus events.
  • Added wheel support to Input controls.

What's New in Build 63:

  • Added a wijmo.odata module with an ODataCollectionView class that extends the CollectionView class to load and update data exposed as OData services. OData Sample
  • Added WjValidationError Angular directive to support validation (HTML5 or Angular forms) based on arbitrary Angular expressions. Validation Sample | Validation Blog
  • Added wijmo.grid.detail extension to add row details to FlexGrid controls. RowDetails Sample
  • Added a wijmo.httpRequest method to perform Ajax requests without dependencies.
  • Added a ValueFilter.maxValues property to limit the number of unique items to display in the value filter list.
  • Added WjItemTemplate directive to support ListBox item templates with arbitrary HTML markup (including Angular bindings and directives). Input 101 Sample
  • Prevent browser from trying to scroll the whole grid into view when it gets focus.
  • First input element in FlexGrid edit cell template now automatically gains focus after editing has started.
  • Added support for binding to array properties (e.g. 'customer.balance[0]').
  • Improved FlexGrid numeric editor to right-align and show the full precision of values being edited (like MS-Excel).
  • Added InputMask.rawValue property to get/set the value of the control without mask literals and prompt characters.

What's New in Build 51:

  • Improved scrolling performance in IE (200x in some cases)
  • Added wijmo.setText method to set or clear the content of HTML elements as efficiently as possible.
  • Added FlexGridFilter.filterDefinitions property to serialize filters to/from JSON.
  • Added ListBox.formatItem event (same semantics as FlexGrid.formatItem)
  • Added support for Excel shortcuts: ctrl+A = select all, shift+Enter: select up.
  • Added two new glyphs: .wj-glyph-plus and .wj-glyph-minus.
  • Improved FlexGrid cell templates for Angular performance.
  • Improved CollectionView grouping and sorting performance.
  • wj-tooltip Angular directive now supports interpolated values.
  • Added disposeAll static method to the Control class to make it easier to dispose of controls when their host elements are removed from the DOM.
  • Added add/removeEventListener methods to the Control class to make it easier to remove event listeners when the control is disposed.

What's New in Build 48:

  • Added a Control.disabled property (maps to disabled attribute of the host element)
  • Added class names to facilitate custom styling of column headers:
    • wj-sort-asc (column is sorted in ascending order)
    • wj-sort-desc (column is sorted in descending order)
    • wj-filter-on (column has an active filter)
    • wj-filter-off (column has an inactive filter)
  • Improved FlexGrid cell templates for Angular performance.
  • Changed FlexGrid mouse handler to sort/select on left button only (reserving the right button for context menus)
  • Improved grid filter to support value and condition filtering.
  • Added a Menu.isButton property that turns menus into split-buttons.
  • Input and Gauge directives can bind using ng-model directive now, gaining the features specific to ng-model this way.
  • Added WjFlexGridCellTemplate.cell-overflow attribute that allows to change cells' style.overflow property declaratively.
  • Optimized grid scrolling performance (especially visible in IE).

What's New in Build 42:

  • Optimized grid scrolling performance.
  • Added markers to indicate the position of rows and columns being dragged.
  • Improved behavior of drop-down grid cells on mobile devices.
  • Added select-all functionality when the user clicks the top-left fixed cell.
  • Changed row and column resize cursors to 'col-resize' and 'row-resize.'
  • Added a FlexGrid.deferResizing property to defer row and column resizing until the user releases the mouse.
  • Added a Column.sortMemberPath property to sort columns based on an alternate binding.
  • Exposed wijmo.showPopup and hidePopup utility methods for positioning popup elements.
  • Added support for multi-item selection in the ListBox control. Set the checkedMemberPath property to the name of a Boolean property in the itemsSource collection and the ListBox adds checkboxes to each item, and fires the itemChecked event when the current item is checked or unchecked.
  • Deprecated and removed the wijmo.isTouchDevice method. The method actually tested the browser, not the device, so it was useless.
  • Added a LineMarker class to the wijmo.chart module that provides FlexChart with a continuous data point information with optional directional lines as mouse pointer moves over a chart surface.
  • Added a wijmo.chart.interaction extension module with a RangeSelector class that allows the user to choose the range of data to display on the specified FlexChart.
  • Added WjFlexGridCellTemplate directive for Angular that allows to definea custom template for any type of a FlexGrid cell (column and row headers, editing cell, and so on).
  • Cell templates now support element level directives.
  • Wijmo child directives for Angular (like WjFlexGridColumn or WjFlexChartSeries),when used in conjunction with ng-repeat directive, now support full-functional synchronization with ng-repeat's source array, including items order.

What's New in Build 39:

  • Added FlexGrid.sortRowIndex property. This property determines the index of the row in the column headers panel that displays the sort icon and can be clicked to sort the column. By default, it is set to null, causing the last row in the panel to be the 'sort row'.
  • Raise editing events when pasting data into the FlexGrid (this allows users to prevent overwriting specific cells when pasting).
  • Improved column filters to work with complex properties (e.g. 'state.name', 'state.pop').
  • Exposed wijmo.Binding class used to work with complex properties.
  • New wijmo.grid.grouppanel module with the GroupPanel control that adds a drag&drop grouping functionality to the FlexGrid control.
  • Improved the CollectionView sorting logic to place nulls at the bottom of the list, regardless of sort direction (Excel behavior).
  • Allow initialization of ObservableArray in constructor.
  • Improved formatting of values in GroupRow node cells.
  • Improved the grouping logic of paged CollectionViews to avoid splitting groups between pages and to include all items in aggregates (as opposed to items in the current page which was the previous behavior).
  • Added a CollectionView.sortConverter property. The property specifies a function that can be used to customize the sorting behavior of the CollectionView.
  • Improved FlexGrid sorting to take dataMaps into account. Now the grid sorts based on display value (as opposed to raw data values which was the previous behavior).
  • Expanded grid keyboard handling: now ctrl+home and ctrl+end navigate to the first and last cells on the grid (as opposed to home/end, which navigate to the first and last cells on the current row).
  • Added Gauge.origin property. This property determines the starting point used for painting the pointer range. Setting it to null causes the gauge to use the min property or zero if the range extends from negative to positive values.
  • Clamp InputNumber value between min/max as the user types the value in.
  • Improved behavior of input controls on touch devices.

What's New in Build 32:

  • Added support of chart data labels(new properties FlexChart.dataLabel and
  • FlexPie.dataLabel).
  • Added FlexGrid.getCellBoundingRect and GridPanel.getCellBoundingRect methods
  • to retrieve the bounds of a given cell.
  • Added FlexGrid.formatItem event to allow multiple subscribers to customize cells
  • (itemFormatter allows only one).
  • Added FlexGrid.AutoSizeMode property to customize auto-sizing behavior, as
  • well as new events autoSizingColumn, autoSizedColumn, autoSizingRow, autoSizedRow.
  • Improved DropDown control behavior in clipping containers.
  • Added two new glyphs: .wj-glyph-check and .wj-glyph-filter
  • Child Angular directives for Wijmo (like wj-flex-grid-column) can now be defined using
  • the ng-repeat directive.

What's New in Build 27:

  • Fixed problem in chart series x-binding.

What's New in Build 26:

  • Added initialization options to wijmo.grid.Column constructor
  • Changed default color in InputColor and ColorPicker to white
  • Added support of logarithmic axes(new Axis logBase property).

What's New in Build 25:

  • Added frozenRows and frozenColumns properties to the FlexGrid. Frozen cells are non-scrollable (like header cells) but can be selected and edited (like regular cells).
  • Added Axis properties itemsSource, binding, itemFormatter. The properties provide axis label customization.
  • Added Axis overlappingLabels property that controls appearance overlapped labels on axis. By default the overlapped labels are hidden.
  • Added event Axis.rangeChanged.

What's New in Build 24:

  • Added InputColor and ColorPicker controls to wijmo.input module.
  • Added toHsb, toHsl, fromHsb, fromHsl methods to Color class.
  • Improved Globalize.formatNumber to honor the 'd' format as per the .NET spec. (e.g. Globalize.formatNumber(-1234, 'D6') == '-001234')
  • Added chart axis minor ticks and grid lines ('minorTickMarks', 'minorGrid' props in Axis class).
  • Added wijmo.chart.Axis.origin property This property allows to specify axis position inside plot area.
  • Added 'initialized' event and 'isInitialized' boolean property to Angular directives and Knockout Bindings. The property gets a true value and event is triggered after the directive has finished initialization of the control with values defined in its attributes and child directives.

What's New in Build 23:

  • Removed dependency on jQuery
  • FlexGrid:
    • Added wijmo.grid.Column.showDropDown property
  • New samples:
    • Column Picker, Custom Headers, AngularEvents, more...

What's New in Build 22:

  • KnockoutJS support
  • InputMask control
  • FlexGrid:
    • Clipboard support
    • Column: mask, required, inputType properties
  • FlexChart:
    • Multi-axis support
    • Label angle
  • InputDate, InputTime:
    • Added mask property
  • On-line help:
    • Collapse/expand topics
    • Show/hide inherited members
  • New samples
  • Shopping Cart, Dashboard, more...