Wijmo's third release of 2019 has landed. Wijmo offers fast and flexible JavaScript components for every framework. This major release includes FlexGrid Cell Templates for React and Vue (similar to what we offer in Angular). You can also create Cell Templates in PureJS by using the new column.cellTemplate property. We have also added two-way bindings to our Vue components that simplifies the creation of input forms. We have several improvments to FlexGrid, from Column Pinning to Multi-Column Sorting, and much more. We have improved our TypeScript typings to make Wijmo even easier to use in VSCode.
This is a huge release that includes some great new features! Let's dive in...
Wijmo Supports Angular 9 and the Ivy Compiler
We are happy to announce that Wijmo supports Angular 9! This release (Wijmo Build 5.20193.637) adds support for the Angular v9.0.0-rc.2 release. Wijmo is now compatible with the new Ivy Compiler. We have been working closely with the Angular team to make sure we can support the new Ivy Compiler so that our customers can use Angular v9 when it releases. The Angular team helped us with some recommendations in our module packaging and fixed some compiler issues as well.
So thanks to the Angular and Wijmo teams, you can start building even faster enterprise applications with the Ivy Compiler.
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.
- Learn more about our React Cell Templates
- Visit our React Cell Templates Demo
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'" />
{{cell.item.country}}
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
- Learn more about our Vue Cell Templates
- Visit our Vue Cell Templates Demo
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.
You can find examples of Wijmo two-way bound controls in this live sample, where ComboBox and InputNumber are used in the cell edit templates.
- Vue Two-way Bindings Demo
- Learn more about Two-way Bindings in Wijmo Vue Components
PureJS FlexGrid Cell Templates
Not to be confused with our Angular, React or Vue 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.
Column.cellTemplates are much more simple than our Angular, React or Vue Cell Templates. They only allow for a template literal string to be declared. You can put HTML elements in it or even binding expressions that will be parsed by our glbz method and rendered in the cells.
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
The FlexGrid relies on the CollectionView class for sorting data. In previous versions, the grid's allowSorting property was a Boolean that determined whether users could sort columns by clicking on their header cells. This mechanism allowed users to sort on a single column at a time.
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
The FlexGrid always supported freezing rows and columns through code but did not expose a UI for controlling this feature.
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-text Search
The FlexGrid has always supported column-based, Excel-style filtering using the FlexGridFilter component.
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
The FlexGrid has always supported saving the grid data to different formats. Saving to CSV is often a good option because you don't need any additional libraries, and the output file can be opened in Excel.
In 2019 v3, we made saving CSV files even easier and more powerful by adding two features:
- 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.
- 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.
More 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.
StepLine Chart Samples - JavaScript, Angular, React, and Vue:
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).
Other changes we made in this release:
- 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.
