What's New in Wijmo 2019 v3

Wijmo Build 2019 v3 5.20193.646 - January 15, 2020

Wijmo Build 5.20193.646 is now available. This build includes some big enhancements to our Vue and React support. We added validation to TransposedGrid and innerText option for creating donut charts and customizable clickAction to DropDown.

Change Log

[Vue] Added wj-item-template component, which allows you to define items content as a Vue template (with an arbitrary HTML, custom components and bindings), for the item components like wj-list-box, wj-combo-box, wj-multi-select and wj-menu.

[Vue] Added wj-tab-panel/wj-tab components, which allow you to define TabPanel control content declaratively in Vue templates markup.

[React] Added TabPanel/Tab components, representing corresponding pure JS classes.

[React] Added tooltipContent and labelContent properties to all chart components.

[TransposedGrid] Added support for CollectionView.getError in TransposedGrid controls.

[FlexChart] Text at the center of pie/doughnut chart: new properties innerTextinnerTextStyle of FlexPie.

[DropDown] Added DropDown.clickAction property to customize click actions.

Improved saveFile method to handle large (>2M) files.

Improved applyTemplate method to handle templated formats in IE.

Read the full Build 5.20193.646 release

_________________________________________________________________

Wijmo 2019 v3 - November 13, 2019

Wijmo's third release of 2019 has landed. Wijmo offers fast and flexible JavaScript UI components for every framework. This major release includes React, Vue, and PureJS FlexGrid Cell Templates, and two-way bindings that simplify the creation of input forms. The new release offers a new API for JS FlexGrid, MultiRow improvements (that allow headers with multiple header rows and define custom layouts) and more.

React FlexGrid Cell Templates

One of the most popular features in our Angular FlexGrid is Cell Templates. We now have this powerful feature available in React FlexGrid and Vue FlexGrid.

Cell Templates allow for limitless templates with declarative markup and binding expressions in any cell of the grid.

Cell Templates make customizing any cell in FlexGrid very easy. Here is an example of rendering a flag image in the country column.

<wjGrid.FlexGridColumn header="Country" binding="country" width="*">  
                <wjGrid.FlexGridCellTemplate  
                    cellType="Cell"  
                    template=(context) => {  
                        return <React.Fragment>  
                           <img src={`resources/${context.item.country}.png`} />  
                           {context.item.country}  
                        </React.Fragment>  
                     } />  
            </wjGrid.FlexGridColumn>
            

As you can see, the fragment in the Cell Template can contain any markup, including HTML, bindings, and even other components.

Vue FlexGrid Cell Templates

Just like in Angular and React, now you can use Cell Templates in our Vue FlexGrid. These Cell Templates allow you to add custom content to any cell in our Vue datagrid.

Here is an example (similar to the React example above) of rendering a flag image in the country column.

<wj-flex-grid-column header="Country" binding="country" width="*">  
                <wj-flex-grid-cell-template cellType="Cell" v-if="customCell" v-slot="cell">    
                    <img :src="'resources/' + cell.item.country + '.png'" />                         
                      
                </wj-flex-grid-cell-template>  
            </wj-flex-grid-column>
            

Two-way Bindings in Wijmo Vue Components

Two-way bindings are a powerful mechanism that simplifies the creation of input forms. Vue offers two different syntaxes for declaring two-way bindings, the v-model directive, and the sync binding modifier. Wijmo for Vue input components support both of them, so you can choose between them depending on your needs.

PureJS FlexGrid Cell Templates

We added a new API to our pure JS FlexGrid. Our Column class has a new cellTemplate property that allows custom rendering of data cells without using the formatItem event.

Here is an example of rendering a flag image in the country column.

<pre>columns: [  
              {  
                header: 'Country', binding: 'country', width: '*',  
                cellTemplate: '<img src="resources/${item.country}.png"/> ${text}'  
              }]</pre>
            

FlexGrid Multi-Column Sort

In 2019 v3, we changed the allowSorting property to an enumeration with the following values:

• AllowSorting.None: Users cannot sort the grid by clicking the column headers. This is the same as setting allowSorting to false in previous versions.
• AllowSorting.SingleColumn: Users may sort the grid by a single column at a time. Clicking the column header sorts the column or flips the sort direction. Ctrl+Click removes the sort. This is the same as setting allowSorting to true in previous versions.
• AllowSorting.MultiColumn: Users may sort the grid by multiple columns at a time. Clicking the column header sorts the column or flips the sort direction. Ctrl+Click removes the sort for that column. Ctrl+Shift+Click removes all sorts.

