What’s new in Wijmo build 84
I am excited about this new build because it has many small but very useful and cool features that cover all of the main Wijmo modules.
FlexGrid
We have added two features to the FlexGrid that had been on the roadmap for a long time: showMarquee and showSelectedHeaders. Both properties affect the way the grid shows the current selection, and both draw inspiration from Microsoft Excel. The first, showMarquee, is a Boolean property that causes the grid to display a rectangular element enclosing the current selection. The second, showSelectedHeaders, causes the grid to highlight row and/or column headers that correspond to the current selection. The images below show the effect of these new properties: 
// default settings:
showMarquee = false;
showSelectedHeaders = wijmo.gridHeadersVisibility.None;
// new properties:
showMarquee = true;
showSelectedHeaders = wijmo.gridHeadersVisibility.All;
Notice how the bottom grid looks more like Excel. The appearance of the marquee and the selected cell headers can be customized using CSS. But in most cases you won’t have to do that, because all our themes already take care of that for you. For example, the images below show the same grid using our dark and zen themes: 
// dark theme:
wijmo.theme.dark.min.css
// zen theme:
wijmo.theme .zen.min.css
FlexChart
We have added scaling to our Globalization class. This feature allows you to add scaling modifiers to formats so numbers are automatically converted to thousands, millions, billions, and so on. Although that is not a chart-specific feature, it is especially useful with charts. The example below shows a typical chart, created using population and GDP data: Default chart settings 
The data and the chart are correct, but the numbers along the axes are hard to read and take up too much room. We could write some code to convert the GDP data into billions and the population data into millions, but it is easier to simply add scaling specifiers to the format property of both axes. For example, the formats ‘n,’ and ‘n,,’ will divide the GDP figures by a thousand and the population by a million. The chart below is based on the same data, but uses scaling formats and logarithmic axes: 
// scaling formats and log axes
axisY.format = ‘n,’;
axisX.format = ‘n,,’;
axisY.logBase = 10;
axisX.logBase = 10;
Notice how setting these four properties was enough to product a chart that is much easier to understand. The scaling format modifiers can be used with all Wijmo controls, for formatting as well as for parsing large values.
InputDate
One of my favorite improvements in build 84 is the itemValidator property we added to the Calendar and InputDate controls. This property is a function that takes a date as a parameter and returns a Boolean value that specifies whether the data is valid or not. Invalid dates are automatically disabled cannot be selected by the user. They also get a ‘wj-state-invalid’ class attribute to they can be styled using CSS. To show how this works, suppose you want users to select a date that is not a weekend or a holiday. You could do it this way:
inputDate.itemValidator = function (date, element) {
var day = date.getDay();
if (day == 0 || day == 6) return false; // no weekends
if (getHoliday(date)) return false; // no holidays
return true; // not a weekend or a holiday, this date is OK
}
You could also use the itemFormatter property to show the name of the holidays and to format them differently from weekends and weekdays:
inputDate.itemFormatter = function (date, element) {
var weekday = date.getDay(),
holiday = getHoliday(date);
wijmo.toggleClass(element, 'date-weekend', weekday == 0 || weekday == 6);
wijmo.toggleClass(element, 'date-holiday', holiday);
element.title = holiday;
}
The image below shows the result: 
// InputDate control with itemValidator and itemFormatter
Notice how weekends and the Labor Day holiday (first Monday in September) stand out. Those dates cannot be selected or entered by typing, so the selected date is guaranteed to be valid. The itemValidator property is so useful I was embarrassed when it was requested by a user. But I am happy it is here now…
Gauges
In build 84, we also improved our Gauge controls. First, we improved touch support, so now it’s much easier to use linear and radial gauge control as sliders on mobile devices. Second, we added a thumbSize property that causes the control to display a circle that indicates the current value, even if the numeric value is not visible. Both changes are small, but they have a drastic effect on the usability of gauges as sliders. The image below shows two sets of linear gauges, with default settings and with visible thumb elements: 
// linear gauges:
// default styling or
// visible thumb elements
Wijmo Core
In addition to improvements in most of our main controls, we made improvement the core Wijmo module. One of these improvements was the addition of scaling specifier to numeric formats (already mentioned above when we discussed the chart). Scaling is a simple feature that really comes in handy when you are dealing with large numbers. The most common use scenario is with chart axes, as shown in the example above. But it can also be used in grids, gauges, and input controls (scaling works when formatting and also when parsing numbers). Another improvement that affects all controls is better focus management. The Control class now monitors the focus state and automatically adds a ‘wj-state-focused’ class to the control’s host element when the control contains the focus. This makes it possible to create CSS rules that change the appearance of controls or their parts in response to the focus state, something that is not possible to do using plain CSS because the actual focus may be on a contained element rather than on the control’s host element. For example, consider the following CSS:
.custom-gauge.wj-gauge circle.wj-pointer {
fill: #404040;
stroke: none;
transform-origin: center center 0px;
transform: scale(1);
transition: transform .5s;
}
.custom-gauge.wj-gauge.wj-state-focused circle.wj-pointer {
fill: red;
stroke: black;
stroke-width: 3px;
transform: scale(1.3);
transition: transform 1s, fill 0.5s, stroke 0.5s;
}
The first rule is applied to the thumb element when the gauge control does not have the focus. The second rule changes the size, fill, and stroke attributes of the thumb element when the control gets the focus. When the user selects the gauge, the thumb grows and changes color to indicate the gauge is active. It’s a really nice touch, and very easy to achieve thanks to the ‘wj-state-focused’ class added to the host element by the Control class.
Get Started
You can get started with build 84 by downloading Wijmo Enterprise.
MESCIUS inc.