Wijmo 2021 v2 Has Landed

Wijmo has just shipped its second major release of 2021. This release includes the official release of our Map Control FlexMap, Excel Note support, and a new ColumnGroups API. Let's take a closer look at the release!

Download Now!

FlexMap is Officially Released!

We are pleased to announce that FlexMap is no longer in Beta. FlexMap is a beautiful new map control for visualizing geographic data. Map controls can bring your data to life and make it much easier to analyze. This JavaScript UI component enables you to create stunning visualizations with your geodata easily.

FlexMap supports rendering choropleths and point maps, such as scatter and bubble. The map uses GeoJSON for binding geographical feature layers and point layers.

We recommend NaturalEarthData as a source for public domain GeoJSON data and MapShaper to customize as needed. Of course, there are many other sources, and you might already have your own!

• JavaScript Choropleth Map Demo
• Angular Choropleth Map Demo
• React Choropleth Map Demo
• Vue Choropleth Map Demo

Added Support for Excel Notes in XLSX

Based on customer requests, we have added support for Excel notes in the wijmo.xslx module. Now you can include Excel notes when importing or exporting with FlexGrid or working with any Workbooks using our XLSX module. We added note property to the WorkbookCell class and IWorkbookCell interface.

We've also added a WorkbookNote class and IWorkbookNote interface. The note can be customized by setting its author, text, position, and size. Import and Export just got even better!

• JavaScript Excel Notes Import Demo
• Angular Excel Notes Import Demo
• React Excel Notes Import Demo
• Vue Excel Notes Import Demo

New Improved ColumnGroups API in FlexGrid

Our JavaScript DataGrid's ColumnGroups can now be defined using a typed object model, comprised of ColumnGroupCollection and ColumnGroup objects. Previously columnGroups could only be defined using POJO. Now we have a much more powerful way of defining or declaring ColumnGroups.

The Interop modules for Angular, React, and Vue also supports the new ColumnGroup classes. You can declare ColumnGroups right in the markup for your favorite JS framework.

Changes in ColumnGroup properties, adding/removing/reordering ColumnGroup objects will cause FlexGrid to automatically update its layout.

By default, the columnGroups property returns an empty ColumnGroupCollection collection, where you can add first-level ColumnGroup objects. Each ColumnGroup object has its own 'columns' collection, where you can add child ColumnGroup objects, creating a column groups tree.

Example usage:

    let theGrid = new FlexGrid('#theGrid', {
        headersVisibility: 'Column',
        alternatingRowStep: 0,
        showMarquee: true,
        showSelectedHeaders: 'All',
        autoGenerateColumns: false,
        columnGroups: new ColumnGroupCollection([
            new ColumnGroup({ binding: 'name', header: 'Name', width: 150 }),
            new ColumnGroup({ binding: 'currency', header: 'Curr', width: 80, align: 'center' }),
            new ColumnGroup({ header: 'Allocation', align: 'center', collapseTo: 'alloc.amount', columns: new ColumnGroupCollection([
                    new ColumnGroup({ binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80 }),
                    new ColumnGroup({ binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80 }),
                    new ColumnGroup({ header: 'Detail', align: 'center', columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80 }),
                            new ColumnGroup({ binding: 'alloc.other', header: 'Other', format: 'p0', width: 80 }),
                        ]) }),
                    new ColumnGroup({ binding: 'alloc.amount', header: 'Amount', format: 'c0', width: 100, cssClass: 'main-column' }),
                ]) }),
            new ColumnGroup({ header: 'Perf', align: 'center', columns: new ColumnGroupCollection([
                    new ColumnGroup({ header: 'Short', align: 'center', collapseTo: 'perf.ytd', isCollapsed: true, columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'perf.ytd', header: 'YTD', format: 'p2', width: 100, cssClass: 'main-column' }),
                            new ColumnGroup({ binding: 'perf.m1', header: '1 M', format: 'p2', width: 80 }),
                        ]) }),
                    new ColumnGroup({ header: 'Long', align: 'center', collapseTo: 'perf.m12', isCollapsed: true, columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'perf.m6', header: '6 M', format: 'p2', width: 80 }),
                            new ColumnGroup({ binding: 'perf.m12', header: '12 M', format: 'p2', width: 100, cssClassAll: 'main-column' }),
                        ]) }),
                ]) }),
        ]),
        itemsSource: DataService.getData(),
    });

• JavaScript ColumnGroups API Demo
• Angular ColumnGroups API Demo
• React ColumnGroups API Demo
• Vue ColumnGroups API Demo

Drag to Reorder ColumnGroups

We've also added the ability to reorder ColumnGroups using drag and drop. You and also reorder columns within a ColumnGroup. This gives your end-users full control over how the grid columns and groups are arranged.

CellTemplates for ColumnGroups in Angular, React, and Vue

Along with adding declarative components for ColumnGroups, we have added our powerful CellTemplate support for Angular, React, and Vue.

CellTemplates allow you to fully customize the way specific cells render in FlexGrid. CellTemplates support HTML elements, Wijmo Components, framework bindings, and conditional statements. They allow you to customize each cell in the grid to your exact needs.

