Wijmo's first major release of 2017 has landed, and it's full of exciting new controls and developments— a new JavaScript TreeView control, a new multi-autocomplete that you have to see to believe, a mobile JavaScript report viewer, and OLAP server support!
Download Wijmo Enterprise
Let's dive in.
TreeView Control
Display hierarchical lists in Wijmo's new TreeView, which includes checkboxes, icons, drag and drop, lazy-loading, node editing, and more. TreeView is part of a new wijmo.nav module.
New TreeView Control
MultiAutoComplete Control
MultiAutoComplete is a unique control that blends multiple selection with auto-completion, hence the name. This type of control is often used for aggregate lists like “tags” in a blog, for example. We have added MultiAutoComplete to our input module.
New Multi-AutoComplete Control
Input Intro Sample | MultiAutoComplete Sample
Server-side OLAP
Wijmo’s Pivot controls were created for analyzing datasets on the client. Our client-side OLAP engine can handle relatively large amounts of data (in the order of hundreds of thousands of records), but it requires the raw data to be downloaded to the client, and that makes it impractical to analyze really large datasets (millions of records).
In this release, we have added server-side support to our OLAP controls. You can now use a URL in the itemSource property that will instruct the OLAP controls to query a web API on the server instead of analyzing an array on the client. The server-side engine is part of our ASP.NET MVC product line and must be installed and licensed separately. We recommend purchasing Ultimate so that you have both server and client side components for our OLAP controls.
Gradient Support in FlexChart
FlexChart now has support for applying gradient colors to plot elements. Gradients can be either radial or linear and support multiple colors as well as opacity. Add some style to your charts with our new gradient support.
Wijmo FlexChart with Gradients
Mobile Support for ReportViewer
We're also pleased to release mobile support for ReportViewer. Our ReportViewer control now features responsive design and will adapt to fit different screen sizes on mobile devices.
Mobile JavaScript Report Viewer
ReportViewerIntro Sample | ReportViewer Tutorial
Improve Component Inheritance in Angular 2
After adding a support for Angular Ahead-of-Time compiler and removal of @WjComponent decorator, creation of custom components by inheriting them from Wijmo components became a challenge. We addressed this issue in this release by adding two means that simplify creation and maintaining of derived Wijmo components:
- Special variables that stores Wijmo @Component metadata.
- The special ‘created’ method which is called from every Wijmo component’s constructor and can be overridden to define or re-define component’s defaults, instead of declaring a component constructor and maintaining its parameters list.
Every Wijmo component/directive now have a corresponding variable exported from the component's module that represents its @Component/@Directive decorator properties. The name of the variable is
constructed as Meta. For example, wjInputNumberMeta variable represents metadata of the WjInputNumber component. Such a variable is useful when you create a custom component derived from a Wijmo component, where you have to provide a @Component decorator whose properties should replicate most of the properties of the base class @Component decorator.
You also have an option to not declare your custom component’s constructor at all, thus eliminating the need to define and maintain its parameters to by in synch with base Wijmo component’s constructor parameters. Instead, you can just override the “created” method and perform here necessary initializations that you usually do in a class constructor.
Here's an example of the MyGrid component that inherits from the WjFlexGrid component, and adds 'myProperty' property and corresponding 'myPropertyChange' event:
import { WjFlexGrid, wjFlexGridMeta } from 'wijmo/wijmo.angular2.grid';
@Component({
selector: 'my-grid',
template: wjFlexGridMeta.template,
inputs: [...wjFlexGridMeta.inputs, 'myProperty'],
outputs: [...wjFlexGridMeta.outputs, 'myPropertyChange'],
providers: [
{ provide: 'WjComponent', useExisting: forwardRef(() => MyGrid) },
...wjFlexGridMeta.providers
]
})
export class MyGrid extends WjFlexGrid {
private _myProperty: string;
myPropertyChange = new EventEmitter(false);
constructor( @Inject(ElementRef) elRef: ElementRef,
@Inject(Injector) injector: Injector,
@Inject('WjComponent') @SkipSelf() @Optional() parentCmp: any,
@Inject(ChangeDetectorRef) cdRef: ChangeDetectorRef) {
super(elRef, injector, parentCmp, cdRef);
}
get myProperty(): string {
return this._myProperty;
}
set myProperty(value: string) {
if (this._myProperty !== value) {
this._myProperty = value;
this.myPropertyChange.emit(value);
}
}
}
FlexGrid FilterPanel
We recently worked with a customer to create this new feature for handling filters with ease.
Wijmo FlexGrid with Filtering
ServerCollectionView
ServerCollectionView is another sample we have created based on customer requests. We previously created ODataCollectionView, but many people ask how to bind to an arbitrary server-side API. The ServerCollectionView demonstrates how to do that, including how to customize it to your needs.
Server Collection View
FlexGrid Finance Sample
We have also added new Finance sample that shows a simulated live data feed of stock quotes for the FTSE 100 companies in a FlexGrid. The sample simulates batches of transactions at a given interval and updates the information on a grid changing only the cells that have changed.
Finance Sample
Periodic Table Sunburst
A fun sample that turns the traditional periodic table of elements into a Sunburst chart.
PeriodicSunburst sample | Rethinking the Periodic Table with Wijmo’s Sunburst blog
New Samples
- TreeView Intro Sample
- OLAP Server Intro Sample
- FilterPanel Sample
- FlexGrid Finance Sample
- ServerCollectionView Sample
- PeriodicSunburst sample | Rethinking the Periodic Table with Wijmo’s Sunburst blog
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 http://wijmo.com/5/docs/topic/wijmo.Module.html#formatThe 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.
Download Wijmo Enterprise
Chris Bannon