When sorting on multiple columns, the grid shows the sort order in the column headers, next to the sort direction glyph:

FlexGrid Pinned Columns

In 2019 v3, we added an allowPinning property that adds pin glyphs to the column headers. Clicking the pin freezes or un-freezes the column:

FlexGrid Full Search

In 2019 v3, we added a new wijmo.grid.search module with aFlexGridSearch control that provides a full-text search/filter interface. As users type into the FlexGridSearch control, it filters the items based on the search text and automatically highlights the matches:

As you can see in the image, FlexGridSearch control can be used together with the FlexGridFilter component.

The FlexGridSearch control was inspired by the discussion in the Add a Data Grid Search Panel blog.

TransposedGrid

In regular grids, each item is represented by a row with columns that represent the item properties.

In transposed grids, each item is represented by a column with rows that represent the item properties.

We have added a new wijmo.grid.transposed module with a TransposedGrid control where data items are shown as columns and their properties as rows. People have used FlexGrid's API to create similar views, but our new TransposedGrid control makes it even easier.

Saving CSV Files

In 2019 v3, we made saving CSV files even easier and more powerful by adding two features:

1. We added a saveFile method to Wijmo core so you can easily save text files without having to copy the same boilerplate code over and over.
2. The grid's getClipString method now has an options parameter that allows you to specify exactly how you want the clip string to be generated. The options available are listed below.

With these changes, you can save CSV files using two lines of code:

<pre>// get clip string (current selection, with column headers)  
             const clipString = grid.getClipString(null, options, true, false);  
            
             // save to a file  
             saveFile(clipString, 'flexgrid.csv');</pre>
            

These are the options available in the ClipStringOptions enumeration:

• ClipStringOptions.Default: Use default options (tabs as cell separators, formatted/visible/unquoted cells). This is the format used internally when copying/pasting to the clipboard.
• ClipStringOptions.CSV: Use commas as cell separators (CSV format). This is the default format used for exporting CSV files.
• ClipStringOptions.QuoteAll: Quote all cells. Instead of adding quotes only to cells that contain commas and quotes, wrap all cells in quotes. This makes the output file a little easier to parse.
• ClipStringOptions.SkipMerged: Skip cells that have been merged over (like Excel). This makes the output file a little easier to read in some cases.
• ClipStringOptions.Unformatted: Export unformatted values. This format retains the full precision of numeric values, as opposed to saving only the formatted values.
• ClipStringOptions.InvisibleRows: Include invisible and collapsed rows in the output. By default, invisible and collapsed rows are not included.
• ClipStringOptions.InvisibleColumns: Include invisible columns in the output. By default, invisible columns are not included.
• ClipStringOptions.InvisibleCells: Include invisible rows and columns in the output.

FlexGrid Enhancements

• Collapsible Column Groups:
  Added the ability to create collapsible column groups declaratively. This is done by setting the columns property (or the columnGroups property) to an array containing column definitions where the definitions contain a 'columns' collection of child columns.

• Added a defaultTypeWidth static property that allows specifying the default width for auto-generated grid columns based on their data types.

• Improved Clipboard Support: Added a copyHeaders property that allows you to specify whether the grid should include row and/or column headers when copying data to the clipboard.

• RowDetail Frozen Cell Support: Allow detail cells to span across frozen boundaries

MultiRow Enhancements

• MultiRow Aggregated Groups: Added a multiRowGroupHeaders property that allows headers with multiple header rows (especially useful for displaying aggregates)

• MultiRow Column Header Layouts: Added a headerLayoutDefinition property that allows you to define custom layouts for the column headers

Stepline Chart

StepLine Charts are most commonly used to visualize change at specific points in time. They are useful for seeing the size of the change in value as well as patterns in change over time. We recently added new Step, StepSymbols and StepArea chart types to our FlexChart control.

CollectionView Filters

Added a filters property that contains an array of filter functions. This allows you to chain filters with multiple, independent filter functions.

Improved Typings

We made some big improvements to our type information in Wijmo. These changes will make Wijmo easier to use and it will help you find bugs in your code much more easily.

Here you can see better type information in callback params (which previously was just the generic Any type).

Additional Changes

• Added type information to several callbacks and properties that used to be of type 'any'.

• Added generic types to the sender and arguments of the Event class.

• Added a generic type to the CollectionView and ObservableArray classes, so you can write:
  var cv = new CollectionView(data);
  var customer = cv.currentItem; // customer is an instance of Customer

• The additional type information provides improved compile-time error-checking and IntelliSense,
  so you can write better code faster.

Check out the Wijmo 2019 v3 Release