For example, here is some Angular markup for using a checkbox to expand/collapse ColumnGroups in the ColumnHeader cell of an Angular DataGrid.

        <wj-flex-grid-column-group #allocGr header="Allocation" align="center" collapseTo="alloc.amount">
            <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" [autoSizeRows]="false" let-cell="cell" *ngIf="useCellTemplates">   
                <input type="checkbox" [(ngModel)]="allocGr.isCollapsed">
                {{cell.col.header}}
            </ng-template>
        </wj-flex-grid-column-group>

The result (see the Allocation column header):

Expand, Collapse, and Reorder Events for ColumnGroups Supported by UndoStack

Our UndoStack offers a convenient way of adding undo/redo behavior to your application. FlexGrid supports undo/redo for many of its actions. With this release, we have added the ability to undo/redo expanding and collapsing ColumnGroups when using FlexGrid.

Save and Persist State of ColumnGroups

The columnLayout property of FlexGrid can be used to persist column layouts defined by users so they are preserved across sessions, and can also be used to implement undo/redo functionality in applications that allow users to modify the column layout.

We added ColumnGroup configuration to the columnLayout property so that all changes to ColuymnGroups can be persisted.

DataMap Supports array and object type properties

Change Log

• [wijmo.xlsx] Added support for Excel notes. Notes can be retrieved and set using the WorkbookCell.note property. The following changes were made to wijmo.xlsx:
  • Added note property to the WorkbookCell class and IWorkbookCell interface.
  • Added WorkbookNote class and IWorkbookNote interface. The "Excel/Workbook Viewer" sample is updated with a simple notes support implementation.
• [FlexGrid] columnGroups can now be defined using a typed object model, comprising ColumnGroupCollection and ColumnGroup objects. Changes in ColumnGroup properties, adding/removing/reordering ColumnGroup objects causes FlexGrid to automatically update its layout. By default, columnGroups property returns an empty ColumnGroupCollection collection now, where you can add first-level ColumnGroup objects. Each ColumnGroup object has its own 'columns' collection, where you can add child ColumnGroup objects, this way creating a column groups tree. The old way to define columnGroups using a POJO array is supported as well. See also the Breaking Changes section for more details. The "Grid/Columns/Grouping (Object Model)" sample demonstrates the feature.
• [FlexGrid] Added second optional includeAllColumnTypes parameter to the getColumn method, which allows you to find column group in the columnGroups tree by its name or binding.
• [FlexGrid] Added getColumnGroups() method, which returns effective ColumnGroupCollection collection used by grid, even if columnGroups were defined using a POJO array.
• [FlexGrid] Added support for repositioning column groups (reordering, moving to another group) by dragging them with the mouse. See also the Breaking Changes section for more details.
• [FlexGrid] getColumn(true) method call performed on CellRangeEventArgs objects used in some events like formatItem or columnGroupCollapsedChanged, as well as on HitTestInfo objects, now returns a ColumnGroup object representing a group (containing child columns), when the affected area is such a group cell. Before now, this method returned only leaf (bound column) objects of the columnGroups tree.
• [FlexGrid] The columnLayout property now supports saving and restoring the columnGroups.
• [UndoStack] Added support for reordering and collapse/expand actions in column groups.
• [Angular] Added wj-flex-grid-column-group component to define column groups hierarchy in Angular templates, with a possibility to define cell templates for groups. The "Grid/Columns/Grouping (Object Model)" sample demonstrates the feature.
• [React] Added FlexGridColumnGroup component to define column groups hierarchy in React 'render' functions, with a possibility to define cell templates for groups. The "Grid/Columns/Grouping (Object Model)" sample demonstrates the feature.
• [Vue] Added wj-flex-grid-column-group component to define column groups hierarchy in Vue templates, with a possibility to define cell templates for groups. The "Grid/Columns/Grouping (Object Model)" sample demonstrates the feature.
• [PivotPanel] PivotPanel.deferUpdate property is added. The property defines whether the underlying engine is in a deferred update state or not. (WJM-20028)
• [FlexGrid] DataMap can now correctly work with keys which are complex objects or arrays of complex objects, by setting the newly added 'serializeKeys' boolean property to false. In this case, the DataMap stops converting keys to strings and uses the browser's Map class to store key-value pairs.

Breaking Changes

• [FlexSheet] When updating a cell do not coerce strings to dates if the column's data type is DataType.String.
• [FlexGrid] columnGroups property default value is changed from undefined to an empty ColumnGroupCollection object. Assignment of a POJO array to this property is still supported.
• [FlexGrid] Column groups can now be repositioned using drag&drop by default. To disable this functionality, set the FlexGrid.allowDragging property to false.
• [FlexGrid] getColumn(true) method call performed on CellRangeEventArgs objects used in some events like formatItem or columnGroupCollapsedChanged, as well as on HitTestInfo objects, now returns a ColumnGroup object representing a group (containing child columns), when the affected area is such a group cell. Before now, this method returned only leaf (bound column) objects of the columnGroups tree.
• [OLAP] Default value for the PivotGrid's rowHeaders.columns.defaultSize property is the same as of the cells.columns.defaultSize property now.
• [InputDate] If the control's input element contains an invalid value, and a drop-down calendar is opened, the text in the input element doesn't change. The text will be changed only after the control lost focus. In the previous builds, text had changed in this case to the current control's value, if invalidInput events were not used or set e.cancel to false.

Download Now!