Wijmo 5 Reference Guide

Wijmo 5 Reference
Version 5.20151.42
Created on 4/3/2015
Wijmo 5
April 2015
1/535
Welcome to Wijmo 5
Wijmo 5 represents a new generation of JavaScript controls. It takes full advantage of the latest HTML5
technologies, making no compromises to support legacy browsers. The result is a set of controls that are
much faster, smaller, and easier to use than what was possible before.
Wijmo 5 has no dependencies other than EcmaScript5. You can use it without jQuery, jQueryUI, or any
other frameworks.
Wijmo 5 requires modern browsers (IE9 or better) to leverage the following technologies:
ECMAScript 5: The ECMAScript 5 standard adds support for property getters and setters. This
may seem like a small change, but it makes a huge difference. For example, instead of writing
control.value(control.value() + 1) to increment the value of a property, now you can
write control.value++. The ECMAScript 5 standard adds many other significant
enhancements, like the bind method that allows you to specify the value of the 'this' parameter in
your callbacks. There are also new array methods that can save a lot of time.
SVG: Modern browsers implement SVG, which makes it easier to create amazing visual
representations of your data. Wijmo leverages SVG directly, without the overhead that would be
required if it had to support legacy browsers.
TypeScript: We wrote Wijmo in TypeScript, taking advantage of type-checking and OOP
concepts such as modules, classes, and inheritance. The output is still pure JavaScript, so you can
use either language in your own development work.
Mobile Devices: Wijmo 5 was designed with mobile browser support built in from the start.
Responsive layouts and touch support were major considerations in the design and
implementation of every Wijmo 5 control.
AngularJS: AngularJS is one of the most popular and powerful JavaScript application frameworks
today. We believe it will continue to gain popularity and will set the direction of the next Web. For
this reason, we ship and maintain AngularJS directives for all of our controls, and use it in most of
our samples. For more information, see the Using Wijmo 5 in AngularJS Applications topic. You
can also use Wijmo with other frameworks. In addition to AngularJS, we also ship a KnockoutJS
module, and may add official support for other frameworks in the future based on customer
requests.
Bootstrap: Bootstrap is one of the easiest, most powerful, and most popular CSS frameworks
available. We use it in our samples and in our on-line documentation. If you use Bootstrap, be
assured that Wijmo 5 will blend right in with no extra effort required on your part.
We do realize that some scenarios require support for legacy browsers (IE8 and earlier). For that reason,
we will continue to maintain versions of the original Wijmo for as long as our customers require it. If you
need to support IE8 and earlier, keep using the original Wijmo. We will maintain and support it as usual. If
you are ready to move to HTML5 and modern browsers, Wijmo 5 is for you!
Wijmo 5
April 2015
2/535
Referencing Wijmo 5 in Your Applications

To use Wijmo 5 in your applications, include it by adding a few references to your HTML pages.
The minimal set of files required by any Wijmo 5 application is:
wijmo.js: Contains the Wijmo 5 infrastructure including the Globalize, Event, Control, and
CollectionView classes.
wijmo.css: Contains the CSS rules used for styling all Wijmo 5 controls.
In addition to these, include one or more additional files, depending on which components you use:
wijmo.grid.js: Contains the FlexGrid control.

wijmo.chart.js: Contains the FlexChart and FlexPie controls.
wijmo.input.js: Contains several input controls, including ComboBox, AutoComplete, InputDate,
InputTime, InputNumber, InputMask, ListBox, Menu, and Calendar controls.
wijmo.gauge.js: Contains several gauge controls, including LinearGauge, RadialGauge, and
BulletGraph.
angular.js: Google's AngularJS framework, required for AngularJS applications.
wijmo.angular.js: Contains AngularJS directives that allow you to use Wijmo 5 controls directly in
your markup.
wijmo.culture.[CultureName].js: Contains culture-specific files used to develop applications in
languages other than American English.
wijmo.theme.[ThemeName].css: Contains CSS rules used to customize the appearance of the
Wijmo 5 controls.
As for the actual location of the files, you have two options. You may download Wijmo and copy the
required files to the appropriate folders within your application, or you may reference Wijmo files hosted
in the cloud, on our Content Delivery Network (CDN). The sections below show examples.
Deploying Wijmo locally

Download the Wijmo files and copy them to a folder within your application. If you place the Wijmo script
files in a folder called "scripts/vendors," and the css files in a folder called "styles," you can add the
following lines to your HTML pages:

<script src="scripts/vendor/controls/wijmo.min.js" type="text/javascript"></script>
<link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" />

<script src="scripts/vendor/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js" type="text/javascript"></script>

<link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet" type="text/css" />

<script src="scripts/vendor/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script>
Wijmo 5
April 2015
3/535

<script src="scripts/vendor/angular.min.js" type="text/javascript"></script>
<script src="scripts/vendor/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>
Deploying Wijmo from CDN

In this case, there is nothing to download. Simply add the following lines to your HTML pages:

<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20142.15/styles/wijmo.min.css" rel="stylesheet" type="text/css" />

<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.gauge.min.js" type="text/javascript"></script>

<link href="http://cdn.wijmo.com/5.20142.15/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"
type="text/css" />

<script src="http://cdn.wijmo.com/5.20142.15/controls/cultures/wijmo.culture.ja.min.js "
type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"
<script src="http://cdn.wijmo.com/5.20142.15/interop/angular/wijmo.angular.min.js"
The CDN version includes a Wijmo 5 watermark element at the bottom right of the screen. If you don't
want to display the watermark, then you must deploy Wijmo locally as described above.
Note: The order of the references is important. The wijmo.js module must be the first, followed by the
control modules, control extensions, and the wijmo.angular module should be included last.
Wijmo 5
April 2015
4/535
Creating Wijmo 5 Controls

Every Wijmo 5 control is associated with an HTML element that hosts it on the page. To create a control,
you start by adding a div element to the page, then use JavaScript code to instantiate the control and
bind it to the host element.
For example, this fiddle shows how you can create a FlexGrid and a FlexChart and bind them to a small
data source:
Creating Controls
The fiddle includes all the necessary references (as described in the Referencing Wijmo 5 in your
Applications topic). The HTML part of the fiddle declares two div elements named 'theGrid' and 'theChart':
<h1>Hello</h1>
<p>This is a FlexGrid control:</p>
<div id="theGrid" style="width:100%;height:auto;"></div>
<p>And this is a FlexChart:</p>
<div id="theChart" style="width:100%;height:350px;"></div>
<p>That's it for now...</p>
The JavaScript part of the fiddle executes when the document has loaded. It creates a small data set, binds
the controls to the div elements, then binds the controls to the data set:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
downloads: Math.round(Math.random() * 20000),
sales: Math.random() * 10000,
expenses: Math.random() * 5000
});
}
// create grid and show data
var grid = new wijmo.grid.FlexGrid('#theGrid');
grid.itemsSource = data;
// create a chart and show the same data
var chart = new wijmo.chart.FlexChart('#theChart');
chart.initialize({
itemsSource: data,
bindingX: 'country',
series: [
{ name: 'Sales', binding: 'sales' },
{ name: 'Expenses', binding: 'expenses' },
{ name: 'Downloads', binding: 'downloads', chartType: wijmo.chart.ChartType.LineSymbols } ]
});
});
Wijmo 5
April 2015
5/535
</script>
Notice that the size and position of the control are determined by the host element. In this case, we set
the grid's height to "auto," causing it to automatically size itself to its contents. We can also set the height
to a fixed value, and the grid automatically shows scrollbars if necessary.
In most cases, you use a CSS framework such as Bootstrap to lay out your pages, and you lay out the
controls exactly like any other HTML elements.
You can get a reference to the element that hosts a Wijmo control using the control's hostElement
property. You can get a reference to the control being hosted by a given element using the
Control.getControl(element) static method.
For more details on control sizing and layout, see the Sizing and Styling Controls topic.
You can use div elements as hosts for all Wijmo controls. Additionally, you can use input elements as
hosts for the most input controls, and select elements as hosts for the ListBox, ComboBox,
AutoComplete, and Menu controls.
Wijmo 5
April 2015
6/535
Sizing and Styling Controls

Wijmo 5 controls rely on CSS for styling, appearance, and sizing.
Because of this, Wijmo 5 controls don't have properties such as "width," "height," or "background." Styling
and layout is handled using CSS. If you are used to .NET controls, including WinForms and XAML, this
may feel a little strange at first. But once you get used to CSS, you will find that it is very easy and
extremely powerful. You can easily style all instances of a control type, or style a specific control, all with a
few lines of extremely re-usable CSS.
Sizing Controls
The size and position of the controls are determined by the hosting element, which follows the usual
HTML/CSS rules. For example, the CSS rule below stipulates that elements with class "grid" should have
their height calculated automatically to fit the grid content, up to a limit of 300 pixels:
.grid {
height: auto;
max-height: 300px;
}
The fiddle below shows how this rule affects two FlexGrid controls. The first grid has only a few items, so
it is resized to fit its content (like a regular HTML table). The second grid has a lot more items, so its
height is automatically set to 300 pixels and it becomes scrollable.
Sizing Controls
The first grid has only five elements to show. Since that requires less than 300 pixels, the grid shows all
elements and doesn't need scrollbars. The second grid contains 10,000 items. That exceeds 300 pixels, so
the grid becomes scrollable.
Styling Controls
Control styling follows the same logic as sizing. Use CSS to override fonts, colors, margins, padding, and
pretty much any visual aspect of any part of the controls.
For example, this fiddle shows how you can modify the appearance of the FlexGrid control using CSS:
Styling Controls
Notice how now the grids now have a plain black and white look. To do this, we change the CSS and
specify the styles for elements within the grid. Wijmo controls assign class names to their constituent
elements, which enables easy and flexible styling.
Wijmo 5
April 2015
7/535
For example, the CSS below creates cell elements (elements with class "wj-cell" contained in elements with
class "grid") with no border and a white background:
.grid .wj-cell {
border: none;
background-color: #fff;
}
Code-based Styling
Although the Wijmo 5 controls rely on CSS for layout and sizing, there are a few situations where you may
want to use code to get total control of some aspects of a control.
For example, the FlexGrid calculates the row heights based on the font being used to render the control.
But you may want to override that CSS-based setting and specify the exact row heights yourself. You can
do this by setting the following properties:
// set the height of rows in the scrollable area
flex.rows.defaultSize = 34;
// set the height of rows in the column header area
flex.columnHeaders.rows.defaultSize = 40;
This is shown in the fiddle below, which also uses CSS to achieve a very specific, customized look for the
grid. The fiddle uses the "itemsSourceChanged" event to get a reference to the FlexGrid control. This is a
convenient way to get the control when it is created with directives. If we were using pure JavaScript code,
this would not be necessary.
Code-based Styling
Wijmo 5
April 2015
8/535
Globalizing Wijmo 5 Applications

By default, Wijmo formats and parses data using the American English culture. The decimal symbol is a
period, the thousands separator is a comma, and the days of the week are "Sunday" through "Saturday."
If your application targets other cultures, include references to the appropriate Wijmo culture files in your
HTML pages. We include about 10 culture files with Wijmo, and have tools for generating new ones. If you
want to target a culture that is not currently supported, contact us and we will create the file you need.
For example, to localize an application for the German culture, add this line to the head section of the
page:

<script src="http://cdn.wijmo.com/5.20142.0/controls/cultures/wijmo.culture.de.min.js"
This fiddle demonstrates the result. Notice the formatting of grid values and calendar dates.
Globalization
You can edit the values in the grid to see that globalization also works for parsing data. Wijmo's Globalize
class allows you to format and parse values in your applications outside of Wijmo controls as well.
Included Cultures
By default, Wijmo uses the American English culture, but for your convenience, we have included several
other cultures. They are located on the CDN, but you can also find the files in your installation folder in
\Dist\controls\cultures. The following cultures are currently included.
de German
en English
es Spanish
fr French
it Italian
ja Japanese
ko Korean
pt Portuguese
ru Russian
zh Chinese
Wijmo 5
April 2015
9/535
Using Enumerations in Wijmo 5

Several Wijmo 5 controls have properties that take enumeration values.
For example, the FlexChart's chartType property takes wijmo.chart.ChartType values.
Setting enumeration properties

The recommended way to set enumeration properties is as follows:
// setting the value of an enumeration property
chart.chartType = wijmo.chart.ChartType.Line;
The following alternatives are also valid and produce the same result:
// wijmo.chart.ChartType.Line has value 3:
chart.chartType = 3;
// enumerations are automatically parsed
chart.chartType = 'Line';
Getting enumeration properties

Getting the property will return 3 in all cases. If you want to get the value as a string (to show in the UI for
example), you can do it as follows:
// getting the enumerated value as a number
console.log(chart.chartType); // outputs "3"
// getting the enumerated value as a string
console.log(wijmo.chart.ChartType[chart.chartType]); // outputs "Line"
Converting enumeration values

You can use the enumeration classes to convert between strings and the corresponding numbers by
indexing. For example:
// convert enumeration value to string
console.log(wijmo.chart.ChartType[3]); // outputs "Line"
console.log(wijmo.chart.ChartType[1000]); // outputs "null"
// convert string to enumeration value
console.log(wijmo.chart.ChartType['Line']); // outputs "3"
console.log(wijmo.chart.ChartType['NoSuchValue']); // outputs "null"
Note for .NET Developers
Wijmo 5
April 2015
10/535
The .NET, Enum class provides methods called GetNames and GetValues that return the names and values
defined by any enumeration.
The code below shows how you could implement similar methods to get the names and values defined by
TypeScript enumerations (as used in Wijmo 5):
// get the names defined by an enumeration
function getEnumNames(enumClass) {
var names = [];
for (var key in enumClass) {
var val = parseInt(key);
if (isNaN(val)) names.push(key);
}
return names;
}
// get the values defined by an enumeration
function getEnumValues(enumClass) {
var values = [];
for (var key in enumClass) {
var val = parseInt(key);
if (!isNaN(val)) values.push(val);
}
return values;
}
// sample usage:
var nn = getEnumNames(wijmo.DataType); // returns [ 'Object', 'String', 'Number', 'Boolean', 'Array' ]
var vv = getEnumValues(wijmo.DataType); // returns [ 0, 1, 2, 3, 4 ]
Wijmo 5
April 2015
11/535
AngularJS Directives
We at ComponentOne are big fans of AngularJS, Google's framework for JavaScript applications.
AngularJS provides templating, data-binding, MVVM, web components, and more.
One of the main advantages of AngularJS is that it supports the MVVM pattern, where the application
logic is contained in Models (aka controllers, implemented in JavaScript) and the appearance is contained
in Views (HTML).
To achieve this, AngularJS supports directives, which are custom HTML elements and attributes.
AngularJS ships with a number of built-in directives, and you can easily implement your own much as you
can create your own controls in WinForms or XAML applications.
Wijmo 5 ships with AngularJS directives for all its controls. The directives are defined in the
wijmo.angular.js file, and allow you to write code such as:
<div ng-app="app" ng-controller="appCtrl">
<p>This is a <b>FlexGrid</b> control:</p>
<wj-flex-grid items-source="data">
<wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
<wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
<wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
<wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column>
</wj-flex-grid>
</div>
Using Wijmo 5 in AngularJS Applications

If you want to use Wijmo 5 Angular directives in your project, add references to AngularJS, Wijmo, and
then to Wijmo's AngularJS directives, as described in the Referencing Wijmo 5 in Your Applications topic.
Once you have the references in place, tell AngularJS that your app depends on the "wj" module using
code like this:
var app = angular.module('app', ['wj']);
With the app defined, you can go on to add a controller to provide data and logic as you would with any
AngularJS application.
All Wijmo 5 directives start with the "wj" prefix, followed by the control's class name using dashes instead
of camel-case. The directives have attributes that match the control's properties, following the same
convention.
Some of the directives support nested sub-directives. For example, the wj-flex-grid directive may contain
one or more wj-flex-grid-column directives, and the wj-flex-chart directive may contain one or more
wj-flex-chart-series directives. This results in a rich and expressive markup syntax that is very similar to
Wijmo 5
April 2015
12/535
XAML. This flexibility is essential in order to achieve the true benefits of MVVM. The appearance and
layout of the controls are defined by the view; the controller only provides the data.
The fiddle below shows how this works:
Wijmo Directives for AngularJS
For more examples that use Wijmo 5 with AngularJS, see our Demos.
Wijmo 5
April 2015
13/535
What Is LESS?
LESS is a dynamic style sheet language that extends CSS through the addition of variables, mixins,
operations and nested rules.
Variables: Reusable common values, such as color and style information.

Mixins: Properties from existing styles that you use inside new styles.
Operations: Mathematical creation and manipulation of CSS properties.
Nested rules: CSS selectors placed inside of other CSS selectors.
LESS is also referred to as a CSS preprocessor because you can write style sheets in the extended LESS
language first, and then compile them into plain CSS. LESS is open-source and you can run it on the
client-side or server-side, or compile it and output it as plain CSS.
For downloads, detailed documentation, and resources, see the LESS web site: http://lesscss.org.
Using LESS
You can use LESS from the command line, download it as a JS file for in-browser use, or use a third party
application.
Command line
You can find specific instructions and a list of command-line prompts on the LESS web site under
Command Line Usage.
In-browser
1.
2.
3.
Download a copy of less.js and save it.

Create a style sheet and save it using the .less file extension instead of the usual .css extension.
Add the following code within the <head> element of your HTML page:
<link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="less.js" type="text/javascript"></script>
Note: In the link element, you must replace the typical rel="stylesheet" with rel="stylesheet/less" in order
for LESS to compile in the browser. LESS style sheets must come before the LESS script.
When the page loads, less.js processes and compiles your LESS code live in the browser. While this is a
convenient way to start developing with LESS, it is not recommended in production environments where
performance is important.
Third party applications
Wijmo 5
April 2015
14/535
It is advisable to compile LESS into plain CSS for production environments. If you want something more
than the command line prompts offer, a wide array of third party tools is available. The LESS web site has
a list of compilers and editors for various platforms and IDEs. See Online LESS Compilers.
Customizing Variables
We built Wijmo 5 themes with LESS and make the source files available along with their compiled CSS
counterparts. You can update existing themes and create new ones using the provided files.
The Wijmo 5 themes have this file naming structure: wijmo.theme.ThemeName.css. To update a theme
using LESS, find the corresponding wijmo.theme.ThemeName.less file, modify it, and re-compile it using
one of the methods listed above.
Every theme is built upon a base set of colors and style options. We declare variables for these common
values that we reuse throughout the theme. Note that LESS variables start with the @ symbol.
@background: #f3f3f3;
@header: #54443b;
@primary: #2780ec;
@text: #26211f;
@button: #5f534c;
@tool-tip: #e5d9cf;
@grid-cell-border: true;
@grid-right-side-col: none;
@border-radius: 4px;
@background-grad: false;
@button-grad: false;
@header-grad: false;
In addition to base variables, we use import statements to include additional LESS files to use as mixins.
These contain color functions, style mixins, and mixin guards.
@import
@import
@import
@import
"mixins/color-functions";
"mixins/guards";
"mixins/styles";
"mixins/chart";
The color functions generate a wider pallet of additional colors based on the initial colors selected and the
mixin guards are designed to ensure contrast. The mixin guards evaluate colors based on their lightness
and write CSS accordingly: If an area's background color is greater than 50% in lightness, the text in that
area renders in a darker color, and vice versa.
Creating New Themes

You can create new themes by duplicating an existing theme and then modifying the base set of colors
and style options. Here is a key to the color and style variables.
@background - Background color for the control.
@header - Background color for control headers (e.g. FlexGrid, FlexChart).
@primary - Primary accent color used throughout the theme.
Wijmo 5
April 2015
15/535
@text - Default text color.

@button - Background color for buttons.
@tool-tip - Background color for tooltips.
@border-radius - Global border radius setting for all controls.
@grid-cell-border - Toggle for FlexGrid cell borders. Set to 'false' to turn off all grid borders.
@grid-right-side-col - Background color for FlexGrid right side column (none by default).
@background-grad - Toggle for control background color gradient. Set to 'true' to add a gradient.
@button-grad - Toggle for button background color gradient. Set to 'true' to add a gradient.
@header-grad - Toggle for header background color gradient. Set to 'true' to add a gradient.
Deploying New Themes

Once you create a new theme and output it as plain CSS, place it in the styles directory and include it in
your project. Now you can link to it from any HTML page that contains Wijmo 5 controls.
<link href="styles/NewTheme.css" rel="stylesheet" type="text/css">
Wijmo 5
April 2015
16/535
Module wijmo
File
wijmo.js
Contains utilities used by all controls and modules, as well as the Control and Event classes.
Wijmo 5
April 2015
17/535
Classes
Name
Description
Binding
Provides binding to complex properties (e.g. 'customer.address.city')
CancelEventArgs
Provides arguments for cancellable events.
Clipboard
Static class that provides utility methods for clipboard operations.

The Clipboard class provides static copy and paste methods that can be
used by controls to customize the clipboard content during clipboard
operations.
For example, the code below shows how a control could intercept the
clipboard shortcut keys and provide custom clipboard handling:
rootElement.addEventListener('keydown', function(e) {
// copy: ctrl+c or ctrl+Insert
if (e.ctrlKey && (e.keyCode == 67 || e.keyCode == 45)) {
var text = this.getClipString();
Clipboard.copy(text);
return;
}
// paste: ctrl+v or shift+Insert
if ((e.ctrlKey && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45)) {
Clipboard.paste(function (text) {
this.setClipString(text);
});
return;
}
});
Color
Color class.
The Color class parses colors specified as CSS strings and exposes their
red, green, blue, and alpha channels as read-write properties.
The Color class also provides fromHsb and fromHsl methods for
creating colors using the HSB and HSL color models instead of RGB, as
well as getHsb and getHsl methods for retrieving the color components
using those color models.
Finally, the Color class provides an interpolate method that creates
colors by interpolating between two colors using the HSL model. This
method is especially useful for creating color animations with the
animate method.
Control
Base class for all Wijmo controls.

The Control class handles the association between DOM elements and
the actual control. Use the hostElement property to get the DOM
element that is hosting a control, or the getControl method to get the
control hosted in a given DOM element.
Wijmo 5
April 2015
18/535
Name
Description
The Control class also provides a common pattern for invalidating and
refreshing controls, for updating the control layout when its size changes,
and for handling the HTML templates that define the control structure.
DateTime
Provides date and time utilities.
Event
Represents an event.
Wijmo events are similar to .NET events. Any class may define events by
declaring them as fields. Any class may subscribe to events using the
event's addHandler method and unsubscribe using the removeHandler
method.
Wijmo event handlers take two parameters: sender and args. The first is
the object that raised the event, and the second is an object that contains
the event parameters.
Classes that define events follow the .NET pattern where for every event
there is an on[EVENTNAME] method that raises the event. This pattern
allows derived classes to override the on[EVENTNAME] method and
handle the event before and/or after the base class raises the event.
Derived classes may even suppress the event by not calling the base class
implementation.
For example, the TypeScript code below overrides the onValueChanged
event for a control to perform some processing before and after the
valueChanged event fires:
// override base class
onValueChanged(e: EventArgs) {
// execute some code before the event fires
console.log('about to fire valueChanged');
// optionally, call base class to fire the event
super.onValueChanged(e);
// execute some code after the event fired
console.log('valueChanged event just fired');
}
EventArgs
Base class for event arguments.
Globalize
Class that implements formatting and parsing of numbers and Dates.

By default, Globalize uses the American English culture. To switch
cultures, include the appropriate wijmo.culture.*.js file after the wijmo
files.
Point
Class that represents a point (with x and y coordinates).
PropertyChangedEventArgs Provides arguments for property change events.

Rect
Class that represents a rectangle (with left, top, width, and height).
Size
Class that represents a size (with width and height).
Wijmo 5
April 2015
19/535
Name
Description
Tooltip
Provides a pop-up window that displays additional information about

elements on the page.
The Tooltip class can be used in two modes:
Automatic Mode: Use the setTooltip method to connect the Tooltip to
one or more elements on the page. The Tooltip will automatically
monitor events and display the tooltips when the user performs actions
that trigger the tooltip. For example:
var tt = new wijmo.Tooltip();
tt.setTooltip('#menu', 'Select commands.');
tt.setTooltip('#tree', 'Explore the hierarchy.');
tt.setTooltip('#chart', '#idChartTooltip');
Manual Mode: The caller is responsible for showing and hiding the
tooltip using the show and hide methods. For example:
element.addEventListener('click', function () {
if (tt.isVisible) {
tt.hide();
} else {
tt.show(element, 'This is an important element!');
}
});
TooltipEventArgs
Wijmo 5
Provides arguments for the popup event.
April 2015
20/535
Interfaces
Name
Description
IEventHandler Represents an event handler. Event handlers are functions invoked when events are
raised.
Every event handler has two arguments:
sender is the object that raised the event, and

args is an optional object that contains the event parameters.
IQueryInterface
Allows callers to verify whether an object implements an interface.
Wijmo 5
April 2015
21/535
Enumerations
Name
Description
Aggregate Specifies the type of aggregate to calculate over a group of values.

DataType Enumeration with value types.
Use the getType method to get a DataType from a value.
Key
Enumeration with key values.

This enumeration is useful when handling keyDown events.
Wijmo 5
April 2015
22/535
Properties
Name
Type
Description
culture
any
Gets or sets an object that contains all localizable strings in

the Wijmo library.
The culture selector is a two-letter string that represents an
ISO 639 culture.
Wijmo 5
April 2015
23/535
Methods
Name
Parameters
Description
addClass(e, className)
e (HTMLElement): Element
that will have the class added.
className (string): Class to
add to the element.
Adds a class to an element.
Returns: void
animate(apply, duration, step) apply (Function): Callback
function that modifies the
document. The function takes a
single parameter that
represents a percentage.
duration (number): The
duration of the animation, in
milliseconds.
(default value: 400)
step (number): The interval
between animation frames, in
milliseconds.
(default value: 10)
Returns: An interval id that you
can use to suspend the
animation.
Calls a function on a timer with a

parameter varying between zero and
one.
Use this function to create animations
by modifying document properties or
styles on a timer.
For example, the code below changes
the opacity of an element from zero to
one in one second:
var element =
document.getElementById('someElement');
animate(function(pct) {
element.style.opacity = pct;
}, 1000);
The function returns an interval ID that

you can use to stop the animation.
This is typically done when you are
starting a new animation and wish to
suspend other on-going animations
on the same element. For example, the
code below keeps track of the interval
ID and clears if before starting a new
animation:
var element =
document.getElementById('someElement');
if (this._animInterval) {
clearInterval(this._animInterval);
}
var self = this;
self._animInterval =
animate(function(pct) {
element.style.opacity = pct;
if (pct == 1) {
self._animInterval = null;
}
}, 1000);
Wijmo 5
April 2015
24/535
Name
Parameters
Description
Returns An interval id that you can
use to suspend the animation.
asArray(value, nullOK)
value (any): Value supposed to Asserts that a value is an array.

be an array.
Returns The array passed in.
nullOK (boolean): Whether
null values are acceptable.
(default value: true)
Returns: The array passed in.
asBoolean(value, nullOK)
value (boolean): Value

supposed to be Boolean.
(default value: false)
Asserts that a value is a Boolean.

Returns The Boolean passed in.
Returns: The Boolean passed

in.
asCollectionView(value,
nullOK)
value (any): Array or

ICollectionView.
Asserts that a value is an

ICollectionView or an Array.
Returns The ICollectionView that was
passed in or a CollectionView created
from the array that was passed in.
Returns: The ICollectionView

that was passed in or a
CollectionView created from
the array that was passed in.
asDate(value, nullOK)
value (Date): Value supposed

to be a Date.
Asserts that a value is a Date.

Returns The Date passed in.
Returns: The Date passed in.

asEnum(value, enumType,
nullOK)
value (number): Value

Asserts that a value is a valid setting
supposed to be a member of for an enumeration.
the enumeration.
Returns The value passed in.
enumType (any): Enumeration
to test for.
Returns: The value passed in.
Wijmo 5
April 2015
25/535
Name
Parameters
Description
asFunction(value, nullOK)
value (any): Value supposed to Asserts that a value is a function.

be a function.
Returns The function passed in.
Returns: The function passed
in.
asInt(value, nullOK, positive)

Asserts that a value is an integer.
supposed to be an integer.
Returns The number passed in.
positive (boolean): Whether to
accept only positive integers.
Returns: The number passed
in.
asNumber(value, nullOK,
positive)

Asserts that a value is a number.
supposed to be numeric.
Returns The number passed in.
positive (boolean): Whether to
accept only positive numeric
values.
Returns: The number passed
in.
assert(condition, msg)
condition (boolean):
Throws an exception if a condition is
Condition expected to be true. false.
msg (string): Message of the
exception if the condition is
not true.
Returns: void
asString(value, nullOK)
value (string): Value supposed Asserts that a value is a string.

to be a string.
Returns The string passed in.
Returns: The string passed in.
Wijmo 5
April 2015
26/535
Name
Parameters
Description
asType(value, type, nullOK)
value (any): Value to be

checked.
type (any): Type of value
expected.
Asserts that a value is an instance of a

given type.
Returns The value passed in.
Returns: The value passed in.

changeType(value, type,
format)
value (any): Value to convert.

type (DataType): DataType to
convert the value to.
format (string): Format to use
when converting to or from
strings.
Returns: The converted value,
or the original value if a
conversion was not possible.
clamp(value, min, max)
Changes the type of a value.

If the conversion fails, the original
value is returned. To check if a
conversion succeeded, you should
check the type of the returned value.
Returns The converted value, or the

original value if a conversion was not
possible.
value (number): Original value. Clamps a value between a minimum

min (number): Minimum
and a maximum.
allowed value.
max (number): Maximum
allowed value.
Returns: number
contains(parent, child)
parent (any): Parent element.

child (any): Child element.
Returns: True if the parent
element contains the child
element.
copy(dst, src)
createElement(html)
dst (any): The destination

object.
src (any): The source object.
Checks whether an HTML element

contains another.
Returns True if the parent element
contains the child element.
Copies the properties from an object

to another.
Returns: void
The destination object must define all

the properties defined in the source,
or an error will be thrown.
html (string): HTML fragment

to convert into an
HTMLElement.
Creates an element from an HTML

string.
Returns The new element.
Returns: The new element.
Wijmo 5
April 2015
27/535
Name
Parameters
Description
escapeHtml(text)
text (string): Text to escape.
Escapes a string by replacing HTML

characters as text entities.
Returns: An HTML-escaped
version of the original string.
Strings entered by uses should always

be escaped before they are displayed
in HTML pages. This ensures page
integrity and prevents HTML/javascript
injection attacks.
Returns An HTML-escaped version of

the original string.
format(format, data,
formatFunction)
format (string): A composite

format string.
data (any): The data object
used to build the string.
formatFunction (Function):
An optional function used to
format items in context.
Replaces each format item in a

specified string with the text
equivalent of an object's value.
The function works by replacing parts
of the formatString with the pattern
'{name:format}' with properties of the
data parameter. For example:
Returns: The formatted string.

var data = { name: 'Joe', amount:
123456 };
var msg = wijmo.format('Hello {name},
you won {amount:n2}!', data);
The optional formatFunction allows

you to customize the content by
providing context-sensitive formatting.
If provided, the format function gets
called for each format element and
gets passed the data object, the
parameter name, the format, and the
value; it should return an output
string. For example:
var data = { name: 'Joe', amount:
123456 };
var msg = wijmo.format('Hello {name},
you won {amount:n2}!', data,
function (data, name, fmt,
val) {
if
(wijmo.isString(data[name])) {
val =
wijmo.escapeHtml(data[name]);
}
return val;
});
Wijmo 5
April 2015
28/535
Name
Parameters
Description
Returns The formatted string.
getElement(selector)
selector (any): An element, a

selector string, or a jQuery
object.
Gets an element from a jQuery-style

selector.
Returns: HTMLElement
getElementRect(e)
e (Element)
Gets the bounding rectangle of an

element in page coordinates.
Returns: Rect
This is similar to the
getBoundingClientRect function,
except that uses window coordinates,
which change when the document
scrolls.
S getFirstDayOfWeek()
Gets the first day of the week

according to the current culture.
The value returned is between zero
(Sunday) and six (Saturday).
S getNumberDecimalSeparator
()
getType(value)
Gets the symbol used as a decimal

separator in numbers.
value (any): Value to test.
Returns: A DataType value
representing the type of the
value passed in.
getVersion()
hasClass(e, className)
Gets the type of a value.

Returns A DataType value
representing the type of the value
passed in.
Gets the version of the Wijmo library
that is currently loaded.
e (HTMLElement): Element to Checks whether an element has a

check.
class.
check for.
Returns: boolean
hidePopup(popup, remove)
popup (HTMLElement): Popup Hides a popup element previously

element to hide.
displayed with the showPopup
remove (boolean): Whether to method.
remove the popup from the
DOM or just to hide it.
Returns: void
Wijmo 5
April 2015
29/535
Name
Parameters
Description
isArray(value)
Determines whether an object is an

Array.
Returns: boolean
isBoolean(value)
Determines whether an object is a

Boolean.
Returns: boolean
isDate(value)

Date.
Returns: boolean
isFunction(value)

function.
Returns: boolean
isInt(value)

integer.
Returns: boolean
isNullOrWhiteSpace(value)
value (string): Value to test.
Determines whether a string is null,

empty, or whitespace only.
Returns: void
isNumber(value)

number.
Returns: boolean
isObject(value)

Returns: boolean
isPrimitive(value)

Returns: boolean
isString(value)

object (as opposed to a value type or
a date).
primitive type (string, number,
boolean, or date).
string.
Returns: boolean
isUndefined(value)
Determines whether an object is

undefined.
Returns: boolean
S parseDate(value, format)
value (string): String to

convert to a Date.
format (string): Format string
used to parse the date.
Parses a string into a Date.

Returns The date represented by the
given string, or null if the string cannot
be parsed into a Date.
Returns: The date represented

by the given string, or null if
the string cannot be parsed
into a Date.
Wijmo 5
April 2015
30/535
Name
S parseFloat(value)
Parameters
Description

convert to a number.
Parses a string into a floating point

number.
Returns The floating point number
represented by the given string, or
NaN if the string cannot be parsed
into a floating point number.
Returns: The floating point

number represented by the
given string, or NaN if the
string cannot be parsed into a
floating point number.
S parseInt(value)

convert to an integer.
Returns: The integer
represented by the given
string, or NaN if the string
cannot be parsed into an
integer.
removeClass(e, className)
that will have the class
removed.
remove form the element.
Parses a string into an integer.

Returns The integer represented by
the given string, or NaN if the string
cannot be parsed into an integer.
Removes a class from an element.
Returns: void
setCss(e, css)
Modifies the style of an element by
whose style will be modified.
applying the properties specified in an
css (any): Object containing the object.
style properties to apply to the
element.
Returns: void
showPopup(popup, ref,
above)
popup (HTMLElement):
Element to show as a popup.
ref (any): Reference used to
position the popup.
above (boolean): Position
popup above the reference if
possible.
Returns: void
toggleClass(e, className,
addOrRemove)
Wijmo 5
that will have the class added.
April 2015
Shows an element as a popup.

The popup element becomes a child
of the body element, and is positioned
using a reference that may be a
MouseEvent, an HTMLElement, or a
Rect.
To hide the popup, either call the
hidePopup method or simply remove
the popup element from the
document body.
Adds or removes a class to or from an
element.
31/535
Name
Parameters
Description
add or remove.
addOrRemove (boolean):
Whether to add or remove the
class.
Returns: void
tryCast(value, type)
value (any): Value to cast.

type (any): Type or interface
name to cast to.
Casts a value to a type if possible.

Returns The value passed in if the cast
was successful, null otherwise.
Returns: The value passed in if

the cast was successful, null
otherwise.
Wijmo 5
April 2015
32/535
Binding Class
Module
wijmo
File
wijmo.js
Provides binding to complex properties (e.g. 'customer.address.city')
Constructor
Name
Parameters
Description
constructor
(path)
path (string): Name of the property to

bind to.
Initializes a new instance of a Binding

object.
Returns: void
Properties
Name
Type
Description
path
string
Gets or sets the path for the binding.

In the simplest case, the path is the name of the property of
the source object to use for the binding (e.g. 'street').
Subproperties of a property can be specified by a syntax
similar to that used in JavaScript (e.g. 'address.street').
Methods
Name
Parameters
Description
getValue(object) object (any): The object that contains the

data to be retrieved.
Gets the binding value for a given object.
Returns: any
setValue(object, object (any): The object that contains the
value)
data to be set.
value (any): Data value to set.
Sets the binding value on a given object.
Returns: void
Wijmo 5
April 2015
33/535
CancelEventArgs Class
Base Class
EventArgs
Derived Classes
PageChangingEventArgs, CellRangeEventArgs, TooltipEventArgs

Module
wijmo
File
wijmo.js
Provides arguments for cancellable events.
Properties
Name
F cancel
Type
Description
boolean
Gets or sets a value that indicates whether the event

should be canceled.
SF empty
Provides a value to use with events that do not have event

data.
(inherited from EventArgs).
Wijmo 5
April 2015
34/535
Clipboard Class
Module
wijmo
File
wijmo.js
Static class that provides utility methods for clipboard operations.
The Clipboard class provides static copy and paste methods that can be used by controls to customize
the clipboard content during clipboard operations.
For example, the code below shows how a control could intercept the clipboard shortcut keys and provide
custom clipboard handling:
rootElement.addEventListener('keydown', function(e) {
// copy: ctrl+c or ctrl+Insert
if (e.ctrlKey && (e.keyCode == 67 || e.keyCode == 45)) {
var text = this.getClipString();
Clipboard.copy(text);
return;
}
// paste: ctrl+v or shift+Insert
if ((e.ctrlKey && e.keyCode == 86) || (e.shiftKey && e.keyCode == 45)) {
Clipboard.paste(function (text) {
this.setClipString(text);
});
return;
}
});
Methods
Name
S copy(text)
Parameters
Description
text (string): Text to copy to the

clipboard.
Copies a string to the clipboard.

This method only works if invoked
immediately after the user pressed a
clipboard copy command (such as ctrl+c).
Returns: void
S paste(callback)
Wijmo 5
callback (Function): Function called when Gets a string from the clipboard.
the clipboard content has been retrieved.
The function receives the clipboard
This method only works if invoked
content as a parameter.
immediately after the user pressed a
clipboard paste command (such as
Returns: void
ctrl+v).
April 2015
35/535
Color Class
Module
wijmo
File
wijmo.js
Color class.
The Color class parses colors specified as CSS strings and exposes their red, green, blue, and alpha
channels as read-write properties.
The Color class also provides fromHsb and fromHsl methods for creating colors using the HSB and HSL
color models instead of RGB, as well as getHsb and getHsl methods for retrieving the color components
using those color models.
Finally, the Color class provides an interpolate method that creates colors by interpolating between two
colors using the HSL model. This method is especially useful for creating color animations with the
animate method.
Constructor
Name
Parameters
Description
constructor
(color)
color (string): CSS color specification.
Initializes a new Color from a CSS color

specification.
Returns: void
Properties
Name
Type
Description
number
Gets or sets the alpha component of this Color, in a range

from 0 to 1 (zero is transparent, one is solid).
number
Gets or sets the blue component of this Color, in a range

from 0 to 255.
number
Gets or sets the green component of this Color, in a range

from 0 to 255.
number
Gets or sets the red component of this Color, in a range

from 0 to 255.
Methods
Name
Parameters
Description
equals(clr)
clr (Color): Color to compare to this

Color.
Returns true if a Color has the same

value as this Color.
Returns: boolean
S fromHsb(h, s, b, h (number): Hue value, from 0 to 1.
Creates a new Color using the specified
a)
s (number): Saturation value, from 0 to 1. HSB values.
b (number): Brightness value, from 0 to 1.
Wijmo 5
April 2015
36/535
Name
Parameters
Description
a (number): Alpha value, from 0 to 1.

(default value: 1)
Returns: Color
S fromHsl(h, s, l,
a)
h (number): Hue value, from 0 to 1.

s (number): Saturation value, from 0 to 1. HSL values.
l (number): Lightness value, from 0 to 1.
a (number): Alpha value, from 0 to 1.
(default value: 1)
Returns: Color
S fromRgba(r, g,
b, a)
r (number): Value for the red channel,

from 0 to 255.
g (number): Value for the green channel,
from 0 to 255.
b (number): Value for the blue channel,
from 0 to 255.
a (number): Value for the alpha channel,
from 0 to 1.
(default value: 1)

RGBA color channel values.
Returns: Color
S fromString
(value)
value (string): String containing a CSS

color specification.
Creates a new Color from a CSS color

string.
Returns: A new Color, or null if the string

cannot be parsed into a color.
getHsb()
Gets an array with this color's HSB

components.
getHsl()
Gets an array with this color's HSL

components.
S interpolate(c1,
c2, pct)
c1 (Color): First color.

c2 (Color): Second color.
pct (number): Value between zero and
one that determines how close the
interpolation should be to the first color.
Creates a Color by interpolating between

two colors.
Returns: Color
toString()
Wijmo 5
Gets a string representation of this Color.
April 2015
37/535
Control Class
Derived Classes
FlexChartBase, Gauge, ColumnFilterEditor, ConditionFilterEditor, ValueFilterEditor, FlexGrid,

GroupPanel, Calendar, ColorPicker, DropDown, InputMask, InputNumber, ListBox
Module
wijmo
File
wijmo.js
Base class for all Wijmo controls.
The Control class handles the association between DOM elements and the actual control. Use the
hostElement property to get the DOM element that is hosting a control, or the getControl method to
get the control hosted in a given DOM element.
The Control class also provides a common pattern for invalidating and refreshing controls, for updating
the control layout when its size changes, and for handling the HTML templates that define the control
structure.
Constructor
Name
Parameters
Description
constructor
element (any): The DOM element that
Initializes a new instance of a Control
(element, options, will host the control, or a selector for the and attaches it to a DOM element.
invalidateOnResize) host element (e.g. '#theCtrl').
options (): JavaScript object containing
initialization data for the control.
(default value: null)
invalidateOnResize (boolean): Whether
the control should be invalidated when it
is resized.
Returns: void
Properties
Name
Type
Description
hostElement
HTMLElement
Gets the DOM element that is hosting the control.
isTouching
boolean
Gets a value that indicates whether the control is currently

handling a touch event.
isUpdating
boolean

being updated.
Methods
Wijmo 5
April 2015
38/535
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
classNames (string): Names of classes to

add to the control's host element.
template (string): An HTML string that
defines the control template.
parts (Object): A dictionary of part
variables and their names.
namePart (string): Name of the part to be
named after the host element. This
determines how the control submits data
when used in forms.
Applies the template to a new instance of

a control, and returns the root element.
This method should be called by

constructors of templated controls. It is
responsible for binding the template
parts to the corresponding control
members.
For example, the code below applies a
template to an instance of an
InputNumber control. The template
must contain elements with the 'wj-part'
attribute set to 'input', 'btn-inc', and 'btndec'. The control members '_tbx',
'_btnUp', and '_btnDn' will be assigned
references to these elements.
this.applyTemplate('wj-control wjinputnumber', template, {
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
beginUpdate()
Suspends notifications until the next call

to endUpdate.
containsFocus()
Checks whether this control contains the

focused element.
deferUpdate(fn) fn (Function): Function to be executed.
Executes a function within a

beginUpdate/endUpdate block.
Returns: void
The control will not be updated until the
function has been executed. This method
ensures endUpdate is called even if the
function throws.
dispose()
Disposes of the control by removing its

association with the host element.
endUpdate()
Resumes notifications suspended by calls

to beginUpdate.
focus()
Sets the focus to this control.
S getControl
(element)
element (any): The DOM element that is

hosting the control, or a selector for the
host element (e.g. '#theCtrl').
Gets the control that is hosted in a given

DOM element.
Returns: Control
Wijmo 5
April 2015
39/535
Name
Parameters
Description
getTemplate()
Gets the HTML template used to create

instances of the control.
This method traverses up the class
hierarchy to find the nearest ancestor
that specifies a control template. For
example, if you specify a prototype for
the ComboBox control, it will override
the template defined by the DropDown
base class.
initialize
(options)
options (any): Object that contains the

initialization data.
Initializes the control by copying the

properties from a given object.
Returns: void
This method allows you to initialize

controls using plain data objects instead
of setting the value of each property in
code.
For example:
grid.initialize({
itemsSource: myList,
autoGenerateColumns: false,
columns: [
{ binding: 'id', header: 'Code',
width: 130 },
{ binding: 'name', header: 'Name',
width: 60 }
]
});
// is equivalent to
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// etc.
The initialization data is type-checked as

it is applied. If the initialization object
contains unknown property names or
invalid data types, this method will throw.
invalidate
(fullUpdate)
fullUpdate (boolean): Whether to update Invalidates the control causing an

the control layout as well as the content. asynchronous refresh.
Returns: void
S invalidateAll(e) e (HTMLElement): Container element. If Invalidates all Wijmo controls contained

set to null, all Wijmo controls on the page in an HTML element.
will be invalidated.
Use this method when your application
Returns: void
has dynamic panels that change the
Wijmo 5
April 2015
40/535
Name
Parameters
Description
control's visibility or dimensions. For
example, splitters, accordions, and tab
controls usually change the visibility of its
content elements. In this case, failing to
notify the controls contained in the
element may cause them to stop working
properly.
If this happens, you must handle the
appropriate event in the dynamic
container and call the invalidateAll
method so the contained Wijmo controls
will update their layout information
properly.
refresh
(fullUpdate)
fullUpdate (boolean): Whether to update Refreshes the control.

the control layout as well as the content.
Returns: void
Wijmo 5
April 2015
41/535
DateTime Class
Module
wijmo
File
wijmo.js
Provides date and time utilities.
Methods
Name
S addDays(value,
days)
Parameters
Description
value (Date): Original date.

Gets a new Date that adds the specified
days (number): Number of days to add to number of days to a given Date.
the given date.
Returns: Date
S addHours(value, value (Date): Original date.

hours)
hours (number): Number of hours to add number of hours to a given Date.
to the given date.
Returns: Date
S addMinutes
(value, minutes) minutes (number): Number of minutes to number of minutes to a given Date.
add to the given date.
Returns: Date
S addMonths
(value, months)

months (number): Number of months to number of months to a given Date.
Returns: Date
S addSeconds
(value, seconds) seconds (number): Number of seconds to number of seconds to a given Date.
Returns: Date
S addYears(value, value (Date): Original date.
years)
years (number): Number of years to add
to the given date.

number of years to a given Date.
Returns: Date
S clone(date)
date (Date): Date object to copy.
Creates a copy of a given Date object.
Returns: Date
Wijmo 5
April 2015
42/535
Name
S equals(d1, d2)
Parameters
Description
d1 (Date): First date.

d2 (Date): Second date.
Returns true if two Date objects refer to

the same date and time.
Returns: boolean
S fromDateTime
(date, time)
date (Date): Date object that contains the Gets a Date object with the date and time
date (day/month/year).
set on two Date objects.
time (Date): Date object that contains the
time (hour:minute:second).
Returns: Date
S sameDate(d1,
d2)


the same date (ignoring time).
Returns: boolean
S sameTime(d1,
d2)


the same time (ignoring date).
Returns: boolean
Wijmo 5
April 2015
43/535
Event Class
Module
wijmo
File
wijmo.js
Represents an event.
Wijmo events are similar to .NET events. Any class may define events by declaring them as fields. Any class
may subscribe to events using the event's addHandler method and unsubscribe using the
removeHandler method.
Wijmo event handlers take two parameters: sender and args. The first is the object that raised the event,
and the second is an object that contains the event parameters.
Classes that define events follow the .NET pattern where for every event there is an on[EVENTNAME]
method that raises the event. This pattern allows derived classes to override the on[EVENTNAME] method
and handle the event before and/or after the base class raises the event. Derived classes may even
suppress the event by not calling the base class implementation.
For example, the TypeScript code below overrides the onValueChanged event for a control to perform
some processing before and after the valueChanged event fires:
// override base class
onValueChanged(e: EventArgs) {
// execute some code before the event fires
console.log('about to fire valueChanged');
// optionally, call base class to fire the event
super.onValueChanged(e);
// execute some code after the event fired
console.log('valueChanged event just fired');
}
Properties
Name
Type
Description
hasHandlers
boolean
Gets a value that indicates whether this event has any

handlers.
Methods
Name
Parameters
Description
addHandler
(handler, self)
handler (IEventHandler): Function

invoked when the event is raised.
self (any): Object that defines the event
handler (accessible as 'this' from the
handler code).
Adds a handler to this event.
Returns: void
Wijmo 5
April 2015
44/535
Name
Parameters
Description
raise(sender, args)
sender (any): Source object.

args (EventArgs): Event parameters.
Raises this event, causing all associated

handlers to be invoked.
Returns: void
removeAllHandlers
()
removeHandler
(handler, self)
Removes all handlers associated with

this event.
handler (IEventHandler): Function
invoked when the event is raised.
self (any): Object that defines the event
handler (accessible as 'this' from the
handler code).
Removes a handler from this event.
Returns: void
Wijmo 5
April 2015
45/535
EventArgs Class
Derived Classes
CancelEventArgs, RenderEventArgs, SeriesEventArgs, NotifyCollectionChangedEventArgs,

PropertyChangedEventArgs
Module
wijmo
File
wijmo.js
Base class for event arguments.
Properties
Name
Type
Description
SF empty

data.
Wijmo 5
April 2015
46/535
Globalize Class
Module
wijmo
File
wijmo.js
Class that implements formatting and parsing of numbers and Dates.
By default, Globalize uses the American English culture. To switch cultures, include the appropriate
wijmo.culture.*.js file after the wijmo files.
Methods
Name
S format(value,
format)
Parameters
Description
value (any): Number or Date to format (all Formats a number or a date.

other types are converted to strings).
format (string): Format string to use when The format strings used with the format
formatting numbers or dates.
function are similar to the ones used by
Globalize.js and by the .NET
Returns: A string representation of the
Globalization library. The tables below
given value.
contains links that describe the formats
available:
S formatDate
(value, format)
value (Date): Number or Date to format.

format (string): .NET-style Date format
string.
Standard Numeric Format Strings

Standard Date and Time Format
Strings
Custom Date and Time Format
Strings
Formats a date using the current culture.

given date.
S formatNumber value (number): Number to format.
(value, format)
format (string): .NET-style standard
numeric format string (e.g. 'n2', 'c4', 'p0',
'g2', 'd2').
given number.
Wijmo 5
April 2015
Formats a number using the current

culture.
The formatNumber method accepts
most .NET-style Standard Numeric
Format Strings, except for the 'e' and 'x'
formats (scientific notation and
hexadecimal) which are not supported.
47/535
Name
Parameters
Description
Numeric format strings takes the form
Axx, where:
A is a single case-insensitive
alphabetic character called the
format specifier.
xx is an optional integer called
the precision specifier. The
precision specifier affects the
number of digits in the result.
The following table describes the

standard numeric format specifiers and
displays sample output produced by each
format specifier for the default culture.
n Number: formatNumber(1234.5,
'n2') => '1,234.50'
f Fixed-point: formatNumber(1234.5,
'f2') => '1234.50'
g General (no trailing zeros):
formatNumber(1234.5, 'g2') =>
'1,234.5'
d Decimal (integers): formatNumber(1234, 'd6') => '-001234'
c Currency: formatNumber(1234,
'c') => '$ 1,234.00'
p Percent: formatNumber(0.1234,
'p2') => '12.34 %'
Wijmo 5
April 2015
48/535
Point Class
Module
wijmo
File
wijmo.js
Class that represents a point (with x and y coordinates).
Constructor
Name
Parameters
Description
constructor(x, y) x (number): X coordinate of the new Point. Initializes a new instance of a Point
(default value: 0)
object.
y (number): Y coordinate of the new Point.
(default value: 0)
Returns: void
Properties
Name
Type
Description
Fx
number
Gets or sets the x coordinate of this Point.
Fy
number
Gets or sets the y coordinate of this Point.
Methods
Name
Parameters
Description
clone()
equals(pt)
Wijmo 5
Creates a copy of this Point.

pt (Point): Point to compare to this Point. Returns true if a Point has the same
coordinates as this Point.
Returns: boolean
April 2015
49/535
PropertyChangedEventArgs Class
Base Class
EventArgs
Module
wijmo
File
wijmo.js
Provides arguments for property change events.
Constructor
Name
Parameters
Description
constructor
(propertyName,
oldValue,
newValue)
propertyName (string): The name of the

property whose value changed.
oldValue (any): The old value of the
property.
newValue (any): The new value of the
property.
Initializes a new instance of a

PropertyChangedEventArgs.
Returns: void
Properties
Name
Type
SF empty
Description
data.
newValue
any
Gets the new value of the property.
oldValue
any
Gets the old value of the property.
propertyName
string
Gets the name of the property whose value changed.
Wijmo 5
April 2015
50/535
Rect Class
Module
wijmo
File
wijmo.js
Class that represents a rectangle (with left, top, width, and height).
Constructor
Name
Parameters
Description
constructor(left, left (number): Left coordinate of the new Initializes a new instance of a Rect object.
top, width,
Rect.
height)
top (number): Top coordinate of the new
Rect.
width (number): Width of the new Rect.
height (number): Height of the new Rect.
Returns: void
Properties
Name
Type
Description
bottom
number
Gets the bottom coordinate of this Rect.
F height
number
Gets or sets the height of this Rect.
F left
number
Gets or sets the left coordinate of this Rect.
number
Gets the right coordinate of this Rect.
F top
number
Gets or sets the top coordinate of this Rect.
F width
number
Gets or sets the width of this Rect.
right
Methods
Name
Parameters
Description
clone()
contains(pt)
Creates a copy of this Rect.

pt (any): The Point or Rect to ckeck.
Determines whether the rectangle

contains a given point or rectangle.
Returns: boolean
S fromBoundingRect rc (any): Rectangle obtained by a call to Creates a Rect from ClientRect or
(rc)
the DOM's getBoundingClientRect or SVGRect objects.
GetBoundingBox methods.
Returns: Rect
inflate(dx, dy)
Wijmo 5
dx (number): The amount by which to

expand or shrink the left and right sides
of the rectangle.
dy (number): The amount by which to
April 2015
Creates a rectangle that results from

expanding or shrinking a rectangle by
the specified amounts.
51/535
Name
Parameters
Description
expand or shrink the top and bottom

sides of the rectangle.
Returns: Rect
S union(rc1, rc2)
rc1 (Rect): First rectangle.

rc2 (Rect): Second rectangle.
Gets a rectangle that represents the

union of two rectangles.
Returns: Rect
Wijmo 5
April 2015
52/535
Size Class
Module
wijmo
File
wijmo.js
Class that represents a size (with width and height).
Constructor
Name
Parameters
Description
constructor
(width, height)
width (number): Width of the new Size.

(default value: 0)
height (number): Height of the new Size.
(default value: 0)
Initializes a new instance of a Size object.
Returns: void
Properties
Name
Type
Description
F height
number
Gets or sets the height of this Size.
F width
number
Gets or sets the width of this Size.
Methods
Name
Parameters
Description
clone()
equals(sz)
Creates a copy of this Size.

sz (Size): Size to compare to this Size.
Returns true if a Size has the same

dimensions as this Size.
Returns: boolean
Wijmo 5
April 2015
53/535
Tooltip Class
Derived Classes
ChartTooltip
Module
wijmo
File
wijmo.js
Provides a pop-up window that displays additional information about elements on the page.
The Tooltip class can be used in two modes:
Automatic Mode: Use the setTooltip method to connect the Tooltip to one or more elements on the
page. The Tooltip will automatically monitor events and display the tooltips when the user performs
actions that trigger the tooltip. For example:
tt.setTooltip('#menu', 'Select commands.');
tt.setTooltip('#tree', 'Explore the hierarchy.');
tt.setTooltip('#chart', '#idChartTooltip');
Manual Mode: The caller is responsible for showing and hiding the tooltip using the show and hide
methods. For example:
element.addEventListener('click', function () {
if (tt.isVisible) {
tt.hide();
} else {
tt.show(element, 'This is an important element!');
}
});
Constructor
Name
Parameters
Description
constructor()
Initializes a new instance of a Tooltip

object.
Properties
Name
Type
Description
gap
number
Gets or sets the distance between the tooltip and the target
element.
hideDelay
number
Gets or sets the delay, in milliseconds, before hiding the

tooltip after the mouse leaves the target element.
isContentHtml
boolean
Gets or sets whether the tooltip contents should be

displayed as plain text or as HTML.
isVisible
boolean
Gets whether the tooltip is currently visible.
Wijmo 5
April 2015
54/535
Name
Type
Description
showDelay
number
Gets or sets the delay, in milliseconds, before showing the

tooltip after the mouse enters the target element.
Methods
Name
Parameters
Description
hide()
onPopup(e)
Hides the tooltip if it is currently visible.

e (TooltipEventArgs): TooltipEventArgs
that contains the event data.
Raises the popup event.
Returns: void
setTooltip
(element,
content)
element (any): Element, element ID, or

control that the tooltip explains.
content (string): Tooltip content or ID of
the element that contains the tooltip
content.
Returns: void
Assigns tooltip content to a given

element on the page.
The same tooltip may be used to display
information for any number of elements
on the page. To remove the tooltip from
an element, call setTooltip and specify
null for the content.
show(element, element (any): Element, element ID, or

Shows the tooltip with the specified
content, bounds) control that the tooltip explains.
content, next to the specified element.
content.
bounds (Rect): Optional element that
defines the bounds of the area that the
tooltip targets. If not provided, the bounds
of the element are used (as reported by
the getBoundingClientRect method).
Returns: void
Events
Name
Arguments
Description
popup
TooltipEventArgs
Occurs before the tooltip content is

displayed.
The event handler may customize the
tooltip content or suppress the tooltip
display by changing the event parameters.
Wijmo 5
April 2015
55/535
TooltipEventArgs Class
Base Class
CancelEventArgs
Module
wijmo
File
wijmo.js
Provides arguments for the popup event.
Constructor
Name
Parameters
Description
constructor
(content)
content (string): String to show in the

tooltip.

TooltipEventArgs.
Returns: void
Properties
Name
F cancel
content
Type
Description
boolean

should be canceled.
(inherited from CancelEventArgs).
string
Gets or sets the content to show in the tooltip.

This parameter can be used while handling the popup
event to modify the content of the tooltip.
SF empty

data.
Wijmo 5
April 2015
56/535
IEventHandler Class
Module
wijmo
File
wijmo.js
Represents an event handler. Event handlers are functions invoked when events are raised.
Every event handler has two arguments:
sender is the object that raised the event, and

args is an optional object that contains the event parameters.
Wijmo 5
April 2015
57/535
IQueryInterface Class
Module
wijmo
File
wijmo.js
Allows callers to verify whether an object implements an interface.
Methods
Name
Parameters
Description
implementsInterface interfaceName (string): Name of the

(interfaceName)
interface to look for.
Returns true if the object implements a

given interface.
Returns: boolean
Wijmo 5
April 2015
58/535
Aggregate Enum
Module
wijmo
File
wijmo.js
Specifies the type of aggregate to calculate over a group of values.
Values
Name Description
Avg
Returns the average value of the numeric values in the group.
Cnt
Returns the count of non-null values in the group.
Max
Returns the maximum value in the group.
Min
Returns the minimum value in the group.
None
No aggregate.
Rng
Returns the difference between the maximum and minimum numeric values in the group.
Std
Returns the sample standard deviation of the numeric values in the group (uses the formula
based on n-1).
StdPop Returns the population standard deviation of the values in the group (uses the formula based
on n).
Sum
Returns the sum of the numeric values in the group.
Var
Returns the sample variance of the numeric values in the group (uses the formula based on n1).
VarPop Returns the population variance of the values in the group (uses the formula based on n).
Wijmo 5
April 2015
59/535
DataType Enum
Module
wijmo
File
wijmo.js
Enumeration with value types.
Use the getType method to get a DataType from a value.
Values
Name
Description
Array
Array.
Boolean Boolean.
Date
Date (date and time).
Number Number.
Object
Object (anything).
String
String.
Wijmo 5
April 2015
60/535
Key Enum
Module
wijmo
File
wijmo.js
Enumeration with key values.
This enumeration is useful when handling keyDown events.
Values
Name
Description
Back
The backspace key.
Delete
The delete key.
Down
The down arrow key.
End
The end key.
Enter
The enter key.
Escape
The escape key.
F1
The F1 key.
F10
The F10 key.
F11
The F11 key.
F12
The F12 key.
F2
The F2 key.
F3
The F3 key.
F4
The F4 key.
F5
The F5 key.
F6
The F6 key.
F7
The F7 key.
F8
The F8 key.
F9
The F9 key.
Home
The home key.
Left
The left arrow key.
PageDown The page down key.

PageUp
The page up key.
Right
The right arrow key.
Space
The space key.
Tab
The tab key.
Up
The up arrow key.
Wijmo 5
April 2015
61/535
Module wijmo.collections
File
wijmo.js
Defines interfaces and classes related to data, including the ICollectionView interface and the
CollectionView class and ObservableArray classes.
Wijmo 5
April 2015
62/535
Classes
Name
Description
ArrayBase
Base class for Array classes with notifications.
CollectionView
Class that implements the ICollectionView interface to expose

data in regular JavaScript arrays.
The CollectionView class implements the following interfaces:
ICollectionView: provides current record management,

custom sorting, filtering, and grouping.
IEditableCollectionView: provides methods for editing,
adding, and removing items.
IPagedCollectionView: provides paging.
To use the CollectionView class, start by declaring it and passing

a regular array as a data source. Then configure the view using
the filter, sortDescriptions, groupDescriptions, and pageSize
properties. Finally, access the view using the items property. For
example:
// create a new CollectionView
var cv = new wijmo.collections.CollectionView(myArray);
// sort items by amount in descending order
var sd = new wijmo.collections.SortDescription('amount', false);
cv.sortDescriptions.push(sd);
// show only items with amounts greater than 100
cv.filter = function(item) { return item.amount > 100 };
// show the sorted, filtered result on the console
for (var i = 0; i < cv.items.length; i++) {
var item = cv.items[i];
console.log(i + ': ' + item.name + ' ' + item.amount);
}
CollectionViewGroup
Represents a group created by a CollectionView object based on

its groupDescriptions property.
GroupDescription
Represents a base class for types defining grouping conditions.

The concrete class which is commonly used for this purpose is
PropertyGroupDescription.
NotifyCollectionChangedEventArgs Provides data for the collectionChanged event.

ObservableArray
Array that sends notifications on changes.

The class raises the collectionChanged event when changes are
made with the push, pop, splice, insert, or remove methods.
Warning: Changes made by assigning values directly to array
members or to the length of the array do not raise the
collectionChanged event.
PageChangingEventArgs
Wijmo 5
Provides data for the pageChanging event
April 2015
63/535
Name
Description
PropertyGroupDescription
Describes the grouping of items using a property name as the

criterion.
For example, the code below causes a CollectionView to group
items by the value of their 'country' property:
var cv = new wijmo.collections.CollectionView(items);
var gd = new
wijmo.collections.PropertyGroupDescription('country');
cv.groupDescriptions.push(gd);
You may also specify a callback function that generates the group
name. For example, the code below causes a CollectionView to
group items by the first letter of the value of their 'country'
property:
var gd = new wijmo.collections.PropertyGroupDescription('country',
function(item, propName) {
return item[propName][0]; // return country's initial
});
SortDescription
Wijmo 5
Describes a sorting criterion.
April 2015
64/535
Interfaces
Name
Description
ICollectionView
Enables collections to have the functionalities of current record

management, custom sorting, filtering, and grouping.
This is a JavaScript version of the ICollectionView interface used in
Microsoft's XAML platform. It provides a consistent, powerful, and MVVMfriendly way to bind data to UI elements.
Wijmo includes several classes that implement ICollectionView. The most
common is CollectionView, which works based on regular JavsScript arrays.
IComparer
Represents the method that compares two objects.
IEditableCollectionView
Defines methods and properties that extend ICollectionView to provide

editing capabilities.
INotifyCollectionChanged Notifies listeners of dynamic changes, such as when items get added and
removed or when the collection is sorted, filtered, or grouped.
IPagedCollectionView
Defines methods and properties that extend ICollectionView to provide

paging capabilities.
IPredicate
Represents a method that takes an item of any type and returns a boolean
that indicates whether the object meets a set of criteria.
Wijmo 5
April 2015
65/535
Enumerations
Name
Description
NotifyCollectionChangedAction Describes the action that caused the collectionChanged event.
Wijmo 5
April 2015
66/535
ArrayBase Class
Derived Classes
ObservableArray
Module
wijmo.collections
File
wijmo.js
Base class for Array classes with notifications.
Constructor
Name
Parameters
Description
constructor()
Wijmo 5
Initializes a new instance of an ArrayBase.
April 2015
67/535
CollectionView Class
Implements
IEditableCollectionView, IPagedCollectionView
Module
wijmo.collections
File
wijmo.js
Class that implements the ICollectionView interface to expose data in regular JavaScript arrays.
The CollectionView class implements the following interfaces:
ICollectionView: provides current record management, custom sorting, filtering, and grouping.
IEditableCollectionView: provides methods for editing, adding, and removing items.
IPagedCollectionView: provides paging.
To use the CollectionView class, start by declaring it and passing a regular array as a data source. Then
configure the view using the filter, sortDescriptions, groupDescriptions, and pageSize properties.
Finally, access the view using the items property. For example:
// create a new CollectionView
var cv = new wijmo.collections.CollectionView(myArray);
// sort items by amount in descending order
var sd = new wijmo.collections.SortDescription('amount', false);
cv.sortDescriptions.push(sd);
// show only items with amounts greater than 100
cv.filter = function(item) { return item.amount > 100 };
// show the sorted, filtered result on the console
for (var i = 0; i < cv.items.length; i++) {
var item = cv.items[i];
console.log(i + ': ' + item.name + ' ' + item.amount);
}
Constructor
Name
Parameters
Description
constructor
sourceCollection (any): Array that serves
(sourceCollection) as a source for this CollectionView.

CollectionView.
Returns: void
Properties
Name
Type
Description
canAddNew
boolean
Gets a value indicating whether a new item can be added

to the collection.
canCancelEdit
boolean
Gets a value indicating whether the collection view can

discard pending changes and restore the original values
of an edited object.
canChangePage
boolean
Gets a value indicating whether the pageIndex value can

change.
Wijmo 5
April 2015
68/535
Name
Type
Description
canFilter
boolean
Gets a value indicating whether this view supports

filtering via the filter property.
canGroup
boolean

grouping via the groupDescriptions property.
canRemove
boolean
Gets a value indicating whether items can be removed

from the collection.
canSort
boolean

sorting via the sortDescriptions property.
currentAddItem
any
Gets the item that is being added during the current add
transaction.
currentEditItem
any
Gets the item that is being edited during the current edit
transaction.
currentItem
any
Gets the current item in the view.
currentPosition
number
Gets the ordinal position of the current item in the view.
filter
IPredicate
Gets or sets a callback used to determine if an item is

suitable for inclusion in the view.
The callback function should return true if the item
passed in as a parameter should be included in the view.
NOTE: If the filter function needs a scope (i.e. a
meaningful 'this' value) remember to set the filter using
the 'bind' function to specify the 'this' object. For
example:
collectionView.filter = this._filter.bind(this);
groupDescriptions
ObservableArray
groups
CollectionViewGroup Gets an array of CollectionViewGroup objects that

represents the top-level groups.
isAddingNew
boolean
Gets a value indicating whether an add transaction is in

progress.
isEditingItem
boolean
Gets a value indicating whether an edit transaction is in

progress.
isEmpty
boolean
Gets a value indicating whether this view contains no

items.
isPageChanging
boolean
Gets a value indicating whether the page index is

changing.
isUpdating
Wijmo 5
Gets a collection of GroupDescription objects that

describe how the items in the collection are grouped in
the view.
Gets a value that indicates whether notifications are

currently suspended (see beginUpdate and endUpdate).
April 2015
69/535
Name
Type
Description
itemCount
number
Gets the number of known items in the view before

paging is applied.
items
any
Gets items in the view.
itemsAdded
ObservableArray
Gets an ObservableArray containing the records that

were added to the collection since changeTracking was
enabled.
itemsEdited
ObservableArray

were edited in the collection since changeTracking was
enabled.
itemsRemoved
ObservableArray

were removed from the collection since changeTracking
was enabled.
newItemCreator
Function
Gets or sets a function that creates new items for the

collection.
If the creator function is not supplied, the
CollectionView will try to create an uninitilized item of
the appropriate type.
If the creator function is supplied, it should be a function
that takes no parameters and returns an initialized object
of the proper type for the collection.
pageCount
number
Gets the total number pages.
pageIndex
number
Gets the zero-based index of the current page.
pageSize
number
Gets or sets the number of items to display on a page.
sortConverter
Function
Gets or sets a function used to convert values when

sorting.
If provided, the function should take as parameters a
SortDescription, a data item, and a value to convert, and
should return the converted value.
This property provides a way to customize sorting. For
example, the FlexGrid control uses it to sort mapped
columns by display value instead of by raw value.
For example, the code below causes a CollectionView to
sort the 'country' property, which contains country code
integers, using the corresponding country names:
var countries =
'US,Germany,UK,Japan,Italy,Greece'.split(',');
collectionView.sortConverter = function (sd, item, value)
{
if (sd.property == 'countryMapped') {
Wijmo 5
April 2015
70/535
Name
Type
Description
value = countries[value]; // convert country id into
name
}
return value;
}
sortDescriptions
ObservableArray
Gets a collection of SortDescription objects that

describe how the items in the collection are sorted in the
view.
sourceCollection
any
Gets or sets the underlying (unfiltered and unsorted)

collection.
totalItemCount
number
Gets the total number of items in the view before paging

is applied.
trackChanges
boolean
Gets or sets a value that determines whether the control

should track changes to the data.
If trackChanges is set to true, the CollectionView keeps
track of changes to the data and exposes them through
the itemsAdded, itemsRemoved, and itemsEdited
collections.
Tracking changes is useful in situations where you need
to to update the server after the user has confirmed that
the modifications are valid.
After committing or cancelling changes, use the
clearChanges method to clear the itemsAdded,
itemsRemoved, and itemsEdited collections.
The CollectionView only tracks changes made when the
proper CollectionView methods are used
(editItem/commitEdit, addNew/commitNew, and
remove). Changes made directly to the data are not
tracked.
Methods
Name
Parameters
Description
addNew()
Creates a new item and adds it to the

collection.
This method takes no parameters. It
creates a new item, adds it to the
collection, and prevents refresh
operations until the new item is
committed using the commitNew
method or canceled using the
cancelNew method.
Wijmo 5
April 2015
71/535
Name
Parameters
Description
The code below shows how the
addNew method is typically used:
// create the new item, add it to the
collection
var newItem = view.addNew();
// initialize the new item
newItem.id = getFreshId();
newItem.name = 'New Customer';
// commit the new item so the view can
be refreshed
view.commitNew();
You can also add new items by

pushing them into the
sourceCollection and then calling
the refresh method. The main
advantage of addNew is in userinteractive scenarios (like adding new
items in a data grid), because it gives
users the ability to cancel the add
operation. It also prevents the new
item from being sorted or filtered out
of view until the add operation is
committed.
beginUpdate()
Suspend refreshes until the next call

to endUpdate.
cancelEdit()
Ends the current edit transaction and,

if possible, restores the original value
to the item.
cancelNew()
Ends the current add transaction and

discards the pending new item.
clearChanges()
Clears all changes by removing all

items in the itemsAdded,
itemsRemoved, and itemsEdited
collections.
Call this method after committing
changes to the server or after
refreshing the data from the server.
commitEdit()
Ends the current edit transaction and

saves the pending changes.
commitNew()

saves the pending new item.
contains(item)
item (any): Item to seek.
Returns a value indicating whether a

given item belongs to this view.
Returns: boolean
Wijmo 5
April 2015
72/535
Name
Parameters
deferUpdate(fn)
fn (Function): Function to be executed Executes a function within a

without updates.
editItem(item)
Description
Returns: void
The collection will not be refreshed

until the function finishes. This
method ensures endUpdate is called
even if the function throws.
item (any): Item to be edited.
Begins an edit transaction of the

specified item.
Returns: void
endUpdate()
implementsInterface
(interfaceName)
Resume refreshes suspended by a call

to beginUpdate.
interfaceName (string): Name of the Returns true if the caller queries for a
supported interface.
Returns: boolean
moveCurrentTo(item)
item (any): Item that will become

current.
Sets the specified item to be the

current item in the view.
Returns: boolean
moveCurrentToFirst()
Sets the first item in the view as the

current item.
moveCurrentToLast()
Sets the last item in the view as the

current item.
moveCurrentToNext()
Sets the item after the current item in

the view as the current item.
moveCurrentToPosition index (number): Index of the item that Sets the item at the specified index in
(index)
will become current.
Returns: boolean
moveCurrentToPrevious
()
Sets the item before the current item

in the view as the current item.
moveToFirstPage()
Sets the first page as the current

page.
moveToLastPage()
Sets the last page as the current

page.
moveToNextPage()
Moves to the page after the current

page.
moveToPage(index)
index (number): Index of the page to Moves to the page at the specified
move to.
index.
Returns: True if the page index was
changed successfully.
Wijmo 5
April 2015
73/535
Name
Parameters
Description
moveToPreviousPage()
Moves to the page before the current

page.
onCollectionChanged(e) e (): Contains a description of the

Raises the collectionChanged event.
change.
(default value:
NotifyCollectionChangedEventArgs.
reset)
Returns: void
onCurrentChanged(e)
e ()
(default value: EventArgs.empty)
Raises the currentChanged event.
Returns: void
onCurrentChanging(e)
e (CancelEventArgs):
CancelEventArgs that contains the
event data.
Raises the currentChanging event.
Returns: boolean
onPageChanged(e)
e ()
(default value: EventArgs.empty)
Raises the pageChanged event.
Returns: void
onPageChanging(e)
e (PageChangingEventArgs):
PageChangingEventArgs that
contains the event data.
Raises the pageChanging event.
Returns: boolean
refresh()
remove(item)
Re-creates the view using the current

sort, filter, and group parameters.
item (any): Item to be removed from
the collection.
Removes the specified item from the

collection.
Returns: void
removeAt(index)
index (number): Index of the item to Removes the item at the specified
be removed from the collection. The
index from the collection.
index is relative to the view, not to the
source collection.
Returns: void
Events
Name
Arguments
Description
collectionChanged
Occurs when the collection changes.
currentChanged
Occurs after the current item changes.
Wijmo 5
April 2015
74/535
Name
Arguments
Description
currentChanging
CancelEventArgs
Occurs before the current item changes.
pageChanged
pageChanging
Wijmo 5
Occurs after the page index changes.

PageChangingEventArgs
April 2015
Occurs before the page index changes.
75/535
CollectionViewGroup Class
Module
wijmo.collections
File
wijmo.js
Represents a group created by a CollectionView object based on its groupDescriptions property.
Constructor
Name
Parameters
Description
constructor
(groupDescription,
name, level,
isBottomLevel)
groupDescription (GroupDescription):
GroupDescription that owns the new
group.
name (string): Name of the new group.
level (number): Level of the new group.
isBottomLevel (boolean): Whether this
group has any subgroups.

CollectionViewGroup.
Returns: void
Methods
Name
Parameters
Description
getAggregate
(aggType,
binding, view)
aggType (Aggregate): Type of aggregate Calculates an aggregate value for the

to calculate.
items in this group.
binding (string): Property to aggregate
on.
view (ICollectionView): CollectionView
that owns this group.
Returns: The aggregate value.
Wijmo 5
April 2015
76/535
GroupDescription Class
Derived Classes
PropertyGroupDescription
Module
wijmo.collections
File
wijmo.js
Represents a base class for types defining grouping conditions.
The concrete class which is commonly used for this purpose is PropertyGroupDescription.
Methods
Name
Parameters
Description
groupNameFromItem item (any): The item to get group name Returns the group name for the given
(item, level)
for.
item.
level (number): The zero-based group
level index.
Returns: The name of the group the
item belongs to.
namesMatch
(groupName,
itemName)
Wijmo 5
groupName (any): The name of the

Returns a value that indicates whether
group.
the group name and the item name
itemName (any): The name of the item. match (which implies that the item
belongs to the group).
Returns: True if the names match;
otherwise, false.
April 2015
77/535
NotifyCollectionChangedEventArgs Class
Base Class
EventArgs
Module
wijmo.collections
File
wijmo.js
Provides data for the collectionChanged event.
Constructor
Name
Parameters
Description
constructor
(action, item,
index)
action (): Type of action that caused the

event to fire.
(default value:
NotifyCollectionChangedAction.Reset)
item (): Item that was added or changed.
index (number): Index of the item.
(default value: -1)
Initializes a new instance of an

Returns: void
Properties
Name
F action
Type
Description
NotifyCollectionChangedAction Gets the action that caused the event.
SF empty
Provides a value to use with events that do not

have event data.
F index
number
Gets the index at which the change occurred.
F item
any
Gets the item that was added, removed, or

changed.
SF reset
Wijmo 5
Provides a reset notification.
April 2015
78/535
ObservableArray Class
Base Class
ArrayBase
Derived Classes
AxisCollection, RowColCollection
Implements
INotifyCollectionChanged
Module
wijmo.collections
File
wijmo.js
Array that sends notifications on changes.
The class raises the collectionChanged event when changes are made with the push, pop, splice, insert,
or remove methods.
Warning: Changes made by assigning values directly to array members or to the length of the array do
not raise the collectionChanged event.
Constructor
Name
Parameters
Description
constructor
(data)
data (any): Array containing items used to Initializes a new instance of an

populate the ObservableArray.
ObservableArray.
Returns: void
Properties
Name
Type
F collectionChanged
Description
isUpdating

Methods
Name
Parameters
Description
beginUpdate()
Suspends notifications until the next

call to endUpdate.
clear()
Removes all items from the array.
deferUpdate(fn)
Wijmo 5
fn (Function): Function to be executed

without updates.

Returns: void

until the function finishes. This method
ensures endUpdate is called even if
the function throws.
April 2015
79/535
Name
Parameters
Description
endUpdate()
Resumes notifications suspended by a

call to beginUpdate.

(interfaceName)
Returns true if the caller queries for a

Returns: True if the caller queries for a

indexOf
(searchElement,
fromIndex)
searchElement (any): Element to locate Searches for an item in the array.

in the array.
fromIndex (number): The index where
the search should start.
Returns: The index of the item in the
array, or -1 if the item was not found.
insert(index, item)
index (number): Position where the

item will be added.
item (any): Item to add to the array.
Inserts an item at a specific position in

the array.
Returns: void
onCollectionChanged e (): Contains a description of the
(e)
change.
(default value:
reset)
Returns: void
push(item)
Appends an item to the array.
Returns: The new length of the array.

removeAt(index)
index (number): Position of the item to Removes an item at a specific position

remove.
in the array.
Returns: void
setAt(index, item)

item will be assigned.
item (any): Item to assign to the array.
Assigns an item at a specific position in

the array.
Returns: void
slice(begin, end)
Wijmo 5
begin (number): Position where the

Creates a shallow copy of a portion of
copy starts.
an array.
end (number): Position where the copy
ends.
April 2015
80/535
Name
Parameters
Description
Returns: A shallow copy of a portion of

an array.
sort(compareFn)
compareFn (Function): Specifies a

Sorts the elements of the array in
function that defines the sort order. If
place.
specified, the function should take two
arguments and should return -1, +1, or
0 to indicate the first argument is
smaller, greater than, or equal to the
second argument. If omitted, the array is
sorted in dictionary order according to
the string conversion of each element.
Returns: A copy of the sorted array.
splice(index, count,
item)
index (number): Position where items

will be added or removed.
count (number): Number of items to
remove from the array.
Removes and/or adds items to the

array.
Returns: An array containing the

removed elements.
Wijmo 5
April 2015
81/535
PageChangingEventArgs Class
Base Class
CancelEventArgs
Module
wijmo.collections
File
wijmo.js
Provides data for the pageChanging event
Constructor
Name
Parameters
Description
constructor
(newIndex)
newIndex (number): Index of the page

that is about to become current.

PageChangingEventArgs.
Returns: void
Properties
Name
F cancel
Type
Description
boolean

should be canceled.
SF empty
F newPageIndex
Wijmo 5

data.
number
Gets the index of the page that is about to become

current.
April 2015
82/535
PropertyGroupDescription Class
Base Class
GroupDescription
Module
wijmo.collections
File
wijmo.js
Describes the grouping of items using a property name as the criterion.
For example, the code below causes a CollectionView to group items by the value of their 'country'
property:
var gd = new wijmo.collections.PropertyGroupDescription('country');
You may also specify a callback function that generates the group name. For example, the code below
causes a CollectionView to group items by the first letter of the value of their 'country' property:
var gd = new wijmo.collections.PropertyGroupDescription('country',
function(item, propName) {
return item[propName][0]; // return country's initial
});
Constructor
Name
Parameters
Description
constructor
(property,
converter)
property (string): The name of the

property that specifies which group an
item belongs to.
converter (Function): A callback function
that takes an item and a property name
and returns the group name. If not
specified, the group name is the property
value for the item.

PropertyGroupDescription.
Returns: void
Methods
Name
Parameters
Description
groupNameFromItem item (any): The item to get group name Returns the group name for the given
(item, level)
for.
item.
level (number): The zero-based group
level index.
Wijmo 5
April 2015
83/535
Name
Parameters
Description
Returns: The name of the group the

item belongs to.
namesMatch
(groupName,
itemName)
Wijmo 5
groupName (any): The name of the

Returns a value that indicates whether
group.
the group name and the item name
itemName (any): The name of the item. match (which implies that the item
belongs to the group).
Returns: True if the names match;
otherwise, false.
April 2015
84/535
SortDescription Class
Module
wijmo.collections
File
wijmo.js
Describes a sorting criterion.
Constructor
Name
Parameters
Description
constructor
(property,
ascending)
property (string): Name of the property to Initializes a new instance of a

sort on.
SortDescription.
ascending (boolean): Whether to sort in
ascending order.
Returns: void
Properties
Name
Type
Description
ascending
boolean
Gets a value that determines whether to sort the values in

ascending order.
property
string
Gets the name of the property used to sort.
Wijmo 5
April 2015
85/535
ICollectionView Class
Implements
INotifyCollectionChanged, IQueryInterface
Module
wijmo.collections
File
wijmo.js
Enables collections to have the functionalities of current record management, custom sorting, filtering,
and grouping.
This is a JavaScript version of the ICollectionView interface used in Microsoft's XAML platform. It provides
a consistent, powerful, and MVVM-friendly way to bind data to UI elements.
Wijmo includes several classes that implement ICollectionView. The most common is CollectionView,
which works based on regular JavsScript arrays.
Properties
Name
Type
Description
F canFilter
boolean
Gets a value that indicates whether this view supports

filtering via the filter property.
F canGroup
boolean

grouping via the groupDescriptions property.
F canSort
boolean

sorting via the sortDescriptions property.
F currentChanged
Event
Occurs after the current item changes.
F currentChanging
Event
Occurs before the current item changes.
F currentItem
any
Gets the current item in the view.
F currentPosition
number
Gets the ordinal position of the current item in the view.
F filter
IPredicate
Gets or sets a callback used to determine if an item is

suitable for inclusion in the view.
NOTE: If the filter function needs a scope (i.e. a meaningful
'this' value), then remember to set the filter using the
'bind' function to specify the 'this' object. For example:
collectionView.filter = this._filter.bind(this);
F groupDescriptions
ObservableArray Gets a collection of GroupDescription objects that

describe how the items in the collection are grouped in the
view.
F groups
any
Gets the top-level groups.
F isEmpty
boolean
Gets a value that indicates whether this view contains no

items.
Wijmo 5
April 2015
86/535
Name
Type
Description
F items
any
Gets the filtered, sorted, grouped items in the view.
F sortDescriptions
ObservableArray Gets a collection of SortDescription objects that describe

how the items in the collection are sorted in the view.
F sourceCollection
any
Gets or sets the collection object from which to create this

view.
Methods
Name
Parameters
Description
beginUpdate()
contains(item)
Suspends refreshes until the next call

to endUpdate.
item (any): The item to locate in the
collection.
Returns a value that indicates

whether a given item belongs to this
view.
Returns: boolean
deferUpdate(fn)
fn (Function): Function to be executed Executes a function within a

within the beginUpdate/endUpdate
block.
Returns: void
until the function has been executed.
This method ensures endUpdate is
called even if the function throws.
endUpdate()
moveCurrentTo(item)
Resumes refreshes suspended by a

item (any): The item to set as the
currentItem.
Sets the specified item to be the

current item in the view.
Returns: boolean
moveCurrentToFirst()
Sets the first item in the view as the

current item.
moveCurrentToLast()
Sets the last item in the view as the

current item.
moveCurrentToNext()
Sets the item after the current item in

moveCurrentToPosition index (number): The index of the item Sets the item at the specified index in
(index)
to set as the currentItem.
Returns: boolean
moveCurrentToPrevious
()
Sets the item before the current item

in the view as the current item.
refresh()
Re-creates the view using the current

sort, filter, and group parameters.
Wijmo 5
April 2015
87/535
IComparer Class
Module
wijmo.collections
File
wijmo.js
Represents the method that compares two objects.
Wijmo 5
April 2015
88/535
IEditableCollectionView Class
Implements
ICollectionView
Module
wijmo.collections
File
wijmo.js
Defines methods and properties that extend ICollectionView to provide editing capabilities.
Properties
Name
Type
Description
F canAddNew
boolean
Gets a value that indicates whether a new item can be

added to the collection.
F canCancelEdit
boolean
Gets a value that indicates whether the collection view can

discard pending changes and restore the original values of
an edited object.
F canRemove
boolean
Gets a value that indicates whether items can be removed

F currentAddItem
any
Gets the item that is being added during the current add
transaction.
F currentEditItem
any
Gets the item that is being edited during the current edit
transaction.
F isAddingNew
boolean
Gets a value that indicates whether an add transaction is in

progress.
F isEditingItem
boolean
Gets a value that indicates whether an edit transaction is in

progress.
Methods
Name
Parameters
Description
addNew()
Adds a new item to the collection.
cancelEdit()
Ends the current edit transaction and, if

possible, restores the original value to the
item.
cancelNew()

discards the pending new item.
commitEdit()
Ends the current edit transaction and

saves the pending changes.
commitNew()

saves the pending new item.
editItem(item)
item (any): Item to edit.
Begins an edit transaction of the specified

item.
Returns: void
Wijmo 5
April 2015
89/535
Name
Parameters
Description
remove(item)
item (any): Item to remove from the

collection.
Removes the specified item from the

collection.
Returns: void
removeAt(index) index (number): Index of the item to
remove from the collection.
Removes the item at the specified index

Returns: void
Wijmo 5
April 2015
90/535
INotifyCollectionChanged Class
Module
wijmo.collections
File
wijmo.js
Notifies listeners of dynamic changes, such as when items get added and removed or when the collection
is sorted, filtered, or grouped.
Properties
Name
F collectionChanged
Wijmo 5
Type
Description
Event
April 2015
91/535
IPagedCollectionView Class
Implements
ICollectionView
Module
wijmo.collections
File
wijmo.js
Defines methods and properties that extend ICollectionView to provide paging capabilities.
Properties
Name
Type
Description
F canChangePage
boolean
Gets a value that indicates whether the pageIndex value

can change.
F isPageChanging
boolean
Gets a value that indicates whether the index is changing.
F itemCount
number
Gets the number of items in the view taking paging into

account.
To get the total number of items, use the totalItemCount
property.
Notice that this is different from the .NET
IPagedCollectionView, where itemCount and
totalItemCount both return the count before paging is
applied.
F pageChanged
Event
Occurs after the page index changes.
F pageChanging
Event
Occurs before the page index changes.
F pageIndex
number
Gets the zero-based index of the current page.
F pageSize
number
Gets or sets the number of items to display on a page.
F totalItemCount
number
Gets the total number of items in the view before paging is

applied.
To get the number of items in the current view not taking
paging into account, use the itemCount property.
Notice that this is different from the .NET
IPagedCollectionView, where itemCount and
totalItemCount both return the count before paging is
applied.
Methods
Name
Parameters
Description
moveToFirstPage()
Sets the first page as the current page.
moveToLastPage()
Sets the last page as the current page.
Wijmo 5
April 2015
92/535
Name
Parameters
Description
moveToNextPage()
moveToPage(index)
Moves to the page after the current

page.
index (number): Index of the page to
move to.
Moves to the page at the specified

index.
Returns: boolean
moveToPreviousPage
()
Wijmo 5
Moves to the page before the current

page.
April 2015
93/535
IPredicate Class
Module
wijmo.collections
File
wijmo.js
Represents a method that takes an item of any type and returns a boolean that indicates whether the
object meets a set of criteria.
Wijmo 5
April 2015
94/535
NotifyCollectionChangedAction Enum
Module
wijmo.collections
File
wijmo.js
Describes the action that caused the collectionChanged event.
Values
Name
Description
Add
An item was added to the collection.
Change An item was changed or replaced.

Remove An item was removed from the collection.
Reset
Wijmo 5
Several items changed simultaneously (for example, the collection was sorted, filtered, or
grouped).
April 2015
95/535
Module wijmo.grid
File
wijmo.grid.js
Defines the FlexGrid control and associated classes.
The example below creates a FlexGrid control and binds it to a 'data' array. The grid has three columns,
specified by explicitly populating the grid's columns array.
Live Example
Wijmo 5
April 2015
96/535
Classes
Name
Description
CellFactory
Creates HTML elements that represent cells within a FlexGrid control.
CellRange
Represents a rectangular group of cells defined by two row indices and two
column indices.
CellRangeEventArgs
Provides arguments for CellRange events.
Column
Represents a column on the grid.
ColumnCollection
Represents a collection of Column objects in a FlexGrid control.
DataMap
Represents a data map for use with the column's dataMap property.
Data maps provide the grid with automatic look up capabilities. For example,
you may want to display a customer name instead of his ID, or a color name
instead of its RGB value.
The code below binds a grid to a collection of products, then assigns a
DataMap to the grid's 'CategoryID' column so that the grid displays the
category names rather than the raw IDs.
// bind grid to products
var flex = new wijmo.grid.FlexGrid();
flex.itemsSource = products;
// map CategoryID column to show category name instead of ID
var col = flex.columns.getColumn('CategoryID');
col.dataMap = new wijmo.grid.DataMap(categories, 'CategoryID', 'CategoryName');
FlexGrid
The FlexGrid control provides a powerful and flexible way to display and edit
data in a tabular format.
The FlexGrid control is a full-featured grid, providing all the features you are
used to including several selection modes, sorting, column reordering,
grouping, filtering, editing, custom cells, XAML-style star-sizing columns, row
and column virtualization, etc.
FormatItemEventArgs Provides arguments for the formatItem event.

GridPanel
Represents a logical part of the grid, such as the column headers, row headers,
and scrollable data part.
GroupRow
Represents a row that serves as a header for a group of rows.
HitTestInfo
Contains information about the part of a FlexGrid control that exists at a

specified page coordinate.
MergeManager
Defines the FlexGrid's cell merging behavior.

An instance of this class is automatically created and assigned to the grid's
mergeManager property to implement the grid's default merging behavior.
If you want to customize the default merging behavior, create a class that
derives from MergeManager and override the getMergedRange method.
Row
Wijmo 5
Represents a row in the grid.
April 2015
97/535
Name
Description
RowCol
An abstract class that serves as a base for the Row and Column classes.
RowColCollection
Abstract class that serves as a base for row and column collections.
RowCollection
Represents a collection of Row objects in a FlexGrid control.
Wijmo 5
April 2015
98/535
Enumerations
Name
Description
AllowDragging
Specifies constants that define the row/column dragging behavior.
AllowMerging
Specifies constants that define which areas of the grid support cell merging.
AllowResizing
Specifies constants that define the row/column sizing behavior.
AutoSizeMode
Specifies constants that define the row/column auto-sizing behavior.
CellType
Identifies the type of cell in a GridPanel.
HeadersVisibility Specifies constants that specify the visibility of row and column headers.
RowColFlags
Flags that specify the state of a grid row or column.
SelectedState
Specifies the selected state of a cell.
SelectionMode
Specifies constants that define the selection behavior.
SelMove
Specifies a type of movement for the selection.
Wijmo 5
April 2015
99/535
CellFactory Class
Module
wijmo.grid
File
wijmo.grid.js
Creates HTML elements that represent cells within a FlexGrid control.
Methods
Name
Parameters
Description
updateCell
(panel, r, c, cell,
rng)
panel (GridPanel): The part of the grid

that owns the cell.
r (number): The index of the row
containing the cell.
c (number): The index of the column
containing the cell.
cell (HTMLElement): The element that
represents the cell.
rng (CellRange): The CellRange object
that contains the cell's merged range, or
null if the cell is not merged.
Creates or updates a cell in the grid.
Returns: void
Wijmo 5
April 2015
100/535
CellRange Class
Module
wijmo.grid
File
wijmo.grid.js
Represents a rectangular group of cells defined by two row indices and two column indices.
Constructor
Name
Parameters
Description
constructor(r, c, r (number): The index of the first row in

Initializes a new instance of a CellRange.
r2, c2)
the range.
(default value: -1)
c (number): The index of the first column
in the range.
(default value: -1)
r2 (number): The index of the last row in
the range.
(default value: r)
c2 (number): The index of the first column
in the range.
(default value: c)
Returns: void
Properties
Name
Type
Description
bottomRow
number
Gets the index of the bottom row in the range.
col
number
Gets or sets the index of the first column in the range.
col2
number
Gets or sets the index of the second column in the range.
columnSpan
number
Gets the number of columns in the range.
isSingleCell
boolean
Checks whether this range corresponds to a single cell

(beginning and ending rows have the same index, and
beginning and ending columns have the same index).
isValid
boolean
Checks whether the range contains valid row and column

indices (row and column values are zero or greater).
leftCol
number
Gets the index of the leftmost column in the range.
rightCol
number
Gets the index of the rightmost column in the range.
row
number
Gets or sets the index of the first row in the range.
row2
number
Gets or sets the index of the second row in the range.
rowSpan
number
Gets the number of rows in the range.
topRow
number
Gets the index of the top row in the range.
Methods
Wijmo 5
April 2015
101/535
Name
Parameters
Description
clone()
contains(r, c)
Creates a copy of the range.

r (any): The CellRange object or row index Checks whether the range contains
to find.
another range or a specific cell.
c (number): The column index (required if
the r parameter is not a CellRange object).
Returns: boolean
containsColumn c (number): The index of the column to

(c)
find.
Checks whether the range contains a

given column.
Returns: boolean
containsRow(r) r (number): The index of the row to find.
Checks whether the range contains a

given row.
Returns: boolean
equals(rng)
rng (CellRange): The CellRange object to

compare to this range.
Checks whether the range equals another

range.
Returns: boolean
getRenderSize
(panel)
panel (GridPanel): The GridPanel object

that contains the range.
Gets the rendered size of this range.
Returns: A Size object that represents the

sum of row heights and column widths in
the range.
intersects(rng)
rng (CellRange): The CellRange object to

check.
Checks whether the range intersects

another range.
Returns: boolean
Wijmo 5
April 2015
102/535
CellRangeEventArgs Class
Base Class
CancelEventArgs
Derived Classes
FormatItemEventArgs
Module
wijmo.grid
File
wijmo.grid.js
Provides arguments for CellRange events.
Constructor
Name
Parameters
Description
constructor
(panel, rng)
panel (GridPanel): GridPanel that

contains the range.
CellRangeEventArgs.
rng (CellRange): Range of cells affected by
the event.
Returns: void
Properties
Name
Type
Description
boolean

should be canceled.
cellRange
CellRange
Gets the CellRange affected by this event.
col
number
Gets the column affected by this event.
F cancel
SF empty

data.
panel
GridPanel
Gets the GridPanel affected by this event.
row
number
Gets the row affected by this event.
Wijmo 5
April 2015
103/535
Column Class
Base Class
RowCol
Module
wijmo.grid
File
wijmo.grid.js
Represents a column on the grid.
Constructor
Name
Parameters
Description
constructor
(options)
options (any): Initialization options for the Initializes a new instance of a Column.
column.
Returns: void
Properties
Name
Type
Description
aggregate
Aggregate
Gets or sets the Aggregate to display in the group header

rows for the column.
align
string
Gets or sets the horizontal alignment of items in the

column.
The default value for this property is null, which causes the
grid to select the alignment automatically based on the
column's dataType (numbers are right-aligned, Boolean
values are centered, and other types are left-aligned).
If you want to override the default alignment, set this
property to 'left,' 'right,' or 'center,'
allowDragging
boolean
Gets or sets a value indicating whether the user can move

the row or column to a new position with the mouse.
(inherited from RowCol).
allowMerging
boolean
Gets or sets a value indicating whether cells in the row or

column can be merged.
allowResizing
boolean
Gets or sets a value indicating whether the user can resize

the row or column with the mouse.
allowSorting
boolean
Gets or sets a value indicating whether the user can sort the
column by clicking its header.
binding
string
Gets or sets the name of the property the column is bound

to.
Wijmo 5
April 2015
104/535
Name
Type
Description
cssClass
string
Gets or sets a CSS class name to use when rendering nonheader cells in the row or column.
currentSort
string
Gets a string that describes the current sorting applied to

the column. Possible values are '+' for ascending order, '-'
for descending order, or null for unsorted columns.
dataMap
DataMap
Gets or sets the DataMap used to convert raw values into

display values for the column.
Columns with an associated dataMap show drop-down
buttons that can be used for quick editing. If you do not
want to show the drop-down buttons, set the column's
showDropDown property to false.
Cell drop-downs require the wijmo.input module to be
loaded.
dataType
DataType
Gets or sets the type of value stored in the column.

Values are coerced into the proper type when editing the
grid.
format
string
Gets or sets the format string used to convert raw values

into display values for the column (see Globalize).
grid
FlexGrid
Gets the FlexGrid that owns the row or column.

header
string
Gets or sets the text displayed in the column header.
index
number
Gets the index of the row or column in the parent

collection.
inputType
string
Gets or sets the "type" attribute of the HTML input element

used to edit values in this column.
By default, this property is set to "tel" for numeric columns,
and to "text" for all other non-boolean column types. The
"tel" input type causes mobile devices to show a numeric
keyboard that includes a negative sign and a decimal
separator.
Use this property to change the default setting if the
default does not work well for the current culture, device, or
application. In these cases, try setting the property to
"number" or simply "text."
isContentHtml
Wijmo 5
boolean

column contain HTML content rather than plain text.
April 2015
105/535
Name
Type
Description
isReadOnly
boolean

column can be edited.
isSelected
boolean
Gets or sets a value indicating whether the row or column is

selected.
isVisible
boolean
Gets a value indicating whether the row or column is visible

and not collapsed.
This property is read-only. To change the visibility of a row
or column, use the visible property instead.

mask
string
Gets or sets a mask to use while editing values in this

column.
The mask format is the same used by the InputMask
control.
If specified, the mask must be compatible with the value of
the format property. For example, the mask '99/99/9999'
can be used for entering dates formatted as 'MM/dd/yyyy'.
maxWidth
number
Gets or sets the maximum width of the column.
minWidth
number
Gets or sets the minimum width of the column.
name
string
Gets or sets the name of the column.

The column name can be used to retrieve the column using
the getColumn method.
pos
number
Gets the position of the row or column.

renderSize
number
Gets the render size of the row or column. This property

accounts for visibility, default size, and min and max sizes.
renderWidth
number
Gets the render width of the column.

The value returned takes into account the column's
visibility, default size, and min and max sizes.
required
boolean
Gets or sets whether values in the column are required.

By default, this property is set to null, which means values
are required, but string columns may contain empty strings.
Wijmo 5
April 2015
106/535
Name
Type
Description
When set to true, values are required and empty strings are
not allowed.
When set to false, null values and empty strings are
allowed.
showDropDown
boolean
Gets or sets a value indicating whether the grid adds dropdown buttons to the cells in this column.
The drop-down buttons are shown only if the column has a
dataMap set and is editable. Clicking on the drop-down
buttons causes the grid to show a list where users can
select the value for the cell.
Cell drop-downs require the wijmo.input module to be
loaded.
size
number
Gets or sets the size of the row or column. Setting this

property to null or negative values causes the element to
use the parent collection's default size.
sortMemberPath
string
Gets or sets the name of the property to use when sorting

this column.
Use this property in cases where you want the sorting to be
performed based on values other than the ones speficied
by the binding property.
Setting this property is null causes the grid to use the value
of the binding property to sort the column.
visible
boolean

visible.
width
any
Gets or sets the width of the column.

Column widths may be positive numbers (sets the column
width in pixels), null or negative numbers (uses the
collection's default column width), or strings in the format
'{number}*' (star sizing).
The star-sizing option performs a XAML-style dynamic
sizing where column widths are proportional to the number
before the star. For example, if a grid has three columns
with widths "100", "*", and "3*", the first column will be 100
pixels wide, the second will take up 1/4th of the remaining
Wijmo 5
April 2015
107/535
Name
Type
Description
space, and the last will take up the remaining 3/4ths of the
remaining space.
Star-sizing allows you to define columns that automatically
stretch to fill the width available. For example, set the width
of the last column to "*" and it will automatically extend to
fill the entire grid width so there's no empty space. You may
also want to set the column's minWidth property to
prevent the column from getting too narrow.
wordWrap
boolean

column wrap their content.
Methods
Name
Parameters
Description
getAlignment()
Gets the actual column alignment.

Returns the value of the align property
if it is not null, or selects the alignment
based on the column's dataType.
onPropertyChanged
()
Wijmo 5
Marks the owner list as dirty and

refreshes the owner grid.
April 2015
108/535
ColumnCollection Class
Base Class
RowColCollection
Module
wijmo.grid
File
wijmo.grid.js
Represents a collection of Column objects in a FlexGrid control.
Properties
Name
Type
F collectionChanged
defaultSize

(inherited from ObservableArray).
number
firstVisibleIndex
frozen
Description
Gets or sets the default size of elements in the collection.

(inherited from RowColCollection).
Gets the index of the first visible column (where the outline
tree is displayed).
number
Gets or sets the number of frozen rows or columns in the

collection.
Frozen rows and columns do not scroll, and instead remain
at the top or left of the grid, next to the fixed cells. Unlike
fixed cells, however, frozen cells may be selected and
edited like regular cells.

isUpdating

maxSize
number
Gets or sets the maximum size of elements in the

collection.
minSize
number
Gets or sets the minimum size of elements in the

collection.
Methods
Name
Parameters
Description
beginUpdate()
Wijmo 5

call to endUpdate.
April 2015
109/535
Name
Parameters
Description
canMoveElement(src, src (number): The index of the element Checks whether an element can be
dst)
to move.
moved from one position to another.
dst (number): The position to which to (inherited from RowColCollection).
move the element, or specify -1 to
append the element.
Returns: Returns true if the move is
valid, false otherwise.
clear()
constructor(grid,
defaultSize)

grid (FlexGrid): The FlexGrid that owns Initializes a new instance of a
the collection.
_RowColCollection.
defaultSize (number): The default size (inherited from RowColCollection).
of the elements in the collection.
Returns: void
deferUpdate(fn)

without updates.

Returns: void


endUpdate()
getColumn(name)

name (string): The name or binding to
find.
Gets a column by name or by binding.
The method searches the column by

Returns: The column with the specified name. If a column with the given name
name or binding, or null if not found.
is not found, it searches by binding.
The searches are case-sensitive.
getItemAt(position)
position (number): Position of the item Gets the index of the element at a
in the collection, in pixels.
given physical position.
Returns: number
getNextCell(index,
move, pageSize)
index (number): Starting index for the

search.
move (SelMove): Type of move (size
and direction).
Wijmo 5
April 2015
Finds the next visible cell for a selection

change.
110/535
Name
Parameters
Description
pageSize (number): Size of a page (in

case the move is a page up/down).
Returns: void
getTotalSize()
Gets the total size of the elements in

the collection.

(interfaceName)


indexOf(name)
insert(index, item)
name (any): The name or binding to

find.
Gets the index of a column by name or

binding.
Returns: The index of column with the

specified name or binding, or -1 if not
found.
The method searches the column by

name. If a column with the given name
is not found, it searches by binding.
The searches are case-sensitive.

item will be added.

the array.
Returns: void
isFrozen(index)
index (number): The index of the row

or column to check.
Checks whether a row or column is

frozen.
Returns: boolean
moveElement(src,
dst)
src (number): Index of the element to

move.
dst (number): Position where the
element should be moved to (-1 to
append).
Moves an element from one position

to another.
Returns: void
onCollectionChanged e ()
(e)
(default value: wijmo.collections.
reset)
Keeps track of dirty state and invalidate

grid on changes.
Returns: void
push(item)

Wijmo 5
April 2015
111/535
Name
Parameters
Description
removeAt(index)

remove.
in the array.
Returns: void
setAt(index, item)


the array.
Returns: void
slice(begin, end)

copy starts.
an array.
end (number): Position where the copy (inherited from ObservableArray).
ends.
an array.
sort(compareFn)

place.
specified, the function should take two (inherited from ObservableArray).
item)

are added or removed.
Removes or adds items to the array.


removed elements.
Wijmo 5
April 2015
112/535
DataMap Class
Module
wijmo.grid
File
wijmo.grid.js
Represents a data map for use with the column's dataMap property.
Data maps provide the grid with automatic look up capabilities. For example, you may want to display a
customer name instead of his ID, or a color name instead of its RGB value.
The code below binds a grid to a collection of products, then assigns a DataMap to the grid's
'CategoryID' column so that the grid displays the category names rather than the raw IDs.
// bind grid to products
var flex = new wijmo.grid.FlexGrid();
flex.itemsSource = products;
// map CategoryID column to show category name instead of ID
var col = flex.columns.getColumn('CategoryID');
col.dataMap = new wijmo.grid.DataMap(categories, 'CategoryID', 'CategoryName');
Constructor
Name
Parameters
Description
constructor
(itemsSource,
selectedValuePath,
displayMemberPath)
itemsSource (any): An array or

Initializes a new instance of a DataMap.
ICollectionView that contains the items
to map.
selectedValuePath (string): The name of
the property that contains the keys (data
values).
displayMemberPath (string): The name
of the property to use as the visual
representation of the items.
Returns: void
Properties
Name
Type
Description
collectionView
ICollectionView Gets the ICollectionView object that contains the map

data.
displayMemberPath
string
Gets the name of the property to use as the visual

representation of the item.
selectedValuePath
string
Gets the name of the property to use as a key for the item
(data value).
Methods
Wijmo 5
April 2015
113/535
Name
Parameters
Description
getDisplayValue key (any): The key of the item to retrieve.

(key)
Returns: any
Gets the display value that corresponds

to a given key.
getDisplayValues
()
Gets an array with all of the display

values on the map.
getKeyValue
(displayValue)
displayValue (string): The display value of Gets the key that corresponds to a given
the item to retrieve.
display value.
Returns: any
getKeyValues()
Gets an array with all of the keys on the

map.
onMapChanged
()
Raises the mapChanged event.
Events
Name
Arguments
Description
mapChanged
EventArgs
Occurs when the map data changes.
Wijmo 5
April 2015
114/535
FlexGrid Class
Base Class
Control
Module
wijmo.grid
File
wijmo.grid.js
The FlexGrid control provides a powerful and flexible way to display and edit data in a tabular format.
The FlexGrid control is a full-featured grid, providing all the features you are used to including several
selection modes, sorting, column reordering, grouping, filtering, editing, custom cells, XAML-style starsizing columns, row and column virtualization, etc.
Constructor
Name
Parameters
Description
constructor
(element,
options)
element (any): The DOM element that will Initializes a new instance of a FlexGrid
host the control, or a selector for the host control.
element (e.g. '#theCtrl').
Returns: void
Properties
Name
Type
Description
activeEditor
HTMLInputElement Gets the HTMLInputElement that represents the cell

editor currently active.
allowAddNew
boolean
Gets or sets a value that indicates whether the grid should

provide a new row template so users can add items to the
source collection.
The new row template will not be displayed if the
isReadOnly property is set to true.
allowDelete
boolean
Gets or sets a value that indicates whether the grid should

delete selected rows when the user presses the Delete
key.
Selected rows will not be deleted if the isReadOnly
property is set to true.
allowDragging
AllowDragging
Gets or sets whether users are allowed to drag rows

and/or columns with the mouse.
allowMerging
AllowMerging
Gets or sets which parts of the grid provide cell merging.
Wijmo 5
April 2015
115/535
Name
Type
Description
allowResizing
AllowResizing
Gets or sets whether users may resize rows and/or

columns with the mouse.
If resizing is enabled, users can resize columns by
dragging the right edge of column header cells, or rows
by dragging the bottom edge of row header cells.
Users may also double-click the edge of the header cells
to automatically resize rows and columns to fit their
content. The autosize behavior can be customized using
the autoSizeMode property.
allowSorting
boolean
Gets or sets whether users are allowed to sort columns by

clicking the column header cells.
autoClipboard
boolean
Gets or sets whether the grid should handle clipboard

shortcuts.
The clipboard commands are as follows:
ctrl+C, ctrl+Ins
Copy grid selection to cliboard.

ctrl+V, shift+Ins
Paste clipboard text to grid selection.

Only visible rows and columns are included in clipboard
operations.
Read-only cells are not affected by paste operations.
autoGenerateColumns boolean
Gets or sets whether the grid should generate columns

automatically based on the itemsSource.
autoSizeMode
Gets or sets which cells should be taken into account

when auto-sizing a row or column.
AutoSizeMode
This property controls what happens when users doubleclick the edge of a column header.
By default, the grid will automatically set the column
width based on the content of the header and data cells
in the column. This property allows you to change that to
include only the headers or only the data.
cellFactory
CellFactory
Gets the CellFactory that creates and updates cells for

this grid.
cells
GridPanel
Gets the GridPanel that contains the data cells.
childItemsPath
string
Gets or sets the name of the property used to generate

child rows in hierarchical grids.
Wijmo 5
April 2015
116/535
Name
Type
Description
clientSize
Size
Gets the client size of the control (control size minus

headers minus scrollbars).
collectionView
ICollectionView
Gets the ICollectionView that contains the grid data.
columnHeaders
GridPanel
Gets the GridPanel that contains the column header cells.
columnLayout
string
Gets or sets a JSON string that defines the current column

layout.
The column layout string represents an array with the
columns and their properties. It 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.
The column layout string does not include dataMap
properties, because data maps are not serializable.
columns
ColumnCollection
Gets the grid's column collection.
controlRect
Rect
Gets the bounding rectangle of the control in page

coordinates.
deferResizing
boolean
Gets or sets whether row and column resizing should be

deferred until the user releases the mouse button.
By default, deferResizing is set to false, causing rows and
columns to be resized as the user drags the mouse.
Setting this property to true causes the grid to show a
resizing marker and to resize the row or column only
when the user releases the mouse button.
editRange
CellRange
Gets a CellRange that identifies the cell currently being

edited.
frozenColumns
number
Gets or sets the number of frozen columns.

Frozen columns do not scroll, but the cells they contain
may be selected and edited.
frozenRows
number
Gets or sets the number of frozen rows.

Frozen rows do not scroll, but the cells they contain may
be selected and edited.
groupHeaderFormat
string
Gets or sets the format string used to create the group

header content.
The string may contain any text, plus the following
replacement strings:
Wijmo 5
April 2015
117/535
Name
Type
Description
{name}: The name of the property being grouped

on.
{value}: The value of the property being grouped
on.
{level}: The group level.
{count}: The total number of items in this group.
The default value for this property is '{name}:

<b>{value}</b>({count:n0} items)', which creates group
headers similar to 'Country: UK (12 items)' or 'Country:
Japan (8 items)'.
headersVisibility
HeadersVisibility
Gets or sets a value that determines whether the row and

column headers are visible.
hostElement
HTMLElement

(inherited from Control).
isReadOnly
boolean
Gets or whether the user can edit the grid cells by typing
into them.
isTouching
boolean

isUpdating
boolean

being updated.
itemFormatter
Function
Gets or sets a formatter function used to customize cells

on this grid.
The formatter function can add any content to any cell. It
provides complete flexibility over the appearance and
behavior of grid cells.
If specified, the function should take four parameters: the
GridPanel that contains the cell, the row and column
indices of the cell, and the HTML element that represents
the cell. The function will typically change the innerHTML
property of the cell element.
For example:
flex.itemFormatter = function(panel, r, c, cell) {
if (panel.cellType == CellType.Cell) {
// draw sparklines in the cell
var col = panel.columns[c];
if (col.name == 'sparklines') {
cell.innerHTML = getSparklike(panel, r, c);
}
}
}
Wijmo 5
April 2015
118/535
Name
Type
Description
Note that the FlexGrid recycles cells, so if your
itemFormatter modifies the cell's style attributes, you
must make sure that it resets these attributes for cells that
should not have them. For example:
flex.itemFormatter = function(panel, r, c, cell) {
// reset attributes we are about to customize
var s = cell.style;
s.color = '';
s.backgroundColor = '';
// customize color and backgroundColor attributes for
this cell
...
}
If you have a scenario where multiple clients may want to

customize the grid rendering (for example when creating
directives or re-usable libraries), consider using the
formatItem event instead. The event allows multiple
clients to attach their own handlers.
itemsSource
any
Gets or sets the array or ICollectionView that contains

items shown on the grid.
mergeManager
MergeManager
Gets or sets the MergeManager object responsible for

determining how cells should be merged.
rowHeaders
GridPanel
Gets the GridPanel that contains the row header cells.
rows
RowCollection
Gets the grid's row collection.
scrollPosition
Point
Gets or sets a Point that represents the value of the grid's

scrollbars.
scrollSize
Size
Gets the size of the grid content in pixels.
selection
CellRange
Gets or sets the current selection.
selectionMode
SelectionMode
Gets or sets the current selection mode.
showGroups
boolean
Gets or sets whether the grid should insert group rows to

delimit data groups.
Data groups are created by modifying the
groupDescriptions property of the ICollectionView
object used as a the grid's itemsSource.
showSort
boolean
Gets or sets whether the grid should display sort

indicators in the column headers.
Sorting is controlled by the sortDescriptions property of
the ICollectionView object used as a the grid's
itemsSource.
Wijmo 5
April 2015
119/535
Name
Type
Description
sortRowIndex
number
Gets or sets the index of row in the column header panel

that shows and changes the current sort.
This property is set to null by default, causing the last row
in the columnHeaders panel to act as the sort row.
topLeftCells
GridPanel
Gets the GridPanel that contains the top left cells.
treeIndent
number
Gets or sets the indent used to offset row groups of

different levels.
viewRange
CellRange
Gets the range of cells currently in view.
Methods
Name
Parameters
Description
applyTemplate(classNames, classNames (string): Names

template, parts, namePart)
of classes to add to the
control's host element.
template (string): An HTML
string that defines the control
template.
parts (Object): A dictionary
of part variables and their
names.
namePart (string): Name of
the part to be named after
the host element. This
determines how the control
submits data when used in
forms.

members.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

autoSizeColumn(c, header,
extra)
Wijmo 5
c (number): Index of the

column to resize.
header (boolean): Whether
the column index refers to a
regular or a header row.
extra (number): Extra
April 2015
Resizes a column to fit its content.
120/535
Name
Parameters
Description
spacing, in pixels.
(default value: 4)
Returns: void
autoSizeColumns
(firstColumn, lastColumn,
header, extra)
firstColumn (number): Index

of the first column to resize
(defaults to the first column).
lastColumn (number): Index
of the last column to resize
(defaults to the last column).
the column indices refer to
regular or header columns.
spacing, in pixels.
(default value: 4)
Resizes a range of columns to fit their

content.
The grid will always measure all rows in
the current view range, plus up to 2,000
rows not currently in view. If the grid
contains a large amount of data (say
50,000 rows), then not all rows will be
measured since that could potentially
take a long time.
Returns: void
autoSizeRow(r, header,
extra)
r (number): Index of the row Resizes a row to fit its content.

to resize.
the row index refers to a
regular or a header row.
spacing, in pixels.
(default value: 0)
Returns: void
autoSizeRows(firstRow,
lastRow, header, extra)
firstRow (number): Index of Resizes a range of rows to fit their

the first row to resize.
content.
lastRow (number): Index of
the last row to resize.
the row indices refer to
regular or header rows.
spacing, in pixels.
(default value: 0)
Returns: void
beginUpdate()
Wijmo 5

to endUpdate.
April 2015
121/535
Name
Parameters
Description
collapseGroupsToLevel
(level)
level (number): Maximum

group level to show.
Collapses all the group rows to a given

level.
Returns: void
containsFocus()
deferUpdate(fn)

focused element.
fn (Function): Function to be Executes a function within a
executed.
Returns: void

function throws.

dispose()

endUpdate()

to beginUpdate.
finishEditing(cancel)
cancel (boolean): Whether

pending edits should be
canceled or committed.
Commits any pending edits and exits edit

mode.
Returns: True if the edit

operation finished
successfully.
focus()
getCellBoundingRect(r, c)

r (number): Index of the row Gets a the bounds of a cell element in
that contains the cell.
viewport coordinates.
column that contains the cell. This method returns the bounds of cells
in the cells panel (scrollable data cells).
Returns: Rect
To get the bounds of cells in other
panels, use the getCellBoundingRect
method in the appropriate GridPanel
object.
The returned value is a Rect object which
contains the position and dimensions of
Wijmo 5
April 2015
122/535
Name
Parameters
Description
the cell in viewport coordinates. The
viewport coordinates are the same used
by the getBoundingClientRect method.
getCellData(r, c, formatted)
r (number): Index of the row Gets the value stored in a cell in the
scrollable area of the grid.
column that contains the cell.
formatted (boolean):
Whether to format the value
for display.
Returns: any
getClipString(rng)
S getControl(element)
rng (CellRange): CellRange

to copy. If omitted, the
current selection is used.
Gets the content of a CellRange as a

string suitable for copying to the
clipboard.
Returns: string
Hidden rows and columns are not

included in the clip string.
element (any): The DOM

element that is hosting the
DOM element.
control, or a selector for the (inherited from Control).
Returns: Control
getMergedRange(panel, r, c) panel (GridPanel): GridPanel Gets a CellRange that specifies the

that contains the range.
merged extent of a cell in a GridPanel.
r (number): Index of the row
column that contains the cell.
Returns: CellRange
getSelectedState(r, c)
r (number): Row index of the Gets a SelectedState value that indicates

cell to inspect.
the selected state of a cell.
c (number): Column index of
the cell to inspect.
Returns: SelectedState
getTemplate()

Wijmo 5
April 2015
123/535
Name
Parameters
Description
base class.

hitTest(pt, y)
pt (any): Point to investigate,

in page coordinates, or a
MouseEvent object, or x
coordinate of the point.
y (number): Y coordinate of
the point in page coordinates
(if the first parameter is a
number).
Gets a HitTestInfo object with

information about a given point.
For example:
// hit test a point when the user clicks
on the grid
flex.hostElement.addEventListener('click',
function (e) {
var ht = flex.hitTest(e.pageX, e.pageY);
console.log('you clicked a cell of type
"' +
Returns: A HitTestInfo
object with information about
wijmo.grid.CellType[ht.cellType] +
the point.
'".');
});
initialize(options)
options (any): Object that

contains the initialization
data.

code.
Returns: void
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.

Wijmo 5
April 2015
124/535
Name
Parameters
Description

invalidate(fullUpdate)
fullUpdate (boolean):
Whether to update the
control layout as well as the
content.
Invalidates the control causing an

asynchronous refresh.
Returns: void
S invalidateAll(e)
e (HTMLElement): Container Invalidates all Wijmo controls contained

element. If set to null, all
in an HTML element.
Wijmo controls on the page
Returns: void
properly.
properly.

isRangeValid(rng)
rng (CellRange): Range to

check.
Checks whether a given CellRange is valid

for this grid's row and column collections.
Returns: boolean
onAutoSizedColumn(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
Raises the autoSizedColumn event.
Returns: void
Wijmo 5
April 2015
125/535
Name
Parameters
Description
onAutoSizedRow(e)
Raises the autoSizedRow event.
Returns: void
onAutoSizingColumn(e)
Raises the autoSizingColumn event.
Returns: boolean
onAutoSizingRow(e)
Raises the autoSizingRow event.
Returns: boolean
onBeginningEdit(e)
Raises the beginningEdit event.
Returns: True if the event

was not canceled.
onCellEditEnded(e)
Raises the cellEditEnded event.
Returns: void
onCellEditEnding(e)
was not canceled.
Raises the cellEditEnding event.

You can use this event to perform
validation and prevent invalid edits. For
example, the code below prevents users
from entering values that do not contain
the letter 'a'. The code demonstrates how
you can obtain the old and new values
before the edits are applied.
function cellEditEnding (sender, e) {
// get old and new values
var flex = sender,
oldVal = flex.getCellData(e.row, e.col),
newVal = flex.activeEditor.value;
// cancel edits if newVal doesn't
contain 'a'
e.cancel = newVal.indexOf('a') < 0;
}
Wijmo 5
April 2015
126/535
Name
Parameters
Description
onCopied(e)
Raises the copied event.
Returns: void
onCopying(e)
Raises the copying event.

was not canceled.
onDeletingRow(e)
Raises the deletingRow event.
Returns: void
onDraggedColumn(e)
Raises the draggedColumn event.
Returns: void
onDraggedRow(e)
Raises the draggedRow event.
Returns: void
onDraggingColumn(e)
Raises the draggingColumn event.

was not canceled.
onDraggingRow(e)
Raises the draggingRow event.

was not canceled.
onFormatItem(e)
e (FormatItemEventArgs):
FormatItemEventArgs that
Raises the formatItem event.
Returns: void
Wijmo 5
April 2015
127/535
Name
Parameters
Description
onGroupCollapsedChanged e (CellRangeEventArgs):
(e)
Raises the groupCollapsedChanged

event.
Returns: void
onGroupCollapsedChanging e (CellRangeEventArgs):
(e)
Raises the groupCollapsedChanging

event.

was not canceled.
onItemsSourceChanged()
onLoadedRows(e)
Raises the itemsSourceChanged event.

e (EventArgs)
Raises the loadedRows event.
Returns: void
onLoadingRows(e)
e (CancelEventArgs)
Raises the loadingRows event.
Returns: void
onPasted(e)
Raises the pasted event.
Returns: void
onPasting(e)
Raises the pasting event.

was not canceled.
onPrepareCellForEdit(e)
Raises the prepareCellForEdit event.
Returns: void
onResizedColumn(e)
Raises the resizedColumn event.
Returns: void
onResizedRow(e)
Raises the resizedRow event.
Returns: void
Wijmo 5
April 2015
128/535
Name
Parameters
Description
onResizingColumn(e)
Raises the resizingColumn event.

was not canceled.
onResizingRow(e)
Raises the resizingRow event.

was not canceled.
onRowAdded(e)
Raises the rowAdded event.
Returns: void
onRowEditEnded(e)
Raises the rowEditEnded event.
Returns: void
onRowEditEnding(e)
Raises the rowEditEnding event.
Returns: void
onScrollPositionChanged()
onSelectionChanged(e)
Raises the scrollPositionChanged event.

Raises the selectionChanged event.

was not canceled.
onSelectionChanging(e)
Raises the selectionChanging event.

was not canceled.
onSortedColumn(e)
Wijmo 5
April 2015
Raises the sortedColumn event.
129/535
Name
Parameters
Description
Returns: void
onSortingColumn(e)
Raises the sortingColumn event.

was not canceled.
refresh(fullUpdate)
Whether to update the grid
layout and content, or just
the content.
Refreshes the grid display.
Returns: void
refreshCells(fullUpdate,
recycle, cells)
Refreshes the grid display.
Whether to update the grid
layout and content, or just
the content.
recycle (boolean): Whether
to recycle existing elements.
cells (CellRange): List of
CellRange objects that
specifies which cells must be
updated.
Returns: void
scrollIntoView(r, c)
r (number): Index of the row Scrolls the grid to bring a specific cell into
to scroll into view.
view.
column to scroll into view.
Returns: True if the grid
scrolled.
select(rng, show)
rng (any): Range to select.

Selects a cell range and optionally scrolls
show (any): Whether to scroll it into view.
the new selection into view.
Returns: void
setCellData(r, c, value,
coerce)
Wijmo 5
r (number): Index of the row Sets the value of a cell in the scrollable
area of the grid.
c (any): Index, name, or
binding of the column that
contains the cell.
April 2015
130/535
Name
Parameters
Description
value (any): Value to store in

the cell.
coerce (boolean): Whether
to change the value
automatically to match the
column's data type.
Returns: True if the value was
stored successfully, false
otherwise.
setClipString(text, rng)
text (string): Tab and newline Parses a string into rows and columns
delimited text to parse into
and applies the content to a given range.
the grid.
rng (CellRange): CellRange Hidden rows and columns are skipped.
to copy. If omitted, the
current selection is used.
Returns: void
startEditing(fullEdit, r, c)
fullEdit (boolean): Whether

to stay in edit mode when the
user presses the cursor keys.
Defaults to false.
r (number): Index of the row
to be edited. Defaults to the
currently selected row.
column to be edited. Defaults
to the currently selected
column.
Returns: True if the edit
operation started
successfully.
Starts editing a given cell.

Editing in the FlexGrid is very similar to
editing in Excel: Pressing F2 or doubleclicking a cell puts the grid in full-edit
mode. In this mode, the cell editor
remains active until the user presses
Enter, Tab, or Escape, or until he moves
the selection with the mouse. In full-edit
mode, pressing the cursor keys does not
cause the grid to exit edit mode.
Typing text directly into a cell puts the
grid in quick-edit mode. In this mode,
the cell editor remains active until the
user presses Enter, Tab, or Escape, or any
arrow keys.
Full-edit mode is normally used to make
changes to existing values. Quick-edit
mode is normally used for entering new
data quickly.
While editing, the user can toggle
between full and quick modes by
pressing the F2 key.
Events
Wijmo 5
April 2015
131/535
Name
Arguments
Description
autoSizedColumn
CellRangeEventArgs
Occurs after the user auto-sizes a

column by double-clicking the right
edge of a column header cell.
autoSizedRow
CellRangeEventArgs
Occurs after the user auto-sizes a

row by double-clicking the bottom
edge of a row header cell.
autoSizingColumn
CellRangeEventArgs
Occurs before the user auto-sizes a

column by double-clicking the right
edge of a column header cell.
autoSizingRow
CellRangeEventArgs
Occurs before the user auto-sizes a

row by double-clicking the bottom
edge of a row header cell.
beginningEdit
CellRangeEventArgs
Occurs before a cell enters edit

mode.
cellEditEnded
CellRangeEventArgs
Occurs when a cell edit has been

committed or canceled.
cellEditEnding
CellRangeEventArgs
Occurs when a cell edit is ending.
copied
CellRangeEventArgs
Occurs after the user has copied the

selection content to the clipboard by
pressing one of the clipboard
shortcut keys (see the
autoClipboard property).
copying
CellRangeEventArgs
Occurs when the user is copying the

selection content to the clipboard by
The event handler may cancel the
copy operation.
deletingRow
CellRangeEventArgs
Occurs when the user is deleting a

selected row by pressing the Delete
key (see the allowDelete property).
row deletion.
draggedColumn
CellRangeEventArgs
Occurs when the user finishes

dragging a column.
draggedRow
CellRangeEventArgs

dragging a row.
draggingColumn
CellRangeEventArgs
Occurs when the user starts dragging

a column.
draggingRow
CellRangeEventArgs
Occurs when the user starts dragging

a row.
Wijmo 5
April 2015
132/535
Name
Arguments
Description
formatItem
FormatItemEventArgs
Occurs when an element

representing a cell has been created.
This event can be used to format
cells for display. It is similar in
purpose to the itemFormatter
property, but has the advantage of
allowing multiple independent
handlers.
For example, this code removes the
'wj-wrap' class from cells in group
rows:
flex.formatItem.addHandler(function
(s, e) {
if (flex.rows[e.row] instanceof
wijmo.grid.GroupRow) {
wijmo.removeClass(e.cell, 'wjwrap');
}
});
groupCollapsedChanged CellRangeEventArgs
Occurs after a group has been

expanded or collapsed.
groupCollapsedChanging CellRangeEventArgs
Occurs when a group is about to be

expanded or collapsed.
itemsSourceChanged
EventArgs
Occurs after the grid has been bound

to a new items source.
loadedRows
EventArgs
Occurs after the grid rows have been

bound to the data source.
loadingRows
CancelEventArgs
Occurs before the grid rows are

bound to the data source.
pasted
CellRangeEventArgs
Occurs after the user has pasted

content from the clipboard by
pasting
CellRangeEventArgs
Occurs when the user is pasting

content from the clipboard by
copy operation.
Wijmo 5
April 2015
133/535
Name
Arguments
Description
prepareCellForEdit
CellRangeEventArgs
Occurs when an editor cell is created

and before it becomes active.
resizedColumn
CellRangeEventArgs

resizing a column.
resizedRow
CellRangeEventArgs

resizing rows.
resizingColumn
CellRangeEventArgs
Occurs as columns are resized.
resizingRow
CellRangeEventArgs
Occurs as rows are resized.
rowAdded
CellRangeEventArgs
Occurs when the user creates a new

item by editing the new row
template (see the allowAddNew
property).
content of the new item or cancel
the new item creation.
rowEditEnded
CellRangeEventArgs
Occurs when a row edit has been

committed or canceled.
rowEditEnding
CellRangeEventArgs
Occurs when a row edit is ending,

before the changes are committed or
canceled.
scrollPositionChanged
EventArgs
Occurs after the control has scrolled.
selectionChanged
CellRangeEventArgs
Occurs after selection changes.
selectionChanging
CellRangeEventArgs
Occurs before selection changes.
sortedColumn
CellRangeEventArgs
Occurs after the user applies a sort

by clicking on a column header.
sortingColumn
CellRangeEventArgs
Occurs before the user applies a sort

by clicking on a column header.
Wijmo 5
April 2015
134/535
FormatItemEventArgs Class
Base Class
CellRangeEventArgs
Module
wijmo.grid
File
wijmo.grid.js
Provides arguments for the formatItem event.
Constructor
Name
Parameters
Description
constructor
panel (GridPanel): GridPanel that
(panel, rng, cell) contains the range.
FormatItemEventArgs.
rng (CellRange): Range of cells affected by
the event.
cell (HTMLElement): Element that
represents the grid cell to be formatted.
Returns: void
Properties
Name
Type
Description
boolean

should be canceled.
cell
HTMLElement
Gets a reference to the element that represents the grid

cell to be formatted.
cellRange
CellRange
Gets the CellRange affected by this event.

(inherited from CellRangeEventArgs).
col
number
Gets the column affected by this event.

F cancel
SF empty

data.
panel
GridPanel
Gets the GridPanel affected by this event.

row
number
Gets the row affected by this event.

Wijmo 5
April 2015
135/535
GridPanel Class
Module
wijmo.grid
File
wijmo.grid.js
Represents a logical part of the grid, such as the column headers, row headers, and scrollable data part.
Constructor
Name
Parameters
Description
constructor
(grid, cellType,
rows, cols,
element)
grid (FlexGrid): The FlexGrid object that Initializes a new instance of a GridPanel.
owns the panel.
cellType (CellType): The type of cell in the
panel.
rows (RowCollection): The rows displayed
in the panel.
cols (ColumnCollection): The columns
displayed in the panel.
element (HTMLElement): The
HTMLElement that hosts the cells in the
control.
Returns: void
Properties
Name
Type
Description
cellType
CellType
Gets the type of cell contained in the panel.
columns
ColumnCollection Gets the panel's column collection.
grid
FlexGrid
Gets the grid that owns the panel.
height
number
Gets the total height of the content in this panel.
hostElement
HTMLElement
Gets the host element for the panel.
rows
RowCollection
Gets the panel's row collection.
viewRange
CellRange
Gets a CellRange that indicates the range of cells currently

visible on the panel.
width
number
Gets the total width of the content in the panel.
Methods
Name
Parameters
Description
getCellBoundingRect r (number): The index of the row that

(r, c)
contains the cell.
c (number): The index of the column
Returns: Rect
Wijmo 5
April 2015
Gets a cell's bounds in viewport

coordinates.
The returned value is a Rect object
which contains the position and
dimensions of the cell in viewport
136/535
Name
Parameters
Description
coordinates. The viewport coordinates
are the same as those used by the
getBoundingClientRect method.
getCellData(r, c,
formatted)
r (number): The row index of the cell.

Gets the value stored in a cell in the
c (number): The column index of the
panel.
cell.
formatted (boolean): A value indicating
whether to format the value for display.
Returns: any
setCellData(r, c, value, r (number): The index of the row that

coerce)
contains the cell.
c (any): The index, name, or binding of
the column that contains the cell.
value (any): The value to store in the
cell.
coerce (boolean): A value indicating
whether to change the value
automatically to match the column's
data type.
Sets the content of a cell in the panel.
Returns: Returns true if the value is

stored successfully, false otherwise
(failed cast).
Wijmo 5
April 2015
137/535
GroupRow Class
Base Class
Row
Module
wijmo.grid
File
wijmo.grid.js
Represents a row that serves as a header for a group of rows.
Constructor
Name
Parameters
Description
constructor()
Initializes a new instance of a GroupRow.
Properties
Name
Type
Description
allowDragging
boolean

allowMerging
boolean

allowResizing
boolean

cssClass
string
dataItem
any
Gets or sets the item in the data collection that the item is
bound to.
(inherited from Row).
grid
FlexGrid

hasChildren
boolean
Gets a value that indicates whether the group row has child
rows.
height
number
Gets or sets the height of the row. Setting this property to

null or negative values causes the element to use the
parent collection's default size.
index
number

collection.
Wijmo 5
April 2015
138/535
Name
Type
Description
isCollapsed
boolean
Gets or sets a value that indicates whether the GroupRow is

collapsed (child rows are hidden) or expanded (child rows
are visible).
isContentHtml
boolean

isReadOnly
boolean

isSelected
boolean

selected.
isVisible
boolean

and not collapsed.

level
number
Gets or sets the hierarchical level of the group associated

with the GroupRow.
pos
number

renderHeight
number
Gets the render height of the row.

The value returned takes into account the row's visibility,
default size, and min and max sizes.

renderSize
number

size
number

visible
boolean

visible.
wordWrap
boolean

Wijmo 5
April 2015
139/535
Methods
Name
Parameters
Description
getCellRange()
Gets a CellRange object that contains all

of the rows in the group represented by
the GroupRow and all of the columns in
the grid.
onPropertyChanged
()

Wijmo 5
April 2015
140/535
HitTestInfo Class
Module
wijmo.grid
File
wijmo.grid.js
Contains information about the part of a FlexGrid control that exists at a specified page coordinate.
Constructor
Name
Parameters
Description
constructor
(grid, pt)
grid (any): The FlexGrid control or

GridPanel to investigate.
pt (any): The Point object in page
coordinates to investigate.
Initializes a new instance of a HitTestInfo

object.
Returns: void
Properties
Name
Type
Description
cellRange
CellRange
Gets the cell range at the specified position.
cellType
CellType
Gets the cell type at the specified position.
col
number
Gets the column index of the cell at the specified position.
edgeBottom
boolean
Gets a value indicating whether the mouse is near the

bottom edge of the cell.
edgeLeft
boolean
Gets a value indicating whether the mouse is near the left

edge of the cell.
edgeRight
boolean
Gets a value indicating whether the mouse is near the right

edge of the cell.
edgeTop
boolean
Gets a value indicating whether the mouse is near the top

edge of the cell.
gridPanel
GridPanel
Gets the grid panel at the specified position.
point
Point
Gets the point in control coordinates that the HitTestInfo

refers to.
row
number
Gets the row index of the cell at the specified position.
Wijmo 5
April 2015
141/535
MergeManager Class
Module
wijmo.grid
File
wijmo.grid.js
Defines the FlexGrid's cell merging behavior.
An instance of this class is automatically created and assigned to the grid's mergeManager property to
implement the grid's default merging behavior.
If you want to customize the default merging behavior, create a class that derives from MergeManager
and override the getMergedRange method.
Constructor
Name
Parameters
Description
constructor
(grid)
grid (FlexGrid): The FlexGrid object that

owns this MergeManager.

MergeManager object.
Returns: void
Methods
Name
Parameters
Description
getMergedRange panel (GridPanel): The GridPanel that

Gets a CellRange that specifies the
(panel, r, c)
contains the range.
merged extent of a cell in a GridPanel.
r (number): The index of the row that
contains the cell.
c (number): The index of the column that
contains the cell.
Returns: A CellRange that specifies the
merged range, or null if the cell is not
merged.
Wijmo 5
April 2015
142/535
Row Class
Base Class
RowCol
Derived Classes
GroupRow
Module
wijmo.grid
File
wijmo.grid.js
Represents a row in the grid.
Properties
Name
Type
Description
allowDragging
boolean

allowMerging
boolean

allowResizing
boolean

cssClass
string
dataItem
any
Gets or sets the item in the data collection that the item is
bound to.
grid
FlexGrid

height
number
Gets or sets the height of the row. Setting this property to

null or negative values causes the element to use the
parent collection's default size.
index
number

collection.
isContentHtml
boolean

isReadOnly
boolean

Wijmo 5
April 2015
143/535
Name
Type
Description
isSelected
boolean

selected.
isVisible
boolean

and not collapsed.

pos
number

renderHeight
number
Gets the render height of the row.

The value returned takes into account the row's visibility,
default size, and min and max sizes.
renderSize
number

size
number

visible
boolean

visible.
wordWrap
boolean

Methods
Name
Parameters
Description
onPropertyChanged
()
Wijmo 5

April 2015
144/535
RowCol Class
Derived Classes
Column, Row
Module
wijmo.grid
File
wijmo.grid.js
An abstract class that serves as a base for the Row and Column classes.
Properties
Name
Type
Description
allowDragging
boolean

allowMerging
boolean

allowResizing
boolean

cssClass
string
grid
FlexGrid
index
number

collection.
isContentHtml
boolean

isReadOnly
boolean

isSelected
boolean

selected.
isVisible
boolean

and not collapsed.
pos
number
renderSize
number

size
number

visible
boolean

visible.
Wijmo 5
April 2015
145/535
Name
Type
Description
wordWrap
boolean

Methods
Name
Parameters
Description
onPropertyChanged
()
Wijmo 5

April 2015
146/535
RowColCollection Class
Base Class
ObservableArray
Derived Classes
ColumnCollection, RowCollection
Module
wijmo.grid
File
wijmo.grid.js
Abstract class that serves as a base for row and column collections.
Constructor
Name
Parameters
Description
constructor
(grid,
defaultSize)
grid (FlexGrid): The FlexGrid that owns

the collection.
defaultSize (number): The default size of
the elements in the collection.

_RowColCollection.
Returns: void
Properties
Name
Type
F collectionChanged
Description
defaultSize
number
frozen
number

collection.
isUpdating

maxSize
number

collection.
minSize
number

collection.
Methods
Name
Parameters
Description
beginUpdate()
Wijmo 5

call to endUpdate.
April 2015
147/535
Name
Parameters
Description
dst)
to move.
dst (number): The position to which to
append the element.
clear()
deferUpdate(fn)

without updates.

Returns: void


endUpdate()
getItemAt(position)

Returns: number
getNextCell(index,
move, pageSize)

search.
and direction).

change.
Returns: void
getTotalSize()

the collection.

(interfaceName)


indexOf
(searchElement,
fromIndex)
Wijmo 5

in the array.
April 2015
148/535
Name
Parameters
Description

insert(index, item)

item will be added.

the array.
Returns: void
isFrozen(index)

or column to check.

frozen.
Returns: boolean
moveElement(src,
dst)

move.
append).

to another.
Returns: void
(e)
reset)

grid on changes.
Returns: void
push(item)

removeAt(index)

remove.
in the array.
Returns: void
setAt(index, item)


the array.
Returns: void
slice(begin, end)
Wijmo 5

copy starts.
an array.
ends.
April 2015
149/535
Name
Parameters
Description

an array.
sort(compareFn)

place.
item)


removed elements.
Wijmo 5
April 2015
150/535
RowCollection Class
Base Class
RowColCollection
Module
wijmo.grid
File
wijmo.grid.js
Represents a collection of Row objects in a FlexGrid control.
Properties
Name
Type
F collectionChanged
Description
defaultSize
number

frozen
number

collection.

isUpdating

maxGroupLevel
number
Gets the maximum group level in the grid.
maxSize
number

collection.
minSize
number

collection.
Methods
Name
Parameters
Description
beginUpdate()
Wijmo 5

call to endUpdate.
April 2015
151/535
Name
Parameters
Description
dst)
to move.
dst (number): The position to which to (inherited from RowColCollection).
append the element.
clear()
constructor(grid,
defaultSize)

grid (FlexGrid): The FlexGrid that owns Initializes a new instance of a
the collection.
_RowColCollection.
defaultSize (number): The default size (inherited from RowColCollection).
of the elements in the collection.
Returns: void
deferUpdate(fn)

without updates.

Returns: void


endUpdate()

getItemAt(position)
Returns: number
getNextCell(index,
move, pageSize)

search.
and direction).

change.
Returns: void
getTotalSize()
Wijmo 5

the collection.
April 2015
152/535
Name
Parameters
Description

(interfaceName)


indexOf
(searchElement,
fromIndex)

in the array.
insert(index, item)

item will be added.

the array.
Returns: void
isFrozen(index)

or column to check.

frozen.
Returns: boolean
moveElement(src,
dst)

move.
append).

to another.
Returns: void
(e)
reset)

grid on changes.
Returns: void
push(item)


removeAt(index)
Wijmo 5

remove.
in the array.
Returns: void
April 2015
153/535
Name
Parameters
Description
setAt(index, item)


the array.
Returns: void
slice(begin, end)

copy starts.
an array.
ends.
an array.
sort(compareFn)

place.
item)



removed elements.
Wijmo 5
April 2015
154/535
AllowDragging Enum
Module
wijmo.grid
File
wijmo.grid.js
Specifies constants that define the row/column dragging behavior.
Values
Name
Description
Both
The user may drag rows and columns.
Columns The user may drag columns.

None
The user may not drag rows or columns.
Rows
The user may drag rows.
Wijmo 5
April 2015
155/535
AllowMerging Enum
Module
wijmo.grid
File
wijmo.grid.js
Specifies constants that define which areas of the grid support cell merging.
Values
Name
Description
All
Merge all areas.
AllHeaders
Merge column and row headers.
Cells
Merge scrollable cells.
ColumnHeaders Merge column headers.

None
No merging.
RowHeaders
Merge row headers.
Wijmo 5
April 2015
156/535
AllowResizing Enum
Module
wijmo.grid
File
wijmo.grid.js
Specifies constants that define the row/column sizing behavior.
Values
Name
Description
Both
The user may resize rows and columns.
Columns The user may resize columns.

None
The user may not resize rows or columns.
Rows
The user may resize rows.
Wijmo 5
April 2015
157/535
AutoSizeMode Enum
Module
wijmo.grid
File
wijmo.grid.js
Specifies constants that define the row/column auto-sizing behavior.
Values
Name
Description
Both
Autosizing accounts for header and data cells.
Cells
Autosizing accounts for data cells.
Headers Autosizing accounts for header cells.

None
Wijmo 5
Autosizing is disabled.
April 2015
158/535
CellType Enum
Module
wijmo.grid
File
wijmo.grid.js
Identifies the type of cell in a GridPanel.
Values
Name
Description
Cell
Regular data cell.
ColumnHeader Column header cell.

None
Unknown or invalid cell type.
RowHeader
Row header cell.
TopLeft
Top-left cell.
Wijmo 5
April 2015
159/535
HeadersVisibility Enum
Module
wijmo.grid
File
wijmo.grid.js
Specifies constants that specify the visibility of row and column headers.
Values
Name
Description
All
Both column and row header cells are displayed.
Column Only column header cells are displayed.

None
No header cells are displayed.
Row
Only row header cells are displayed.
Wijmo 5
April 2015
160/535
RowColFlags Enum
Module
wijmo.grid
File
wijmo.grid.js
Flags that specify the state of a grid row or column.
Values
Name
Description
AllowDragging The row or column can be dragged to a new position with the mouse.
AllowMerging
The row or column can contain merged cells.
AllowResizing
The row or column can be resized.
AllowSorting
The column can be sorted by clicking its header with the mouse.
AutoGenerated The column was generated automatically.

Collapsed
The group row is collapsed.
ColumnDefault Default settings for new columns.

HtmlContent
Cells in this row or column contain HTML text.
ParentCollapsed The row has a parent group that is collapsed.

ReadOnly
The row or column is read-only (cannot be edited).
RowDefault
Default settings for new rows.
Selected
The row or column is selected.
Visible
The row or column is visible.
WordWrap
Cells in this row or column may contain wrapped text.
Wijmo 5
April 2015
161/535
SelectedState Enum
Module
wijmo.grid
File
wijmo.grid.js
Specifies the selected state of a cell.
Values
Name
Description
Cursor
The cell is selected and is the active cell.
None
The cell is not selected.
Selected The cell is selected but is not the active cell.
Wijmo 5
April 2015
162/535
SelectionMode Enum
Module
wijmo.grid
File
wijmo.grid.js
Specifies constants that define the selection behavior.
Values
Name
Description
Cell
The user can select only a single cell at a time.
CellRange The user can select contiguous blocks of cells.

ListBox
The user can select non-contiguous rows.
None
The user cannot select cells with the mouse or keyboard.
Row
The user can select a single row at a time.
RowRange The user can select contiguous rows.
Wijmo 5
April 2015
163/535
SelMove Enum
Module
wijmo.grid
File
wijmo.grid.js
Specifies a type of movement for the selection.
Values
Name
Description
End
Select the last visible cell.
Home
Select the first visible cell.
Next
Select the next visible cell.
NextCell Select the next visible cell skipping rows if necessary.

NextPage Select the first visible cell in the next page.
None
Do not change the selection.
Prev
Select the previous visible cell.
PrevCell
Select the previous visible cell skipping rows if necessary.
PrevPage Select the first visible cell in the previous page.
Wijmo 5
April 2015
164/535
Module wijmo.grid.filter
File
wijmo.grid.filter.js
Extension that provides an Excel-style filtering UI for FlexGrid controls.
Wijmo 5
April 2015
165/535
Classes
Name
Description
ColumnFilter
Defines a filter for a column on a FlexGrid control.

The ColumnFilter contains a ConditionFilter and a ValueFilter; only one of
them may be active at a time.
This class is used by the FlexGridFilter class; you rarely use it directly.
ColumnFilterEditor
The editor used to inspect and modify column filters.

ConditionFilter
Defines a condition filter for a column on a FlexGrid control.

Condition filters contain two conditions that may be combined using an 'and' or
an 'or' operator.
This class is used by the FlexGridFilter class; you will rarely use it directly.
ConditionFilterEditor The editor used to inspect and modify ConditionFilter objects.

FilterCondition
Defines a filter condition.

FlexGridFilter
Implements an Excel-style filter for FlexGrid controls.

To enable filtering on a FlexGrid control, create an instance of the FlexGridFilter
and pass the grid as a parameter to the constructor. For example:
// create FlexGrid
var flex = new wijmo.grid.FlexGrid('#gridElement');
// enable filtering on the FlexGrid
var filter = new wijmo.grid.filter.FlexGridFilter(flex);
Once this is done, a filter icon is added to the grid's column headers. Clicking the
icon shows an editor where the user can edit the filter conditions for that
column.
The FlexGridFilter class depends on the wijmo.grid and wijmo.input modules.
ValueFilter
Defines a value filter for a column on a FlexGrid control.

Value filters contain an explicit list of values that should be displayed by the grid.
ValueFilterEditor
The editor used to inspect and modify ValueFilter objects.

Wijmo 5
April 2015
166/535
Interfaces
Name
Description
IColumnFilter Defines a filter for a column on a FlexGrid control.

Wijmo 5
April 2015
167/535
Enumerations
Name
Description
FilterType Specifies types of column filter.

Operator Specifies filter condition operators.
Wijmo 5
April 2015
168/535
ColumnFilter Class
Implements
IColumnFilter
Module
wijmo.grid.filter
File
The ColumnFilter contains a ConditionFilter and a ValueFilter; only one of them may be active at a
time.
Constructor
Name
Parameters
Description
constructor
owner (FlexGridFilter): The FlexGridFilter Initializes a new instance of a
(owner, column) that owns this column filter.
ColumnFilter.
column (Column): The Column to filter.
Returns: void
Properties
Name
Type
Description
column
Column
Gets the Column being filtered.
conditionFilter
ConditionFilter Gets the ConditionFilter in this ColumnFilter.
filterType
FilterType
Gets or sets the types of filtering provided by this filter.

Setting this property to null causes the filter to use the
value defined by the owner filter's defaultFilterType
property.
isActive
boolean
Gets a value indicating whether the filter is active.
valueFilter
ValueFilter
Gets the ValueFilter in this ColumnFilter.
Methods
Name
Parameters
Description
apply(value)
value (): The value to test.
Gets a value indicating whether a value

passes the filter.
Returns: boolean
clear()
Clears the filter.

(interfaceName)

Wijmo 5
April 2015
169/535
Name
Parameters
Description
Returns: boolean
Wijmo 5
April 2015
170/535
ColumnFilterEditor Class
Base Class
Control
Module
wijmo.grid.filter
File
The editor used to inspect and modify column filters.
Constructor
Name
Parameters
Description
constructor
(element, filter,
sortButtons)

Initializes a new instance of the
hosts the control, or a selector for the host ColumnFilterEditor.
filter (ColumnFilter): The ColumnFilter to
edit.
sortButtons (boolean): Whether to show
sort buttons in the editor.
Returns: void
Properties
Name
Type
Description
any
Gets or sets the template used to instantiate

ColumnFilterEditor controls.
filter
ColumnFilter
Gets a reference to the ColumnFilter being edited.
hostElement
HTMLElement

isTouching
boolean

isUpdating
boolean

being updated.
SF controlTemplate
Methods
Name
Parameters
applyTemplate
(classNames,
template, parts,
namePart)
classNames (string): Names of classes to Applies the template to a new instance of

Wijmo 5
Description
April 2015
171/535
Name
Parameters
Description

namePart (string): Name of the part to
be named after the host element. This
when used in forms.

members.

_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
Wijmo 5
April 2015
172/535
Name
Parameters
Description
focus()
S getControl
(element)


DOM element.
Returns: Control
getTemplate()

base class.

initialize
(options)


Returns: void

code.
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.

Wijmo 5
April 2015
173/535
Name
Parameters
Description

invalidate
(fullUpdate)

Returns: void
S invalidateAll(e)
e (HTMLElement): Container element. If Invalidates all Wijmo controls contained

Returns: void
properly.
properly.

onFilterChanged e (EventArgs)
(e)
Returns: void
refresh
(fullUpdate)
Raises the filterChanged event.

the control layout as well as the content. (inherited from Control).
Returns: void
updateEditor()
Updates editor with current filter

settings.
updateFilter()
Updates filter to reflect the current editor

values.
Events
Wijmo 5
April 2015
174/535
Name
Arguments
Description
filterChanged
EventArgs
Occurs after the filter is modified.
Wijmo 5
April 2015
175/535
ConditionFilter Class
Implements
IColumnFilter
Module
wijmo.grid.filter
File
Defines a condition filter for a column on a FlexGrid control.
Condition filters contain two conditions that may be combined using an 'and' or an 'or' operator.
This class is used by the FlexGridFilter class; you will rarely use it directly.
Constructor
Name
Parameters
Description
constructor
(column)
column (Column): The column to filter.

ConditionFilter.
Returns: void
Properties
Name
Type
Description
and
boolean
Gets a value indicating whether to combine the two

conditions with an AND or an OR operator.
column
Column
Gets the Column to filter.
condition1
FilterCondition Gets the first condition in the filter.
condition2
FilterCondition Gets the second condition in the filter.
isActive
boolean

The filter is active if at least one of the two conditions has
its operator set to a non-null value.
Methods
Name
Parameters
Description
apply(value)
Returns a value indicating whether a

value passes this filter.
Returns: boolean
clear()
Clears the filter.

(interfaceName)

Returns: boolean
Wijmo 5
April 2015
176/535
ConditionFilterEditor Class
Base Class
Control
Module
wijmo.grid.filter
File
The editor used to inspect and modify ConditionFilter objects.
Constructor
Name
Parameters
Description
constructor
(element, filter)

hosts the control, or a selector for the host ConditionFilterEditor.
filter (ConditionFilter): The
ConditionFilter to edit.
Returns: void
Properties
Name
SF controlTemplate
Type
Description
any

ConditionFilterEditor controls.
filter
ConditionFilter Gets a reference to the ConditionFilter being edited.
hostElement
HTMLElement

isTouching
boolean

isUpdating
boolean

being updated.
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)


Wijmo 5
April 2015

177/535
Name
Parameters
Description

when used in forms.

members.

_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

Wijmo 5
April 2015
178/535
Name
S getControl
(element)
Parameters
Description


DOM element.
Returns: Control
getTemplate()

base class.

initialize
(options)


Returns: void

code.
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.

Wijmo 5
April 2015
179/535
Name
Parameters
Description
invalidate
(fullUpdate)

Returns: void

Returns: void
properly.
properly.

refresh
(fullUpdate)

Returns: void
updateEditor()
Updates editor with current filter settings.
updateFilter()

values.
Wijmo 5
April 2015
180/535
FilterCondition Class
Module
wijmo.grid.filter
File
Defines a filter condition.
Properties
Name
Type
Description
operator
Operator
Gets or sets the operator used by this FilterCondition.
value
any
Gets or sets the value used by this FilterCondition.
Methods
Name
Parameters
Description
apply(value)
Returns a value that determines whether

the given value passes this
FilterCondition.
Returns: boolean
Wijmo 5
April 2015
181/535
FlexGridFilter Class
Module
wijmo.grid.filter
File
Implements an Excel-style filter for FlexGrid controls.
To enable filtering on a FlexGrid control, create an instance of the FlexGridFilter and pass the grid as a
parameter to the constructor. For example:
// create FlexGrid
var flex = new wijmo.grid.FlexGrid('#gridElement');
// enable filtering on the FlexGrid
var filter = new wijmo.grid.filter.FlexGridFilter(flex);
Once this is done, a filter icon is added to the grid's column headers. Clicking the icon shows an editor
where the user can edit the filter conditions for that column.
The FlexGridFilter class depends on the wijmo.grid and wijmo.input modules.
Constructor
Name
Parameters
Description
constructor
(grid)
grid (FlexGrid): The FlexGrid to filter.

FlexGridFilter.
Returns: void
Properties
Name
Type
Description
defaultFilterType
FilterType
Gets or sets the default filter type to use.

This value can be overridden in filters for specific columns.
For example, the code below creates a filter that filters by
conditions on all columns except the "ByValue" column:
var f = new wijmo.grid.filter.FlexGridFilter(flex);
f.defaultFilterType = FilterType.Condition;
var col = flex.columns.getColumn('ByValue'),
cf = f.getColumnFilter(col);
cf.filterType = FilterType.Value;
grid
FlexGrid
Gets a reference to the FlexGrid that owns this filter.
showFilterIcons
boolean
Gets or sets a value indicating whether the FlexGridFilter

adds filter editing buttons to the grid's column headers.
If you set this property to false, then you are responsible for
providing a way for users to edit, clear, and apply the filters.
Wijmo 5
April 2015
182/535
Name
Type
Description
showSortButtons
boolean
Gets or sets a value indicating whether the filter editor

should include sort buttons.
By default, the editor shows sort buttons like Excel does.
But since users can sort columns by clicking their headers,
sort buttons in the filter editor may not be desirable in
some circumstances.
Methods
Name
Parameters
Description
apply()
Applies the current column filters to the

grid.
clear()
Clears all column filters.
closeEditor()
Closes the filter editor.
editColumnFilter col (any): The Column that contains the

(col)
filter to edit.
Shows the filter editor for the given grid

column.
Returns: void
getColumnFilter col (Column): The Column that the filter
(col, create)
applies to.
create (boolean): Whether to create the
filter if it does not exist.
Gets the filter for the given column.
Returns: ColumnFilter
onFilterApplied
()
Raises the filterApplied event.
Events
Name
Arguments
Description
filterApplied
EventArgs
Occurs after the filter is applied.
Wijmo 5
April 2015
183/535
ValueFilter Class
Implements
IColumnFilter
Module
wijmo.grid.filter
File
Defines a value filter for a column on a FlexGrid control.
Value filters contain an explicit list of values that should be displayed by the grid.
Constructor
Name
Parameters
Description
constructor
(column)
column (Column): The column to filter.
Initializes a new instance of a ValueFilter.
Returns: void
Properties
Name
Type
Description
column
Column
Gets the Column to filter.
filterText
string
Gets or sets a string used to filter the list of display values.
isActive
boolean

The filter is active if at least one of the two conditions has
its operator set to a non-null value.
showValues
any
Gets or sets an object with all the formatted values that

should be shown.
Methods
Name
Parameters
Description
apply(value)
Gets a value indicating whether a value

passes the filter.
Returns: boolean
clear()
Clears the filter.

(interfaceName)

Returns: boolean
Wijmo 5
April 2015
184/535
ValueFilterEditor Class
Base Class
Control
Module
wijmo.grid.filter
File
The editor used to inspect and modify ValueFilter objects.
Constructor
Name
Parameters
Description
constructor
(element, filter)

hosts the control, or a selector for the host ValueFilterEditor.
filter (ValueFilter): The ValueFilter to edit.
Returns: void
Properties
Name
Type
Description
any

ColumnFilterEditor controls.
filter
ValueFilter
Gets a reference to the ValueFilter being edited.
hostElement
HTMLElement

isTouching
boolean

isUpdating
boolean

being updated.
SF controlTemplate
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)


Wijmo 5
April 2015

185/535
Name
Parameters
Description

when used in forms.

members.

_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

Wijmo 5
April 2015
186/535
Name
S getControl
(element)
Parameters
Description


DOM element.
Returns: Control
getTemplate()

base class.

initialize
(options)


Returns: void

code.
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.

Wijmo 5
April 2015
187/535
Name
Parameters
Description
invalidate
(fullUpdate)

Returns: void

Returns: void
properly.
properly.

refresh
(fullUpdate)

Returns: void
updateEditor()
Updates editor with current filter settings.
updateFilter()

values.
Wijmo 5
April 2015
188/535
IColumnFilter Class
Module
wijmo.grid.filter
File
Wijmo 5
April 2015
189/535
FilterType Enum
Module
wijmo.grid.filter
File
Specifies types of column filter.
Values
Name
Description
Both
A filter that combines condition and value filters.
Condition A filter based on two conditions.

None
No filter.
Value
A filter based on a set of values.
Wijmo 5
April 2015
190/535
Operator Enum
Module
wijmo.grid.filter
File
Specifies filter condition operators.
Values
Name Description
BW
Begins with.
CT
Contains.
EQ
Equals.
EW
Ends with.
GE
Greater than or equal to.
GT
Greater than.
LE
Less than or equal to.
LT
Less than.
NC
Does not contain.
NE
Does not equal.
Wijmo 5
April 2015
191/535
Module wijmo.grid.grouppanel
File
wijmo.grid.grouppanel.js
Extension that provides a drag and drop UI for editing groups in bound FlexGrid controls.
Wijmo 5
April 2015
192/535
Classes
Name
Description
GroupPanel The GroupPanel control provides a drag and drop UI for editing groups in a bound
FlexGrid control.
It allows users to drag columns from the FlexGrid into the panel and to move groups
within the panel. Users may click the group markers in the panel to sort based on the
group column or to remove groups.
In order to use a GroupPanel, add it to a page that contains a FlexGrid control and set the
panel's grid property to the FlexGrid control. For example:
// create a FlexGrid
var flex = new wijmo.grid.FlexGrid('#flex-grid');
flex.itemsSource = getData();
// add a GroupPanel to edit data groups
var groupPanel = new wijmo.grid.grouppanel.GroupPanel('#group-panel');
groupPanel.placeholder = "Drag columns here to create groups.";
groupPanel.grid = flex;
Wijmo 5
April 2015
193/535
GroupPanel Class
Base Class
Control
Module
wijmo.grid.grouppanel
File
wijmo.grid.grouppanel.js
The GroupPanel control provides a drag and drop UI for editing groups in a bound FlexGrid control.
It allows users to drag columns from the FlexGrid into the panel and to move groups within the panel.
Users may click the group markers in the panel to sort based on the group column or to remove groups.
In order to use a GroupPanel, add it to a page that contains a FlexGrid control and set the panel's grid
property to the FlexGrid control. For example:
// create a FlexGrid
var flex = new wijmo.grid.FlexGrid('#flex-grid');
flex.itemsSource = getData();
// add a GroupPanel to edit data groups
var groupPanel = new wijmo.grid.grouppanel.GroupPanel('#group-panel');
groupPanel.placeholder = "Drag columns here to create groups.";
groupPanel.grid = flex;
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a GroupPanel
hosts the control, or a selector for the host control.
options (): The JavaScript object
containing initialization data for the
control.
Returns: void
Properties
Name
SF controlTemplate
grid
Type
Description
any
Gets or sets the template used to instantiate GroupPanel

controls.
FlexGrid
Gets or sets the FlexGrid that is connected to this

GroupPanel.
Once a grid is connected to the panel, the panel displays
the groups defined in the grid's data source. Users can
drag grid columns into the panel to create new groups,
drag groups within the panel to re-arrange the groups, or
delete items in the panel to remove the groups.
Wijmo 5
April 2015
194/535
Name
Type
Description
hideGroupedColumns
boolean
Gets or sets a value indicating whether the panel hides

grouped columns in the owner grid.
The FlexGrid displays grouping information in row
headers, so it is usually a good idea to hide grouped
columns since they display redundant information.
hostElement
HTMLElement

isTouching
boolean

isUpdating
boolean

being updated.
maxGroups
number
Gets or sets the maximum number of groups allowed.
placeholder
string
Gets or sets a string to display in the control when it

contains no groups.
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)

when used in forms.


members.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
Wijmo 5
April 2015
195/535
Name
Parameters
Description
beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

S getControl
(element)


DOM element.
Returns: Control
getTemplate()

base class.

initialize
(options)
Wijmo 5

April 2015

196/535
Name
Parameters
Description
Returns: void

code.
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.


invalidate
(fullUpdate)

Returns: void

Returns: void
properly.
Wijmo 5
April 2015
197/535
Name
Parameters
Description
properly.

refresh()
Wijmo 5
Updates the panel to show the current

groups.
April 2015
198/535
Module wijmo.input
File
wijmo.input.js
Defines input controls for strings, numbers, dates, times, and colors.
Wijmo 5
April 2015
199/535
Classes
Name
Description
AutoComplete The AutoComplete control is an input control that allows callers to customize the item
list as the user types.
The control is similar to the ComboBox, except the item source is a function
(itemsSourceFunction) rather than a static list. For example, you can look up items on
remote databases as the user types.
The example below creates an AutoComplete control and populates it using a
'countries' array. The AutoComplete searches for the country as the user types, and
narrows down the list of countries that match the current input.
Live Example
Calendar
The Calendar control displays a one-month calendar and allows users to select a date.
You may use the min and max properties to restrict the range of dates that the user
can select.
Use the value property to get or set the currently selected date.
The example below shows a Date value with date and time information using an
InputDate and an InputTime control. Notice how both controls are bound to the same
controller variable, and each edits the appropriate information (either date or time). The
example also shows a Calendar control that allows users to select the date with a single
click.
Live Example
ColorPicker
The ColorPicker control allows users to select a color by clicking on panels to adjust
color channels (hue, saturation, brightness, alpha).
Use the value property to get or set the currently selected color.
The control is used as a drop-down for the InputColor control.
Live Example
ComboBox
The ComboBox control allows users to pick strings from lists.

The control automatically completes entries as the user types, and allows users to show
a drop-down list with the items available.
Use the selectedIndex or the text properties to determine which item is currently
selected.
Wijmo 5
April 2015
200/535
Name
Description
The isEditable property determines whether users can enter values that are not present
in the list.
The example below creates a ComboBox control and populates it with a list of
countries. The ComboBox searches for the country as the user types. The isEditable
property is set to false, so the user is forced to select one of the items in the list.
The example also shows how to create and populate a ComboBox using an HTML
<select;> element with <option;> child elements.
Live Example
DropDown
DropDown control (abstract).

Contains an input element and a button used to show or hide the drop-down.
Derived classes must override the _createDropDown method to create whatever editor
they want to show in the drop down area (a list of items, a calendar, a color editor, etc).
InputColor
The InputColor control allows users to select colors by typing in HTML-supported color
strings, or to pick colors from a drop-down that shows a ColorPicker control.
Live Example
InputDate
The InputDate control allows users to type in dates using any format supported by the
Globalize class, or to pick dates from a drop-down box that shows a Calendar control.
Use the min and max properties to restrict the range of values that the user can enter.
Use the value property to gets or set the currently selected date.
The example below shows a Date value (that includes date and time information) using
an InputDate and an an InputTime control. Notice how both controls are bound to the
same controller variable, and each edits the appropriate information (either date or
time). The example also shows a Calendar control that you can use to select the date
with a single click.
Live Example
InputMask
The InputMask control provides a way to govern what a user is allowed to input.
The control prevents users from accidentally entering invalid data and saves time by
skipping over literals (such as slashes in dates) as the user types.
The mask used to validate the input is defined by the mask property, which may contain
one or more of the following special characters:
Wijmo 5
April 2015
201/535
Name
Description
0
Digit.
9
Digit or space.
#
Digit, sign, or space.

L
Letter.
l
Letter or space.
A
Alphanumeric.
a
Alphanumeric or space.
.
Localized decimal point.

,
Localized thousand separator.

:
Localized time separator.

/
Localized date separator.

$
Localized currency symbol.

<
Converts characters that follow to lowercase.

>
Converts characters that follow to uppercase.

|
Disables case conversion.

\
Escapes any character, turning it into a literal.

All others
Literals.
InputNumber The InputNumber control allows users to enter numbers.
The control prevents users from accidentally entering invalid data and formats the
number as it is edited.
You may use the min and max properties to limit the range of acceptable values, and
the step property to provide spinner buttons that increase or decrease the value with a
click.
Use the value property to get or set the currently selected number.
Wijmo 5
April 2015
202/535
Name
Description
The example below creates several InputNumber controls and shows the effect of
using different formats, ranges, and step values.
Live Example
InputTime
The InputTime control allows users to enter times using any format supported by the
Globalize class, or to pick times from a drop-down list.
The min, max, and step properties determine the values shown in the list.
The value property gets or sets a Date object that represents the time selected by the
user.
The example below shows a Date value (that includes date and time information) using
an InputDate and an InputTime control. Notice how both controls are bound to the
same controller variable, and each edits the appropriate information (either date or
time). The example also shows a Calendar control that can be used to select the date
with a single click.
Live Example
ListBox
The ListBox control displays a list of items which may contain plain text or HTML, and
allows users to select items with the mouse or the keyboard.
Use the selectedIndex property to determine which item is currently selected.
You can populate a ListBox using an array of strings or you can use an array of objects,
in which case the displayPath property determines which object property is displayed
in the list.
To display HTML rather than plain text, set the isContentHtml property to true.
The example below creates a ListBox control and populates it using a 'countries' array.
The control updates its selectedIndex and selectedItem properties as the user moves
the selection.
Live Example
Menu
The Menu control shows a text element with a drop-down list of commands that the
user can invoke by click or touch.
The Menu control inherits from ComboBox, so you populate and style it in the same
way that you do the ComboBox (see the itemsSource property).
The Menu control adds an itemClicked event that fires when the user selects an item
from the menu. The event handler can inspect the Menu control to determine which
item was clicked. For example:
Wijmo 5
April 2015
203/535
Name
Description
var menu = new wijmo.input.Menu(hostElement);
menu.header = 'Main Menu';
menu.itemsSource = ['option 1', 'option 2', 'option 3'];
menu.itemClicked.addHandler(function(sender, args) {
var menu = sender;
alert('Thanks for selecting item ' + menu.selectedIndex + ' from menu ' + menu.header
+ '!');
});
The example below illustrates how you can create value pickers, command-based
menus, and menus that respond to the itemClicked event. The menus in this example
are based on HTML <select;> and <option;> elements.
Live Example
Wijmo 5
April 2015
204/535
AutoComplete Class
Base Class
ComboBox
Module
wijmo.input
File
wijmo.input.js
The AutoComplete control is an input control that allows callers to customize the item list as the user
types.
The control is similar to the ComboBox, except the item source is a function (itemsSourceFunction)
rather than a static list. For example, you can look up items on remote databases as the user types.
The example below creates an AutoComplete control and populates it using a 'countries' array. The
AutoComplete searches for the country as the user types, and narrows down the list of countries that
match the current input.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

hosts the control, or a selector for the host AutoComplete control.
control.
Returns: void
Properties
Name
Type
Description
collectionView
ICollectionView
Gets the ICollectionView object used as the item

source.
(inherited from ComboBox).
any

DropDown controls.
(inherited from DropDown).
string
Gets or sets the name of the css class used to highlight

any parts of the content that match the search terms.
SF controlTemplate
cssMatch
By default, this property is set to null, which causes the

matching terms to be shown in bold. You can set it to
Wijmo 5
April 2015
205/535
Name
Type
Description
the name of a css class to change the way the matches
are displayed.
The example below shows how you could use a specific
css class called 'match' to highlight the matches:

.match {
background-color: yellow;
color:black;
}
// assign css style to cssMatch property
autoComplete.cssMatch = 'match';
delay
number
Gets or sets the delay, in milliseconds, between when a

keystroke occurs and when the search is performed.
displayMemberPath
string
Gets or sets the name of the property to use as the

visual representation of the items.
dropDown
HTMLElement
Gets the drop down element shown when the

isDroppedDown property is set to true.
hostElement
HTMLElement

inputElement
HTMLInputElement Gets the HTML input element hosted by the control.

Use this property in situations where you want to
customize the attributes of the input element.

isContentHtml
boolean
Gets or sets a value indicating whether the drop-down

list displays items as plain text or as HTML.
isDroppedDown
boolean
Gets or sets a value indicating whether the drop down

is currently visible.
isEditable
boolean
Gets or sets a value that enables or disables editing of

the text in the input element of the ComboBox
(defaults to false).
isTouching
boolean
Gets a value that indicates whether the control is

currently handling a touch event.
Wijmo 5
April 2015
206/535
Name
Type
Description
isUpdating
boolean

currently being updated.
itemFormatter
Function
Gets or sets a function used to customize the values

shown in the drop-down list. The function takes two
arguments, the item index and the default text or html,
and returns the new text or html to display.
NOTE: If the formatting function needs a scope (i.e. a
meaningful 'this' value), then remember to set the filter
using the 'bind' function to specify the 'this' object. For
example:
comboBox.itemFormatter =
customItemFormatter.bind(this);
function customItemFormatter(index, content) {
if (this.makeItemBold(index)) {
content = '<b>' + content + '</b>';
}
return content;
}

itemsSource
any
Gets or sets the array or ICollectionView object that

contains the items to select from.
itemsSourceFunction
Function
Gets or sets a function that provides list items

dynamically as the user types.
The function takes three parameters:
the query string typed by the user

the maximum number of items to return
the callback function to call when the results
become available
For example:
autoComplete.itemsSourceFunction = function (query,
max, callback) {
// get results from the server
var params = { query: query, max: max };
$.getJSON('companycatalog.ashx', params, function
(response) {
// return results to the control
callback(response);
});
};
Wijmo 5
April 2015
207/535
Name
Type
Description
maxDropDownHeight number
Gets or sets the maximum height of the drop-down

list.
maxDropDownWidth
number
Gets or sets the maximum width of the drop-down list.

maxItems
number
Gets or sets the maximum number of items to display

in the drop-down list.
minLength
number
Gets or sets the minimum input length to trigger

autocomplete suggestions.
placeholder
string
Gets or sets the string shown as a hint when the

control is empty.
required
boolean
Gets or sets whether the control value must be set to a

non-null value or whether it can be set to null (by
deleting the content of the control).
selectedIndex
number
Gets or sets the index of the currently selected item in

the drop-down list.
selectedItem
any
Gets or sets the item that is currently selected in the

drop-down list.
selectedValue
any
Gets or sets the value of the selectedItem, obtained

using the selectedValuePath.
selectedValuePath
string
Gets or sets the name of the property used to get the

selectedValue from the selectedItem.
showDropDownButton boolean
Gets or sets a value indicating whether the control

should display a drop-down button.
text
Gets or sets the text shown on the control.

string
Methods
Name
Parameters
Description
applyTemplate(classNames, classNames (string): Names of

classes to add to the control's host
element.
template (string): An HTML string
that defines the control template.
namePart (string): Name of the
Wijmo 5
April 2015
Applies the template to a new

instance of a control, and returns
the root element.
constructors of templated controls.
It is responsible for binding the
208/535
Name
Parameters
Description
part to be named after the host

element. This determines how the
control submits data when used in
forms.
template parts to the

corresponding control members.
For example, the code below

applies a template to an instance of
an InputNumber control. The
template must contain elements
with the 'wj-part' attribute set to
'input', 'btn-inc', and 'btn-dec'. The
control members '_tbx', '_btnUp',
and '_btnDn' will be assigned
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()
Suspends notifications until the

next call to endUpdate.
containsFocus()
Checks whether this control or its

drop-down contain the focused
element.
deferUpdate(fn)
fn (Function): Function to be
executed.

Returns: void
The control will not be updated

until the function has been
executed. This method ensures
endUpdate is called even if the
function throws.

dispose()
Disposes of the control by

removing its association with the
host element.
endUpdate()
Resumes notifications suspended

by calls to beginUpdate.
Wijmo 5
April 2015
209/535
Name
Parameters
Description
focus()

element (any): The DOM element
that is hosting the control, or a
selector for the host element (e.g.
'#theCtrl').
Gets the control that is hosted in a

given DOM element.
Returns: Control
getDisplayText(index)
index (): The index of the item to

retrieve the text for.
(default value: this.selectedIndex)
Gets the string displayed for the

item at a given index (as plain text).
Returns: string
getTemplate()
Gets the HTML template used to

create instances of the control.
hierarchy to find the nearest
ancestor that specifies a control
template. For example, if you
specify a prototype for the
ComboBox control, it will override
the template defined by the
DropDown base class.

indexOf(text, fullMatch)
text (string): The text to search for. Gets the index of the first item that
fullMatch (boolean): A value
matches a given string.
indicating whether to look for a full (inherited from ComboBox).
match or just the start of the string.
Returns: The index of the item, or -1
if not found.
initialize(options)
options (any): Object that contains Initializes the control by copying

the initialization data.
the properties from a given object.
Returns: void

controls using plain data objects
instead of setting the value of each
property in code.
For example:
grid.initialize({
Wijmo 5
April 2015
210/535
Name
Parameters
Description
columns: [
{ binding: 'id', header:
'Code', width: 130 },
{ binding: 'name', header:
'Name', width: 60 }
]
});
// is equivalent to
// etc.
The initialization data is typechecked as it is applied. If the

initialization object contains
unknown property names or invalid
data types, this method will throw.

fullUpdate (boolean): Whether to Invalidates the control causing an

update the control layout as well as asynchronous refresh.
the content.
Returns: void
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
Invalidates all Wijmo controls

contained in an HTML element.
Use this method when your
application has dynamic panels
that change the control's visibility
or dimensions. For example,
splitters, accordions, and tab
controls usually change the
visibility of its content elements. In
this case, failing to notify the
controls contained in the element
may cause them to stop working
properly.
If this happens, you must handle
the appropriate event in the
dynamic container and call the
invalidateAll method so the
contained Wijmo controls will
Wijmo 5
April 2015
211/535
Name
Parameters
Description
update their layout information
properly.

onIsDroppedDownChanged e (EventArgs)
(e)
Returns: void
Raises the
isDroppedDownChanged event.
onSelectedIndexChanged
(e)
Raises the selectedIndexChanged

event.
e (EventArgs)
Returns: void
onTextChanged(e)
e (EventArgs)
Raises the textChanged event.

Returns: void
refresh(fullUpdate)
fullUpdate (boolean): Whether to Refreshes the control.

update the control layout as well as (inherited from Control).
the content.
Returns: void
selectAll()
Sets the focus to the control and

selects all its content.
Events
Name
Arguments
Description
isDroppedDownChanged EventArgs
Occurs after the drop down is shown

or hidden.
selectedIndexChanged
EventArgs
Occurs when the value of the

selectedIndex property changes.
textChanged
EventArgs
Occurs when the value of the text

property changes.
Wijmo 5
April 2015
212/535
Calendar Class
Base Class
Control
Module
wijmo.input
File
wijmo.input.js
The Calendar control displays a one-month calendar and allows users to select a date.
You may use the min and max properties to restrict the range of dates that the user can select.
Use the value property to get or set the currently selected date.
The example below shows a Date value with date and time information using an InputDate and an
InputTime control. Notice how both controls are bound to the same controller variable, and each edits
the appropriate information (either date or time). The example also shows a Calendar control that allows
users to select the date with a single click.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a Calendar.
hosts the control, or a selector for the host
control.
Returns: void
Properties
Name
Type
Description
SF controlTemplate
any
Gets or sets the template used to instantiate Calendar

controls.
displayMonth
Date
Gets or sets the month displayed in the calendar.
firstDayOfWeek
number
Gets or sets a value that represents the first day of the

week, the one displayed in the first column of the
calendar.
Setting this property to null causes the calendar to use the
default for the current culture. In the English culture, the
first day of the week is Sunday (0); in most European
cultures, the first day of the week is Monday (1).
Wijmo 5
April 2015
213/535
Name
Type
Description
hostElement
HTMLElement

isTouching
boolean

isUpdating
boolean

being updated.
itemFormatter
Function
Gets or sets a formatter function to customize dates in the

calendar.
The formatter function can add any content and any date.
It allows complete customization of the appearance and
behavior of the calendar.
If specified, the function takes two parameters:
the date being formatted

the HTML element that represents the date
For example, the code below shows weekends in a

disabled state:
cal.itemFormatter = function(date, element) {
var weekday = date.getDay();
if (weekday == 0 || weekday == 6) {
wijmo.addClass(element, 'wj-state-disabled');
}
}
max
Date
Gets or sets the latest date that the user can select in the
calendar.
min
Date
Gets or sets the earliest date that the user can select in the
calendar.
monthView
boolean
Gets or sets a value indicating whether the calendar

displays a month or a year.
showHeader
boolean

displays the header area with the current month and
navigation buttons.
value
Date
Gets or sets the currently selected date.
Methods
Name
Parameters
Description
applyTemplate
(classNames, template,
parts, namePart)
classNames (string): Names of

element.

instance of a control, and returns the
root element.
Wijmo 5
April 2015
214/535
Name
Parameters
Description

namePart (string): Name of the part
to be named after the host element.
This determines how the control
submits data when used in forms.

template parts to the corresponding
control members.
For example, the code below applies

a template to an instance of an
must contain elements with the 'wjpart' attribute set to 'input', 'btn-inc',
and 'btn-dec'. The control members
'_tbx', '_btnUp', and '_btnDn' will be
assigned references to these
elements.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

call to endUpdate.
containsFocus()
Checks whether this control contains

the focused element.
deferUpdate(fn)
executed.

Returns: void
The control will not be updated until

the function has been executed. This
method ensures endUpdate is

dispose()
Wijmo 5
Disposes of the control by removing

its association with the host
element.
April 2015
215/535
Name
Parameters
Description
endUpdate()
Resumes notifications suspended by

calls to beginUpdate.
focus()


'#theCtrl').

given DOM element.
Returns: Control
getTemplate()

template. For example, if you specify
a prototype for the ComboBox
control, it will override the template
defined by the DropDown base
class.

initialize(options)
options (any): Object that contains


Returns: void

property in code.
For example:
grid.initialize({
columns: [
width: 130 },
'Name', width: 60 }
]
});
// is equivalent to
// etc.
Wijmo 5
April 2015
216/535
Name
Parameters
Description

fullUpdate (boolean): Whether to

update the control layout as well as
the content.

Returns: void
S invalidateAll(e)
invalidated.
Returns: void

application has dynamic panels that
change the control's visibility or
dimensions. For example, splitters,
accordions, and tab controls usually
change the visibility of its content
elements. In this case, failing to
element may cause them to stop
working properly.
method so the contained Wijmo
controls will update their layout
information properly.

onDisplayMonthChanged e (EventArgs)
(e)
Returns: void
Raises the displayMonthChanged

event.
onValueChanged(e)
Raises the valueChanged event.
e (EventArgs)
Returns: void
Wijmo 5
April 2015
217/535
Name
Parameters
Description
refresh(fullUpdate)
fullUpdate (boolean): Indicates

Refreshes the control.
whether to update the control layout
as well as the content.
Returns: void
Events
Name
Arguments
Description
displayMonthChanged EventArgs
Occurs after the displayMonth

property changes.
valueChanged
Occurs after a new date is selected.
Wijmo 5
EventArgs
April 2015
218/535
ColorPicker Class
Base Class
Control
Module
wijmo.input
File
wijmo.input.js
The ColorPicker control allows users to select a color by clicking on panels to adjust color channels (hue,
saturation, brightness, alpha).
The control is used as a drop-down for the InputColor control.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

hosts the control, or a selector for the host ColorPicker.
control.
Returns: void
Properties
Name
Type
Description
any
Gets or sets the template used to instantiate ColorPicker

controls.
hostElement
HTMLElement

isTouching
boolean

isUpdating
boolean

being updated.
palette
string
Gets or sets an array that contains the colors in the

palette.
SF controlTemplate
Wijmo 5
April 2015
219/535
Name
Type
Description
The palette contains ten colors, represented by an array
with ten strings. The first two colors are usually white and
black.
showAlphaChannel
boolean
Gets or sets a value indicating whether the ColorPicker

allows users to edit the color's alpha channel
(transparency).
showColorString
boolean

shows a string representation of the current color.
value
string
Gets or sets the currently selected color.
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)

when used in forms.
Applies the template to a new instance

of a control, and returns the root
element.
members.
attribute set to 'input', 'btn-inc', and
'btn-dec'. The control members '_tbx',

_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.
Wijmo 5
April 2015
220/535
Name
Parameters
Description

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

S getControl
(element)


DOM element.
Returns: Control
getTemplate()

base class.

initialize(options) options (any): Object that contains the
Returns: void
Wijmo 5

code.
April 2015
221/535
Name
Parameters
Description
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.

invalid data types, this method will
throw.

invalidate
(fullUpdate)

Returns: void
S invalidateAll(e)

Returns: void
controls usually change the visibility of
its content elements. In this case, failing
to notify the controls contained in the
working properly.
Wijmo 5
April 2015
222/535
Name
Parameters
Description
properly.

onValueChanged
()
refresh
(fullUpdate)

Returns: void
Events
Name
Arguments
Description
valueChanged
EventArgs
Occurs when the color changes.
Wijmo 5
April 2015
223/535
ComboBox Class
Base Class
DropDown
Derived Classes
AutoComplete, InputTime, Menu

Module
wijmo.input
File
wijmo.input.js
The ComboBox control allows users to pick strings from lists.
The control automatically completes entries as the user types, and allows users to show a drop-down list
with the items available.
Use the selectedIndex or the text properties to determine which item is currently selected.
The isEditable property determines whether users can enter values that are not present in the list.
The example below creates a ComboBox control and populates it with a list of countries. The ComboBox
searches for the country as the user types. The isEditable property is set to false, so the user is forced to
select one of the items in the list.
The example also shows how to create and populate a ComboBox using an HTML <select;> element
with <option;> child elements.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a ComboBox
control.
Returns: void
Properties
Name
Type
Description
collectionView
ICollectionView

source.
Wijmo 5
April 2015
224/535
Name
Type
Description
any

DropDown controls.
displayMemberPath
string

dropDown
HTMLElement

hostElement
HTMLElement

inputElement
SF controlTemplate


isContentHtml
boolean

isDroppedDown
boolean

isEditable
boolean

isTouching
boolean

isUpdating
boolean

itemFormatter
Function

example:
Wijmo 5
April 2015
225/535
Name
Type
Description
}
return content;
}
itemsSource
any


list.
maxDropDownWidth
number
placeholder
string

control is empty.
required
boolean

selectedIndex
number

the drop-down list.
selectedItem
any

drop-down list.
selectedValue
any

selectedValuePath
string


text

string
Methods
Name
Parameters
Description

element.
forms.
Wijmo 5
April 2015

the root element.
226/535
Name
Parameters
Description
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

containsFocus()

element.
deferUpdate(fn)
executed.

Returns: void

function throws.

dispose()

host element.
endUpdate()

focus()

Wijmo 5

'#theCtrl').
April 2015

given DOM element.
227/535
Name
Parameters
Description
Returns: Control


Returns: string
getTemplate()


indicating whether to look for a full
if not found.
initialize(options)

Returns: void

property in code.
For example:
grid.initialize({
columns: [
'Name', width: 60 }
]
});
// is equivalent to
Wijmo 5
April 2015
228/535
Name
Parameters
Description
// etc.



the content.
Returns: void
S invalidateAll(e)
invalidated.
Returns: void

properly.
properly.

(e)
Returns: void
Wijmo 5
Raises the
April 2015
229/535
Name
Parameters
Description
(e)
e (EventArgs)

event.
Returns: void
onTextChanged(e)
e (EventArgs)

Returns: void
refresh(fullUpdate)

the content.
Returns: void
selectAll()

Events
Name
Arguments
Description

or hidden.
EventArgs

textChanged
EventArgs

property changes.
Wijmo 5
April 2015
230/535
DropDown Class
Base Class
Control
Derived Classes
ComboBox, InputColor, InputDate

Module
wijmo.input
File
wijmo.input.js
DropDown control (abstract).
Contains an input element and a button used to show or hide the drop-down.
Derived classes must override the _createDropDown method to create whatever editor they want to show
in the drop down area (a list of items, a calendar, a color editor, etc).
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a DropDown
control.
Returns: void
Properties
Name
Type
Description
any

DropDown controls.
dropDown
HTMLElement

hostElement
HTMLElement

inputElement
SF controlTemplate

isDroppedDown
Wijmo 5
boolean

April 2015
231/535
Name
Type
Description
isTouching
boolean

isUpdating
boolean

placeholder
string

control is empty.

text
string
Methods
Name
Parameters
Description

element.
forms.

the root element.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()
Wijmo 5

April 2015
232/535
Name
Parameters
Description
containsFocus()
deferUpdate(fn)

element.
executed.

Returns: void

function throws.

dispose()

host element.
endUpdate()

focus()


'#theCtrl').

given DOM element.
Returns: Control
getTemplate()

Wijmo 5
April 2015
233/535
Name
Parameters
Description
initialize(options)

Returns: void

property in code.
For example:
grid.initialize({
columns: [
'Name', width: 60 }
]
});
// is equivalent to
// etc.



the content.
Returns: void
S invalidateAll(e)
invalidated.
Returns: void
Wijmo 5
April 2015

234/535
Name
Parameters
Description
properly.
properly.

(e)
Returns: void
Raises the
onTextChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)

the content.
Returns: void
selectAll()

Events
Name
Arguments
Description

or hidden.
textChanged

property changes.
Wijmo 5
EventArgs
April 2015
235/535
InputColor Class
Base Class
DropDown
Module
wijmo.input
File
wijmo.input.js
The InputColor control allows users to select colors by typing in HTML-supported color strings, or to pick
colors from a drop-down that shows a ColorPicker control.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

hosts the control, or a selector for the host InputColor control.
control.
Returns: void
Properties
Name
Type
Description
colorPicker
ColorPicker
Gets a reference to the ColorPicker control shown in

the drop-down.
any

DropDown controls.
dropDown
HTMLElement

hostElement
HTMLElement

inputElement
SF controlTemplate

Wijmo 5
April 2015
236/535
Name
Type
Description
isDroppedDown
boolean

isTouching
boolean

isUpdating
boolean

placeholder
string

control is empty.
required
boolean

value must be a color or whether it can be set to null
(by deleting the content of the control).
showAlphaChannel
boolean

allows users to edit the color's alpha channel
(transparency).

text
string
value
string
Gets or sets the current color.
Methods
Name
Parameters
Description

element.
forms.
Wijmo 5
April 2015

the root element.
237/535
Name
Parameters
Description
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

containsFocus()

element.
deferUpdate(fn)
executed.

Returns: void

function throws.

dispose()

host element.
endUpdate()

focus()


'#theCtrl').

given DOM element.
Returns: Control
Wijmo 5
April 2015
238/535
Name
Parameters
Description
getTemplate()


initialize(options)

Returns: void

property in code.
For example:
grid.initialize({
columns: [
'Name', width: 60 }
]
});
// is equivalent to
// etc.

Wijmo 5
April 2015
239/535
Name
Parameters
Description

the content.
Returns: void
S invalidateAll(e)
invalidated.
Returns: void

properly.
properly.

(e)
Returns: void
Raises the
onTextChanged(e)

e (EventArgs)
Returns: void
onValueChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)
Wijmo 5

the content.
April 2015
240/535
Name
Parameters
Description
Returns: void
selectAll()

Events
Name
Arguments
Description

or hidden.
textChanged
EventArgs

property changes.
valueChanged
EventArgs
Occurs after a new color is selected.
Wijmo 5
April 2015
241/535
InputDate Class
Base Class
DropDown
Module
wijmo.input
File
wijmo.input.js
The InputDate control allows users to type in dates using any format supported by the Globalize class, or
to pick dates from a drop-down box that shows a Calendar control.
Use the min and max properties to restrict the range of values that the user can enter.
Use the value property to gets or set the currently selected date.
The example below shows a Date value (that includes date and time information) using an InputDate and
an an InputTime control. Notice how both controls are bound to the same controller variable, and each
edits the appropriate information (either date or time). The example also shows a Calendar control that
you can use to select the date with a single click.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a InputDate
control.
Returns: void
Properties
Name
Type
Description
calendar
Calendar
Gets a reference to the Calendar control shown in the

drop-down box.
any

DropDown controls.
HTMLElement

SF controlTemplate
dropDown
Wijmo 5
April 2015
242/535
Name
Type
Description
format
string
Gets or sets the format used to display the selected

date.
The format string is expressed as a .NET-style Date
format string.
hostElement
HTMLElement

inputElement


isDroppedDown
boolean

isTouching
boolean

isUpdating
boolean

mask
string
Gets or sets a mask to use while editing.

The mask format is the same one that the InputMask
control uses.
If specified, the mask must be compatible with the
value of the format property. For example, the mask
'99/99/9999' can be used for entering dates formatted
as 'MM/dd/yyyy'.
max
Date
Gets or sets the latest date that the user can enter.
min
Date
Gets or sets the earliest date that the user can enter.
placeholder
string

control is empty.
required
boolean

value must be a Date or whether it can be set to null
(by deleting the content of the control).

text
Wijmo 5
string
April 2015
243/535
Name
Type
Description
value
Date
Gets or sets the current date.
Methods
Name
Parameters
Description

element.
forms.

the root element.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

containsFocus()

element.
deferUpdate(fn)
Wijmo 5
executed.

Returns: void

April 2015
244/535
Name
Parameters
Description
function throws.

dispose()

host element.
endUpdate()

focus()


'#theCtrl').

given DOM element.
Returns: Control
getTemplate()


initialize(options)

Returns: void

property in code.
For example:
grid.initialize({
Wijmo 5
April 2015
245/535
Name
Parameters
Description
columns: [
'Name', width: 60 }
]
});
// is equivalent to
// etc.



the content.
Returns: void
S invalidateAll(e)
invalidated.
Returns: void

properly.
Wijmo 5
April 2015
246/535
Name
Parameters
Description
properly.

(e)
Returns: void
Raises the
onTextChanged(e)

e (EventArgs)
Returns: void
onValueChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)

the content.
Returns: void
selectAll()

Events
Name
Arguments
Description

or hidden.
textChanged
EventArgs

property changes.
valueChanged
EventArgs
Occurs after a new date is selected.
Wijmo 5
April 2015
247/535
InputMask Class
Base Class
Control
Module
wijmo.input
File
wijmo.input.js
The InputMask control provides a way to govern what a user is allowed to input.
The control prevents users from accidentally entering invalid data and saves time by skipping over literals
(such as slashes in dates) as the user types.
The mask used to validate the input is defined by the mask property, which may contain one or more of
the following special characters:
0
Digit.
9
Digit or space.
#
Digit, sign, or space.

L
Letter.
l
Letter or space.
A
Alphanumeric.
a
Alphanumeric or space.
.
Localized decimal point.

,
Localized thousand separator.

:
Localized time separator.

/
Localized date separator.

$
Localized currency symbol.

<
Converts characters that follow to lowercase.

>
Converts characters that follow to uppercase.

|
Disables case conversion.

\
Wijmo 5
April 2015
248/535
Escapes any character, turning it into a literal.

All others
Literals.
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of an InputMask
control.
Returns: void
Properties
Name
Type
Description
any
Gets or sets the template used to instantiate InputMask

controls.
hostElement
HTMLElement

inputElement
SF controlTemplate

isTouching
boolean

isUpdating
boolean

mask
string
Gets or sets the mask used to validate the input as the

user types.
The mask is defined as a string with one or more of the
masking characters listed in the InputMask topic.
maskFull
boolean
Gets a value that indicates whether the mask has been

completely filled.
placeholder
string
Gets or sets the string shown as a hint when the control

is empty.
promptChar
string
Gets or sets the symbol used to show input positions in

the control.
value
string
Gets or sets the text currently shown in the control.
Methods
Wijmo 5
April 2015
249/535
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)

when used in forms.

element.
members.

_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()
Wijmo 5

April 2015
250/535
Name
Parameters
Description
endUpdate()

to beginUpdate.
focus()

S getControl
(element)


DOM element.
Returns: Control
getTemplate()

base class.

Returns: void

code.
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.
Wijmo 5
April 2015
251/535
Name
Parameters
Description
throw.

invalidate
(fullUpdate)

Returns: void
S invalidateAll(e)

Returns: void
working properly.
properly.

onValueChanged e (EventArgs)
(e)
Returns: void
refresh
(fullUpdate)

Returns: void
Wijmo 5
April 2015
252/535
Name
Parameters
Description
selectAll()
Sets the focus to the control and selects

all its content.
Events
Name
Arguments
Description
valueChanged
EventArgs
Occurs when the value of the value

property changes.
Wijmo 5
April 2015
253/535
InputNumber Class
Base Class
Control
Module
wijmo.input
File
wijmo.input.js
The InputNumber control allows users to enter numbers.
The control prevents users from accidentally entering invalid data and formats the number as it is edited.
You may use the min and max properties to limit the range of acceptable values, and the step property
to provide spinner buttons that increase or decrease the value with a click.
Use the value property to get or set the currently selected number.
The example below creates several InputNumber controls and shows the effect of using different
formats, ranges, and step values.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

hosts the control, or a selector for the host InputNumber control.
control.
Returns: void
Properties
Name
SF controlTemplate
format
Type
Description
any

InputNumber controls.
string
Gets or sets the format used to display the number

being edited (see Globalize).
The format string is expressed as a .NET-style standard
numeric format string.
hostElement
Wijmo 5
HTMLElement

April 2015
254/535
Name
Type
Description
inputElement

inputType
string
Gets or sets the "type" attribute of the HTML input

element hosted by the control.
By default, this property is set to "tel," a value that
causes mobile devices to show a numeric keypad that
includes a negative sign and a decimal separator.
Use this property to change the default setting if the
default does not work well for the current culture,
device, or application. In these cases, try changing the
value to "number" or "text."
isTouching
boolean

isUpdating
boolean

max
number
Gets or sets the largest number that the user can enter.
min
number
Gets or sets the smallest number that the user can enter.
placeholder
string
Gets or sets the string shown as a hint when the control

is empty.
required
boolean
Gets or sets a value indicating whether the control value

must be a number or whether it can be set to null (by
showSpinner
boolean

displays spinner buttons to increment or decrement the
value (the step property must be set to a non-zero
value).
step
number
Gets or sets the amount to add or subtract to the value

property when the user clicks the spinner buttons.
text
string
Gets or sets the text shown in the control.
value
number
Gets or sets the current value of the control.
Methods
Name
Parameters
applyTemplate
(classNames,
template, parts,
namePart)
classNames (string): Names of classes to Applies the template to a new instance

element.
Wijmo 5
Description
April 2015
255/535
Name
Parameters
Description

when used in forms.

members.

_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
Wijmo 5
April 2015
256/535
Name
Parameters
Description
focus()
S getControl
(element)


DOM element.
Returns: Control
getTemplate()

base class.

Returns: void

code.
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.

Wijmo 5
April 2015
257/535
Name
Parameters
Description
throw.

invalidate
(fullUpdate)

Returns: void
S invalidateAll(e)

Returns: void
working properly.
properly.

onTextChanged e (EventArgs)
(e)
Returns: void
onValueChanged e (EventArgs)
(e)
Returns: void
refresh
(fullUpdate)

Returns: void
selectAll()
Wijmo 5
Sets the focus to the control and selects

all its content.
April 2015
258/535
Events
Name
Arguments
Description
textChanged
EventArgs

property changes.
valueChanged
EventArgs
Occurs when the value of the value

property changes.
Wijmo 5
April 2015
259/535
InputTime Class
Base Class
ComboBox
Module
wijmo.input
File
wijmo.input.js
The InputTime control allows users to enter times using any format supported by the Globalize class, or
to pick times from a drop-down list.
The min, max, and step properties determine the values shown in the list.
The value property gets or sets a Date object that represents the time selected by the user.
an InputTime control. Notice how both controls are bound to the same controller variable, and each edits
the appropriate information (either date or time). The example also shows a Calendar control that can be
used to select the date with a single click.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a InputTime
control.
Returns: void
Properties
Name
Type
Description
collectionView
ICollectionView

source.
any

DropDown controls.
string

SF controlTemplate
displayMemberPath
Wijmo 5
April 2015
260/535
Name
Type
Description
dropDown
HTMLElement

format
string
Gets or sets the format used to display the selected

time (see Globalize).
The format string is expressed as a .NET-style time
format string.
hostElement
HTMLElement

inputElement


isContentHtml
boolean

isDroppedDown
boolean

isEditable
boolean

isTouching
boolean

isUpdating
boolean

itemFormatter
Function

example:
Wijmo 5
April 2015
261/535
Name
Type
Description
}
return content;
}

itemsSource
any

mask
string
Gets or sets a mask to use while the user is editing.

The mask format is the same used by the InputMask
control. If specified, the mask must be compatible with
the value of the format property. For example, you can
use the mask '99:99 >LL' for entering short times
(format 't').
max
Date
Gets or sets the latest time that the user can enter.

list.
maxDropDownWidth
number

min
Date
Gets or sets the earliest time that the user can enter.
placeholder
string

control is empty.
required
boolean

selectedIndex
number

the drop-down list.
selectedItem
any

drop-down list.
selectedValue
any

selectedValuePath
string

Wijmo 5
April 2015
262/535
Name
Type
Description

step
number
Gets or sets the number of minutes between entries in

the drop-down list.
text
string
Gets or sets the text shown in the control.
value
Date
Gets or sets the current input time.
Methods
Name
Parameters
Description

element.
forms.

the root element.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

containsFocus()

element.
Wijmo 5
April 2015
263/535
Name
Parameters
Description
deferUpdate(fn)
executed.

Returns: void

function throws.

dispose()

host element.
endUpdate()

focus()


'#theCtrl').

given DOM element.
Returns: Control


Returns: string
getTemplate()

Wijmo 5
April 2015
264/535
Name
Parameters
Description
if not found.
initialize(options)

Returns: void

property in code.
For example:
grid.initialize({
columns: [
'Name', width: 60 }
]
});
// is equivalent to
// etc.



the content.
Returns: void
S invalidateAll(e)
Wijmo 5
April 2015

265/535
Name
Parameters
Description

invalidated.

properly.
Returns: void

properly.

(e)
Returns: void
Raises the
(e)

event.
e (EventArgs)
Returns: void
onTextChanged(e)
e (EventArgs)

Returns: void
onValueChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)

the content.
Returns: void
selectAll()

Events
Wijmo 5
April 2015
266/535
Name
Arguments
Description

or hidden.
EventArgs

textChanged
EventArgs

property changes.
valueChanged
EventArgs
Occurs after a new time is selected.
Wijmo 5
April 2015
267/535
ListBox Class
Base Class
Control
Module
wijmo.input
File
wijmo.input.js
The ListBox control displays a list of items which may contain plain text or HTML, and allows users to
select items with the mouse or the keyboard.
Use the selectedIndex property to determine which item is currently selected.
You can populate a ListBox using an array of strings or you can use an array of objects, in which case the
displayPath property determines which object property is displayed in the list.
To display HTML rather than plain text, set the isContentHtml property to true.
The example below creates a ListBox control and populates it using a 'countries' array. The control
updates its selectedIndex and selectedItem properties as the user moves the selection.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a ListBox.
hosts the control, or a selector for the host
control.
Returns: void
Properties
Name
checkedMemberPath
Type
Description
Gets or sets the name of the property used to control
checkboxes placed next to each item.
Use this property to create multi-select lisboxes. When an
item is checked or unchecked, the control raises the
itemChecked event. Use the selectedItem property to
retrieve the item that was checked or unchecked.
collectionView
Wijmo 5
ICollectionView Gets the ICollectionView object used as the item source.
April 2015
268/535
Name
Type
Description
any
Gets or sets the template used to instantiate ListBox

controls.
displayMemberPath
string
Gets or sets the name of the property to use as the visual

representation of the items.
hostElement
HTMLElement

isContentHtml
boolean
Gets or sets a value indicating whether items contain plain

text or HTML.
isTouching
boolean

isUpdating
boolean

being updated.
itemFormatter
Function

shown in the list. The function takes two arguments, the
item index and the default text or html, and returns the
new text or html to display.
SF controlTemplate

example:
listBox.itemFormatter = customItemFormatter.bind(this);
}
return content;
}
itemsSource
any

contains the list items.
maxHeight
number
Gets or sets the maximum height of the list.
selectedIndex
number
Gets or sets the index of the currently selected item.
selectedItem
any
Gets or sets the item that is currently selected.
selectedValue
any
Gets or sets the value of the selectedItem obtained using

the selectedValuePath.
selectedValuePath
string

Methods
Wijmo 5
April 2015
269/535
Name
Parameters
Description
applyTemplate
parts, namePart)

element.

instance of a control, and returns the
root element.

control members.
must contain elements with the 'wjpart' attribute set to 'input', 'btn-inc',
and 'btn-dec'. The control members
'_tbx', '_btnUp', and '_btnDn' will be
assigned references to these
elements.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

call to endUpdate.
containsFocus()
Checks whether this control contains

the focused element.
deferUpdate(fn)
executed.

Returns: void


dispose()
Wijmo 5

April 2015
270/535
Name
Parameters
Description
element.
endUpdate()

focus()


'#theCtrl').

given DOM element.
Returns: Control
index (number): The index of the

item.
Gets the text displayed for the item

at a given index (as plain text).
Returns: string
getDisplayValue(index)
index (number): The index of the

item.

item at a given index.
Returns: string
The string may be plain text or

HTML, depending on the setting of
the isContentHtml property.
getTemplate()

class.

initialize(options)
Wijmo 5


Returns: void

property in code.
April 2015
271/535
Name
Parameters
Description
For example:
grid.initialize({
columns: [
width: 130 },
'Name', width: 60 }
]
});
// is equivalent to
// etc.



the content.

Returns: void
S invalidateAll(e)
invalidated.
Returns: void

working properly.
Wijmo 5
April 2015
272/535
Name
Parameters
Description

onItemChecked(e)
e (EventArgs)
Raises the itemCheched event.
Returns: void
onItemsChanged(e)
e (EventArgs)
Raises the itemsChanged event.
Returns: void
onSelectedIndexChanged e (EventArgs)
(e)
Returns: void

event.
refresh()
Refreshes the list.
showSelection()
Highlights the selected item and

scrolls it into view.
Events
Name
Arguments
Description
itemChecked
EventArgs
Occurs when the current item is

checked or unchecked.
This event is raised when the
checkedMemberPath is set to the
name of a property to add checkboxes
to each item in the control.
Use the selectedItem property to
retrieve the item that was checked or
unchecked.
itemsChanged
EventArgs
Occurs when the list of items changes.
selectedIndexChanged EventArgs
Wijmo 5

April 2015
273/535
Menu Class
Base Class
ComboBox
Module
wijmo.input
File
wijmo.input.js
The Menu control shows a text element with a drop-down list of commands that the user can invoke by
click or touch.
The Menu control inherits from ComboBox, so you populate and style it in the same way that you do the
ComboBox (see the itemsSource property).
The Menu control adds an itemClicked event that fires when the user selects an item from the menu. The
event handler can inspect the Menu control to determine which item was clicked. For example:
var menu = new wijmo.input.Menu(hostElement);
menu.header = 'Main Menu';
menu.itemsSource = ['option 1', 'option 2', 'option 3'];
menu.itemClicked.addHandler(function(sender, args) {
var menu = sender;
alert('Thanks for selecting item ' + menu.selectedIndex + ' from menu ' + menu.header + '!');
});
The example below illustrates how you can create value pickers, command-based menus, and menus that
respond to the itemClicked event. The menus in this example are based on HTML <select;> and
<option;> elements.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a Menu
control.
Returns: void
Properties
Name
Type
Description
collectionView
ICollectionView

source.
Wijmo 5
April 2015
274/535
Name
Type
Description
command
any
Gets or sets the command to execute when an item

is clicked.
Commands are objects that implement two methods:
executeCommand(parameter) This method

executes the command.
canExecuteCommand(parameter) This
method returns a Boolean value that
determines whether the controller can
execute the command. If this method returns
false, the menu option is disabled.
You can also set commands on individual items using

the commandPath property.
commandParameterPath string
Gets or sets the name of the property that contains a

parameter to use with the command specified by the
commandPath property.
commandPath
Gets or sets the name of the property that contains

the command to execute when the user clicks an
item.
string
Commands are objects that implement two methods:
SF controlTemplate
executeCommand(parameter) This method

executes the command.
canExecuteCommand(parameter) This
method returns a Boolean value that
determines whether the controller can
execute the command. If this method returns
false, the menu option is disabled.
any

DropDown controls.
displayMemberPath
string

dropDown
HTMLElement

header
string
Gets or sets the HTML text shown in the Menu

element.
hostElement
HTMLElement

Wijmo 5
April 2015
275/535
Name
Type
Description
inputElement


isButton
boolean
Gets or sets a value that determines whether this

Menu should act as a split button instead of a
regular menu.
The difference between regular menus and split
buttons is what happens when the user clicks the
menu header. In regular menus, clicking the header
shows or hides the menu options. In split buttons,
clicking the header raises the menuItemClicked
event and/or invokes the command associated with
the last option selected by the user as if the user had
picked the item from the drop-down list.
If you want to differentiate between clicks on menu
items and the button part of a split button, check the
value of the isDroppedDown property of the event
sender. If that is true, then a menu item was clicked;
if it is false, then the button was clicked.
For example, the code below implements a split
button that uses the drop-down list only to change
the default item/command, and triggers actions only
when the button is clicked:
<-- view -->
<wj-menu is-button="true" header="Run"
value="browser"
item-clicked="menuItemClicked(s, e)">
<wj-menu-item value="'Internet Explorer'">Internet
Explorer</wj-menu-item>
<wj-menu-item value="'Chrome'">Chrome</wj-menuitem>
<wj-menu-item value="'FireFox'">FireFox</wj-menuitem>
<wj-menu-item value="'Safari'">Safari</wj-menuitem>
<wj-menu-item value="'Opera'">Opera</wj-menu-item>
</wj-menu>
// controller
Wijmo 5
April 2015
276/535
Name
Type
Description
$scope.browser = 'Internet Explorer';
$scope.menuItemClicked = function (s, e) {
// if not dropped down, click was on the button
if (!s.isDroppedDown) {
alert('running ' + $scope.browser);
}
}
isContentHtml
boolean
Gets or sets a value indicating whether the dropdown list displays items as plain text or as HTML.
isDroppedDown
boolean
Gets or sets a value indicating whether the drop

down is currently visible.
isEditable
boolean
Gets or sets a value that enables or disables editing

of the text in the input element of the ComboBox
isTouching
boolean

isUpdating
boolean

itemFormatter
Function

arguments, the item index and the default text or
html, and returns the new text or html to display.
meaningful 'this' value), then remember to set the
filter using the 'bind' function to specify the 'this'
object. For example:
}
return content;
}
Wijmo 5
April 2015
277/535
Name
Type
Description
itemsSource
any

maxDropDownHeight
number

list.
maxDropDownWidth
number
Gets or sets the maximum width of the drop-down

list.
placeholder
string

control is empty.
required
boolean
Gets or sets whether the control value must be set to

a non-null value or whether it can be set to null (by
selectedIndex
number
Gets or sets the index of the currently selected item

in the drop-down list.
selectedItem
any

drop-down list.
selectedValue
any

selectedValuePath
string

showDropDownButton
boolean

text
string

Methods
Name
Parameters
Description

element.
Wijmo 5
April 2015

the root element.
278/535
Name
Parameters
Description

forms.


_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

containsFocus()

element.
deferUpdate(fn)
executed.

Returns: void

function throws.

dispose()
Wijmo 5

host element.
April 2015
279/535
Name
Parameters
Description
endUpdate()

focus()


'#theCtrl').

given DOM element.
Returns: Control


Returns: string
getTemplate()


if not found.
initialize(options)

Returns: void
Wijmo 5

property in code.
April 2015
280/535
Name
Parameters
Description
For example:
grid.initialize({
columns: [
'Name', width: 60 }
]
});
// is equivalent to
// etc.



the content.
Returns: void
S invalidateAll(e)
invalidated.
Returns: void

properly.
Wijmo 5
April 2015
281/535
Name
Parameters
Description
properly.

(e)
Returns: void
Raises the
onItemClicked(e)
Raises the itemClicked event.
e (EventArgs)
Returns: void
(e)
e (EventArgs)

event.
Returns: void
onTextChanged(e)
e (EventArgs)

Returns: void
refresh(fullUpdate)

the content.
Returns: void
selectAll()

Events
Name
Arguments
Description

or hidden.
itemClicked
Occurs when the user picksk an item

from the menu.
EventArgs
The handler can determine which

item was picked by reading the event
sender's selectedIndex property.
Wijmo 5
EventArgs

April 2015
282/535
Name
Arguments
Description
textChanged
EventArgs

property changes.
Wijmo 5
April 2015
283/535
Module wijmo.chart
File
wijmo.chart.js
Defines the FlexChart control and its associated classes.
The example below creates a FlexChart control and binds it to a data array. The chart has three series,
each corresponding to a property in the objects contained in the source array. The last series in the
example uses the chartType property to override the default chart type used by the other series.
Live Example
Wijmo 5
April 2015
284/535
Classes
Name
Description
Axis
Represents an axis in the chart.
AxisCollection
Represents a collection of Axis objects in a FlexChart control.
ChartTooltip
Extends the Tooltip class to provide chart tooltips.
DataLabel
The point data label for FlexChart.
DataLabelBase
Base abstract class for the DataLabel and PieDataLabel classes.
FlexChart
The FlexChart control provides a powerful and flexible way to visualize data.
You can use the FlexChart control to create charts that display data in several
formats, including bar, line, symbol, bubble, and others.
To use the FlexChart control, set the itemsSource property to an array containing
the data, then add one or more Series objects to the series property.
Use the chartType property to define the ChartType used for all series. You may
override the chart type for each series by setting the chartType property on each
Series object.
FlexChartBase
The FlexChartBase control from which the FlexChart and FlexPie derive.
FlexPie
The FlexPie control provides pie and doughnut charts with selectable slices.
To use the FlexPie control, set the itemsSource property to an array containing the
data and use the binding and bindingName properties to set the properties that
contain the item values and names.
HitTestInfo
Contains information about a part of a FlexChart control at a specified page

coordinate.
Legend
Represents the chart legend.
LineMarker
Represents an extension of the LineMarker for the FlexChart.

The LineMarker consists of a text area with content reflecting data point values, and
an optional vertical or horizontal line (or both for a cross-hair effect) positioned over
the plot area. It can be static (interaction = None) or follow the mouse or touch
position (interaction = Move). For example:
// create an interactive marker with a horizontal line and y-value
var lm = new wijmo.chart.LineMarker($scope.ctx.chart, {
lines: wijmo.chart.LineMarkerLines.Horizontal,
interaction: wijmo.chart.LineMarkerInteraction.Move,
alignment : wijmo.chart.LineMarkerAlignment.Top
});
lm.content = function (ht) {
// show y-value
return lm.y.toFixed(2);
}
Palettes
Wijmo 5
These are predefined color palettes for chart Series objects.
April 2015
285/535
Name
Description
To create custom color palettes, supply an array of strings or rgba values.
You can specify palettes for FlexChart and FlexPie controls. For example:
chart.palette = Palettes.light;
The following palettes are pre-defined:
PieDataLabel
standard (default)
cocoa
coral
dark
highcontrast
light
midnight
minimal
modern
organic
slate
The point data label for FlexPie.
RenderEventArgs Provides arguments for Series events.

Series
Represents a series of data points to display in the chart.

The Series class supports all basic chart types. You may define a different chart type
on each Series object that you add to the FlexChart series collection, and it
overrides the chartType property set on the chart that is the default for all Series
objects in its collection.
SeriesEventArgs Provides arguments for Series events.
Wijmo 5
April 2015
286/535
Interfaces
Name
Description
IRenderEngine Represents a rendering engine that performs basic drawing routines.
Wijmo 5
April 2015
287/535
Enumerations
Name
Description
AxisType
Specifies the axis type.
ChartElement
The enumerated type of chart element that may be found by the hitTest
method.
ChartType
Specifies the chart type.
LabelPosition
Specifies the position of data labels on the chart.
LineMarkerAlignment Specifies the alignment of the LineMarker.

LineMarkerInteraction Specifies the interaction of the LineMarker with the user.
LineMarkerLines
Specifies the line type for the LineMarker.
Marker
Specifies the type of marker to use for the symbolMarker property. Applies to
Scatter, LineSymbols, and SplineSymbols chart types.
OverlappingLabels
Specifies how to handle overlapping labels.
PieLabelPosition
Specifies the position of data labels on the pie chart.
Position
Specifies the position of an axis or legend on the chart.
SelectionMode
Specifies what is selected when the user clicks the chart.
SeriesVisibility
Specifies whether and where the Series is visible.
Stacking
Specifies whether and how to stack the chart's data values.
TickMark
Specifies whether and where axis tick marks appear.
Wijmo 5
April 2015
288/535
Axis Class
Implements
_IAxis
Module
wijmo.chart
File
wijmo.chart.js
Represents an axis in the chart.
Constructor
Name
Parameters
Description
constructor
(position)
position (Position): The position of the

axis on the chart.
Initializes a new instance of an Axis

object.
Returns: void
Properties
Name
Type
Description
actualMax
number
Gets the actual axis maximum.
actualMin
number
Gets the actual axis minimum.
axisLine
boolean
Gets or sets a value indicating whether the axis line is

visible.
axisType
AxisType
Gets the axis type.
binding
string
Gets or sets the comma-separated property names for the

itemsSource property to use in axis labels.
The first name specifies the value on the axis, the second
represents the corresponding axis label. The default value
is 'value,text.'
format
string
Gets or sets the format string used for axis labels (see
Globalize).
itemFormatter
Function
Gets or sets the itemFormatter function for axis labels.

If specified, the function takes two parameters:
Wijmo 5
render engine: The IRenderEngine object to use

in formatting the labels.
current label: A string value with the following
properties:
o value: The value of the axis label to
format.
o text: The text to use in the label.
April 2015
289/535
Name
Type
Description
o
o
pos: The position in control coordinates at

which to render the label.
cls: The CSS class to apply to the label.
The function returns the label parameters for labels on

which to modify properties.
For example:
chart.axisY.itemFormatter = function(engine, label) {
if(label.val > 5){
engine.textFill = 'red'; // red text
label.cls = null;// no default css
}
return label;
}
itemsSource
any
Gets or sets the items source for axis labels.

The names of properties are specified by the binding.
For example:
// default value for Axis.binding is 'value,text'
chart.axisX.itemsSource = [ { value:1, text:'one' },
{ value:2, text:'two' } ];
labelAngle
number
Gets or sets the rotation angle of axis labels.

The angle is measured in degrees with valid values
ranging from -90 to 90.
labels
boolean
Gets or sets a value indicating whether axis labels are

visible.
logBase
number
Gets or sets the logarithmic base of the axis.

If the base is not specified the axis uses the normal scale.
majorGrid
boolean
Gets or sets a value indicating whether the axis includes

grid lines.
majorTickMarks
TickMark
Gets or sets the location of axis tick marks.
majorUnit
number
Gets or sets the number of units between axis labels.

If the axis contains date values, then the units are
expressed in days.
max
number
Gets or sets the maximum value shown on the axis. If not

set, the maximum is calculated automatically.
min
number
Gets or sets the minimum value shown on the axis. If not

set, the minimum is calculated automatically.
Wijmo 5
April 2015
290/535
Name
Type
Description
minorGrid
boolean
Gets or sets a value indicating whether the axis includes

minor grid lines.
minorTickMarks
TickMark
Gets or sets the location of minor axis tick marks.
minorUnit
number
Gets or sets the number of units between minor axis ticks.

If the axis contains date values, then the units are
expressed in days.
name
string
Gets or sets the axis name.
origin
number
Gets or sets the value at which the axis crosses the

perpendicular axis.
overlappingLabels
OverlappingLabels Gets or sets a value indicating how to handle overlapping

axis labels.
position
Position
Gets or sets the enumerated axis position.
reversed
boolean
Gets or sets a value indicating whether the axis is reversed

(top to bottom or right to left).
title
string
Gets or sets the title text shown next to the axis.
Methods
Name
Parameters
Description
convert(val)
val (number): The data value to convert.
Converts the specified value from data to

pixel coordinates.
Returns: number
convertBack(val)
val (number): The pixel coordinates to

convert back.
Converts the specified value from pixel to

data coordinates.
Returns: number
onRangeChanged
()
Raises the rangeChanged event.
Events
Name
Arguments
Description
rangeChanged
EventArgs
Occurs when the axis range changes.
Wijmo 5
April 2015
291/535
AxisCollection Class
Base Class
ObservableArray
Module
wijmo.chart
File
wijmo.chart.js
Represents a collection of Axis objects in a FlexChart control.
Properties
Name
Type
F collectionChanged
Description
isUpdating

Methods
Name
Parameters
Description
beginUpdate()

call to endUpdate.
clear()

constructor(data)
data (any): Array containing items used Initializes a new instance of an

to populate the ObservableArray.
ObservableArray.
Returns: void
deferUpdate(fn)

without updates.

Returns: void


endUpdate()
Wijmo 5

April 2015
292/535
Name
Parameters
Description
getAxis(name)
name (string): The name of the axis to

look for.
Gets an axis by name.
Returns: The axis object with the

specified name, or null if not found.
(interfaceName)


indexOf(name)
name (string): The name of the axis to

look for.
Gets the index of an axis by name.
Returns: The index of the axis with the

specified name, or -1 if not found.
insert(index, item)

item will be added.

the array.
Returns: void
onCollectionChanged e (): Contains a description of the
(e)
change.
(default value:
reset)

Returns: void
push(item)


removeAt(index)

remove.
in the array.
Returns: void
setAt(index, item)


the array.
Returns: void
slice(begin, end)
Wijmo 5

copy starts.
an array.
ends.
April 2015
293/535
Name
Parameters
Description

an array.
sort(compareFn)

place.
item)

will be added or removed.
Removes and/or adds items to the

array.

removed elements.
Wijmo 5
April 2015
294/535
ChartTooltip Class
Base Class
Tooltip
Module
wijmo.chart
File
wijmo.chart.js
Extends the Tooltip class to provide chart tooltips.
Constructor
Name
Parameters
Description
constructor()

ChartTooltip.
Properties
Name
Type
Description
content
any
Gets or sets the tooltip content.
gap
number
Gets or sets the distance between the tooltip and the target
element.
(inherited from Tooltip).
hideDelay
number
Gets or sets the delay, in milliseconds, before hiding the

tooltip after the mouse leaves the target element.
isContentHtml
boolean
Gets or sets whether the tooltip contents should be

displayed as plain text or as HTML.
isVisible
boolean
Gets whether the tooltip is currently visible.

showDelay
number
Gets or sets the delay, in milliseconds, before showing the

tooltip after the mouse enters the target element.
threshold
number
Gets or sets the maximum distance from the element to

display the tooltip.
Methods
Name
Parameters
Description
hide()
onPopup(e)
Hides the tooltip if it is currently visible.

e (TooltipEventArgs): TooltipEventArgs
that contains the event data.
Raises the popup event.

Returns: void
Wijmo 5
April 2015
295/535
Name
Parameters
Description
setTooltip
(element,
content)
element (any): Element, element ID, or

control that the tooltip explains.
content.
Assigns tooltip content to a given

element on the page.
Returns: void
The same tooltip may be used to display

information for any number of elements
on the page. To remove the tooltip from
an element, call setTooltip and specify
null for the content.

show(element, element (any): Element, element ID, or
Shows the tooltip with the specified
content, bounds) control that the tooltip explains.
content, next to the specified element.
content (string): Tooltip content or ID of (inherited from Tooltip).
content.
bounds (Rect): Optional element that
defines the bounds of the area that the
tooltip targets. If not provided, the bounds
of the element are used (as reported by
the getBoundingClientRect method).
Returns: void
Events
Name
Arguments
Description
popup
EventArgs
Occurs before the tooltip content is

displayed.
tooltip content or suppress the tooltip
display by changing the event parameters.
Wijmo 5
April 2015
296/535
DataLabel Class
Base Class
DataLabelBase
Module
wijmo.chart
File
wijmo.chart.js
The point data label for FlexChart.
Properties
Name
Type
Description
border
boolean
Gets or sets a value indicating whether data labels have

borders.
(inherited from DataLabelBase).
content
any
Gets or sets the content of data labels.

The content can be specified as a string or as a function
that takes a HitTestInfo object as a parameter.
When the label content is a string, it can contain any of the
following parameters:
seriesName: The name of the series that contains

the data point (FlexChart only).
pointIndex: The index of the data point.
value: The value of the data point.
x: The x-value of the data point (FlexChart only).
y: The y-value of the data point (FlexChart only).
name: The name of the data point.
The parameter must be enclosed in curly brackets, for

example 'x={x}, y={y}'.
In the following example, we show the y value of the data
point in the labels.
// Create a chart and show y data in labels positioned

above the data point.
chart.initialize({
itemsSource: data,
series: [
{ name: 'Downloads', binding: 'downloads' }],
Wijmo 5
April 2015
297/535
Name
Type
Description
});
chart.dataLabel.position = "Top";
chart.dataLabel.content = "{y}";
The next example shows how to set data label content

using a function.
// Set data label content

chart.dataLabel.content = function (ht) {
return ht.name + ":" + ht.value.toFixed();
}

position
Wijmo 5
LabelPosition
Gets or sets the position of data labels.
April 2015
298/535
DataLabelBase Class
Derived Classes
DataLabel, PieDataLabel
Module
wijmo.chart
File
wijmo.chart.js
Base abstract class for the DataLabel and PieDataLabel classes.
Properties
Name
Type
Description
border
boolean

borders.
content
any




chart.initialize({
itemsSource: data,
series: [
});
Wijmo 5
April 2015
299/535
Name
Type
Description

using a function.

}
Wijmo 5
April 2015
300/535
FlexChart Class
Base Class
FlexChartBase
Module
wijmo.chart
File
wijmo.chart.js
The FlexChart control provides a powerful and flexible way to visualize data.
You can use the FlexChart control to create charts that display data in several formats, including bar, line,
symbol, bubble, and others.
To use the FlexChart control, set the itemsSource property to an array containing the data, then add one
or more Series objects to the series property.
Use the chartType property to define the ChartType used for all series. You may override the chart type
for each series by setting the chartType property on each Series object.
Constructor
Name
Parameters
Description
constructor
(element,
options)
element (any): The DOM element that will Initializes a new instance of the FlexChart
host the control, or a selector for the host control.
options (): A JavaScript object containing
Returns: void
Properties
Name
Type
axes
ObservableArray Gets the collection of Axis objects.
axisX
Axis
Gets the main X axis.
axisY
Axis
Gets the main Y axis.
binding
string
Gets or sets the name of the property that contains the Y

values.
(inherited from FlexChartBase).
bindingX
string
Gets or sets the name of the property that contains the X

data values.
chartType
ChartType
Gets or sets the type of chart to create.
collectionView
ICollectionView Gets the ICollectionView object that contains the chart

data.
dataLabel
DataLabel
Wijmo 5
Description
Gets the point data label.
April 2015
301/535
Name
Type
Description
footer
string
Gets or sets the text displayed in the chart footer.

footerStyle
any
Gets or sets the style of the chart footer.

header
string
Gets or sets the text displayed in the chart header.

headerStyle
any
Gets or sets the style of the chart header.

hostElement
HTMLElement

interpolateNulls
boolean
Gets or sets whether to interpolate null values in the data.

If true, the chart interpolates the value of any missing data
based on neighboring points. If false, it leaves a break in
lines and areas at the points with null values.
isTouching
boolean

isUpdating
boolean

being updated.
itemFormatter
Function
Gets or sets the item formatter function that allows you to

customize the appearance of data points. See the Explorer
sample's Item Formatter for a demonstration.
itemsSource
any

contains the data used to create the chart.
legend
Legend
Gets the chart legend.

legendToggle
boolean
Gets or sets a value indicating whether clicking legend

items toggles the series visibility in the chart.
options
any
Gets or sets various chart options.

The following options are supported:
bubble.maxSize: Specifies the maximum size of symbols in
the Bubble chart. The default value is 30 pixels.
bubble.minSize: Specifies the minimum size of symbols in
the Bubble chart. The default value is 5 pixels.
chart.options = {
bubble: { minSize: 5, maxSize: 30 }
Wijmo 5
April 2015
302/535
Name
Type
Description
}
groupWidth: Specifies the group width for Column charts,

or the group height for Bar charts. The group width can be
specified in pixels or percent of available space. The default
value is '70%'.
chart.options = {
groupWidth : 50; // 50 pixels
}
chart.options = {
groupWidth : '100%'; // 100% pixels
}
palette
string
Gets or sets an array of default colors to use for displaying

each series.
The array contains strings that represents css-colors. For
example:
// use colors specified by name
chart.palette = ['red', 'green', 'blue'];
// or use colors specified as rgba-values
chart.palette = [
'rgba(255,0,0,1)',
'rgba(255,0,0,0.8)',
'rgba(255,0,0,0.6)',
'rgba(255,0,0,0.4)'];
There is a set of predefined palettes in the Palettes class

that you can use, for example:
chart.palette = wijmo.chart.Palettes.coral;

plotMargin
any
Gets or sets the plot margin in pixels.

The plot margin represents the area between the edges of
the control and the plot area.
By default, this value is calculated automatically based on
the space required by the axis labels, but you can override
it if you want to control the precise position of the plot area
within the control (for example, when aligning multiple
chart controls on a page).
Wijmo 5
April 2015
303/535
Name
Type
Description
You may set this property to a numeric value or to a CSSstyle margin specification. For example:
// set the plot margin
chart.plotMargin = 20;
chart.plotMargin = '10
(20px)
to 20 pixels on all sides

for top, right, bottom, left sides
15 20 25';
for top/bottom (10px) and left/right
20';

rotated
boolean
Gets or sets a value indicating whether to flip the axes so X

is vertical and Y horizontal.
selection
Series
Gets or sets the selected chart series.
selectionMode
SelectionMode
Gets or sets an enumerated value indicating whether or

what is selected when the user clicks the chart.
series
ObservableArray Gets the collection of Series objects.
stacking
Stacking
Gets or sets whether and how series objects are stacked.
symbolSize
number
Gets or sets the size of the symbols used for all Series
objects in this FlexChart.
This property may be overridden by the symbolSize
property on each Series object.
tooltip
ChartTooltip
Gets the chart Tooltip object.

Tooltip content is generated using a template that may
contain any of the following parameters:

the chart element.
pointIndex: The index of the chart element within
the series.
x: The x value of the chart element.
y: The y value of the chart element.
To modify the template, assign a new value to the tooltip's

content property. For example:
chart.tooltip.content = '<b>{seriesName}</b> ' +
'<img src="resources/{x}.png"/><br/>{y}';
Wijmo 5
April 2015
304/535
Name
Type
Description
You can disable chart tooltips by setting the template to an
empty string, or by setting the content to a function that
takes a HitTestInfo object as a parameter.
You can also use the tooltip property to customize tooltip
parameters such as showDelay and hideDelay:
chart.tooltip.showDelay = 1000;
See ChartTooltip properties for other properties that you

can set.
Methods
Name
Parameters
Description
applyTemplate
parts, namePart)

element.

the root element.

control members.
must contain elements with the 'wjpart' attribute set to 'input', 'btninc', and 'btn-dec'. The control
members '_tbx', '_btnUp', and
'_btnDn' will be assigned references
to these elements.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()
Wijmo 5

call to endUpdate.
April 2015
305/535
Name
Parameters
Description
containsFocus()
dataToPoint(pt, y)
Checks whether this control

contains the focused element.
pt (any): Point in data coordinates,
or X coordinate of a point in data
coordinates.
y (number): Y coordinate of the
point (if the first parameter is a
number).
Converts a Point from data

coordinates to control coordinates.
Returns: The Point in control

coordinates.
deferUpdate(fn)
executed.

Returns: void


dispose()

element.
endUpdate()

focus()


'#theCtrl').

given DOM element.
Returns: Control
getTemplate()

Wijmo 5
April 2015
306/535
Name
Parameters
Description
class.

hitTest(pt, y)
pt (any): The point to investigate, in Gets a HitTestInfo object with

window coordinates.
information about the specified
y (number): The Y coordinate of the point.
number).
Returns: A HitTestInfo object with
information about the point.
initialize(options)


Returns: void

property in code.
For example:
grid.initialize({
columns: [
width: 130 },
'Name', width: 60 }
]
});
// is equivalent to
// etc.

Wijmo 5
April 2015
307/535
Name
Parameters
Description

the content.

Returns: void
S invalidateAll(e)
invalidated.
Returns: void

working properly.

onRendered(e)
e (RenderEventArgs): The
RenderEventArgs object used to
render the chart.
Raises the rendered event.

Returns: void
onRendering(e)
RenderEventArgs object used to
render the chart.
Raises the rendering event.

Returns: void
onSelectionChanged(e)
e (EventArgs)
Raises the selectionChanged event.
Returns: void
Wijmo 5
April 2015
308/535
Name
Parameters
Description
onSeriesVisibilityChanged e (SeriesEventArgs): The

Raises the seriesVisibilityChanged
(e)
SeriesEventArgs object that contains event.
the event data.
Returns: void
pointToData(pt, y)
pt (any): The point to convert, in

Converts a Point from control
control coordinates.
coordinates to chart data
y (number): The Y coordinate of the coordinates.
number).
Returns: The point in chart data
coordinates.
refresh(fullUpdate)
fullUpdate (boolean): A value

Refreshes the chart.
indicating whether to update the
control layout as well as the content.
Returns: void
Events
Name
Arguments
Description
rendered
EventArgs
Occurs after the chart finishes

rendering.
rendering
EventArgs
Occurs before the chart starts

rendering data.
selectionChanged
EventArgs
Occurs after the selection changes,

whether programmatically or when
the user clicks the chart. This is useful,
for example, when you want to update
details in a textbox showing the
current selection.
seriesVisibilityChanged SeriesEventArgs
Wijmo 5
Occurs when the series visibility

changes, for example when the
legendToggle property is set to true
and the user clicks the legend.
April 2015
309/535
FlexChartBase Class
Base Class
Control
Derived Classes
FlexChart, FlexPie
Implements
_IPalette
Module
wijmo.chart
File
wijmo.chart.js
The FlexChartBase control from which the FlexChart and FlexPie derive.
Properties
Name
Type
Description
binding
string

values.
collectionView

data.
footer
string
footerStyle
any
header
string
headerStyle
any
hostElement
HTMLElement

isTouching
boolean

isUpdating
boolean

being updated.
itemFormatter
Function

itemsSource
any

legend
Legend
palette
string

each series.
Wijmo 5
April 2015
310/535
Name
Type
Description
example:
chart.palette = [
'rgba(255,0,0,1)',
'rgba(255,0,0,0.8)',
'rgba(255,0,0,0.6)',
'rgba(255,0,0,0.4)'];

plotMargin
any

the space required by the axis labels, but you can override it
if you want to control the precise position of the plot area
(20px)
selectionMode

15 20 25';
20';
SelectionMode Gets or sets an enumerated value indicating whether or

Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)


element.
Wijmo 5
April 2015

311/535
Name
Parameters
Description
namePart (string): Name of the part to responsible for binding the template
determines how the control submits data members.
when used in forms.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
constructor
Initializes a new instance of a Control
(element, options, will host the control, or a selector for the and attaches it to a DOM element.
invalidateOnResize) host element (e.g. '#theCtrl').
invalidateOnResize (boolean): Whether
the control should be invalidated when it
is resized.
Returns: void
containsFocus()
deferUpdate(fn)

focused element.
fn (Function): Function to be executed.

Returns: void
function has been executed. This
Wijmo 5
April 2015
312/535
Name
Parameters
Description
method ensures endUpdate is called
even if the function throws.

dispose()

endUpdate()

focus()

S getControl
(element)
element (any): The DOM element that is Gets the control that is hosted in a given
hosting the control, or a selector for the DOM element.
Returns: Control
getTemplate()

base class.

initialize(options)


Returns: void

code.
For example:
grid.initialize({
columns: [
Wijmo 5
April 2015
313/535
Name
Parameters
Description
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.

throw.

invalidate
(fullUpdate)

update the control layout as well as the
content.

Returns: void
S invalidateAll(e)

set to null, all Wijmo controls on the
in an HTML element.
page will be invalidated.
Returns: void
working properly.
Wijmo 5
April 2015
314/535
Name
Parameters
Description
onRendered(e)
RenderEventArgs object used to render
the chart.
Returns: void
onRendering(e)
the chart.
Returns: void
refresh(fullUpdate) fullUpdate (boolean): A value indicating Refreshes the chart.

whether to update the control layout as
well as the content.
Returns: void
Events
Name
Arguments
Description
rendered
RenderEventArgs
Occurs after the chart finishes rendering.
rendering
RenderEventArgs
Occurs before the chart starts rendering

data.
Wijmo 5
April 2015
315/535
FlexPie Class
Base Class
FlexChartBase
Module
wijmo.chart
File
wijmo.chart.js
The FlexPie control provides pie and doughnut charts with selectable slices.
To use the FlexPie control, set the itemsSource property to an array containing the data and use the
binding and bindingName properties to set the properties that contain the item values and names.
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of the FlexPie
options (): A Javascript object containing
Returns: void
Properties
Name
Type
Description
binding
string

values.
collectionView

data.
dataLabel
PieDataLabel
Gets the point data label.
footer
string

footerStyle
any

header
string

headerStyle
any

hostElement
HTMLElement

innerRadius
number
Gets or sets the size of the pie's inner radius.
Wijmo 5
April 2015
316/535
Name
Type
Description
The inner radius is measured as a fraction of the pie radius.
The default value for this property is zero, which creates a
pie. Setting this property to values greater than zero creates
pies with a hole in the middle, also known as doughnut
charts.
isAnimated
boolean
Gets or sets a value indicating whether to use animation

when items are selected.
See also the selectedItemPosition and selectionMode
properties.
isTouching
boolean

isUpdating
boolean

being updated.
itemFormatter
Function

itemsSource
any

legend
Legend

offset
number
Gets or sets the offset of the slices from the pie center.
The offset is measured as a fraction of the pie radius.
palette
string

each series.
example:
chart.palette = [
'rgba(255,0,0,1)',
'rgba(255,0,0,0.8)',
'rgba(255,0,0,0.6)',
'rgba(255,0,0,0.4)'];
Wijmo 5
April 2015
317/535
Name
Type
Description

plotMargin
any

the space required by the axis labels, but you can override it
if you want to control the precise position of the plot area
(20px)

15 20 25';
20';

reversed
boolean
Gets or sets whether angles are reversed (counterclockwise).

The default value is false, which causes angles to be
measured in the clockwise direction.
selectedItemOffset
number
Gets or sets the offset of the selected slice from the pie
center.
Offsets are measured as a fraction of the pie radius.
selectedItemPosition
Position
Gets or sets the position of the selected slice.

Setting this property to a value other than 'None' causes
the pie to rotate when an item is selected.
Note that in order to select slices by clicking the chart, you
must set the selectionMode property to "Point".
Wijmo 5
April 2015
318/535
Name
Type
Description
selectionMode
SelectionMode Gets or sets an enumerated value indicating whether or

startAngle
number
Gets or sets the starting angle for the pie slices, in degrees.
Angles are measured clockwise, starting at the 9 o'clock
position.
tooltip
ChartTooltip
Gets the chart's Tooltip.
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)

when used in forms.


members.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
Wijmo 5
April 2015
319/535
Name
Parameters
Description
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

S getControl
(element)


DOM element.
Returns: Control
getTemplate()

base class.

hitTest(pt, y)
pt (any): The point to investigate, in

window coordinates.
information about the specified point.
y (number): The Y coordinate of the point
(if the first parameter is a number).
Returns: A HitTestInfo object containing
information about the point.
initialize
(options)
Wijmo 5


Returns: void

April 2015
320/535
Name
Parameters
Description
code.
For example:
grid.initialize({
columns: [
width: 130 },
width: 60 }
]
});
// is equivalent to
// etc.


invalidate
(fullUpdate)

Returns: void

Returns: void
properly.
Wijmo 5
April 2015
321/535
Name
Parameters
Description
properly.

onRendered(e)
the chart.

Returns: void
onRendering(e) e (RenderEventArgs): The
the chart.

Returns: void
refresh
(fullUpdate)
fullUpdate (boolean): A value indicating

whether to update the control layout as
well as the content.
Refreshes the chart.

Returns: void
Events
Name
Arguments
Description
rendered
EventArgs
Occurs after the chart finishes rendering.

rendering
EventArgs
Occurs before the chart starts rendering

data.
Wijmo 5
April 2015
322/535
HitTestInfo Class
Module
wijmo.chart
File
wijmo.chart.js
Contains information about a part of a FlexChart control at a specified page coordinate.
Constructor
Name
Parameters
Description
constructor
(chart, point)
chart (FlexChartBase): The chart control. Initializes a new instance of a HitTestInfo

point (Point): The original point in window object.
coordinates.
Returns: void
Properties
Name
Type
Description
chartElement
ChartElement
Gets the chart element at the specified coordinates.
distance
number
Gets the distance from the closest data point.
item
any
Gets the data object that corresponds to the closest data

point.
point
Point
Gets the point in control coordinates that this HitTestInfo

object refers to.
pointIndex
number
Gets the data point index at the specified coordinates.
series
Series
Gets the chart series at the specified coordinates.
any
Gets the x-value of the closest data point.
any
Gets the y-value of the closest data point.
Wijmo 5
April 2015
323/535
Legend Class
Module
wijmo.chart
File
wijmo.chart.js
Represents the chart legend.
Properties
Name
Type
Description
position
Position
Gets or sets the enumerated value that determines whether

and where the legend appears in relation to the chart.
Wijmo 5
April 2015
324/535
LineMarker Class
Module
wijmo.chart
File
wijmo.chart.js
Represents an extension of the LineMarker for the FlexChart.
The LineMarker consists of a text area with content reflecting data point values, and an optional vertical or
horizontal line (or both for a cross-hair effect) positioned over the plot area. It can be static (interaction =
None) or follow the mouse or touch position (interaction = Move). For example:
// create an interactive marker with a horizontal line and y-value
var lm = new wijmo.chart.LineMarker($scope.ctx.chart, {
lines: wijmo.chart.LineMarkerLines.Horizontal,
interaction: wijmo.chart.LineMarkerInteraction.Move,
alignment : wijmo.chart.LineMarkerAlignment.Top
});
lm.content = function (ht) {
// show y-value
return lm.y.toFixed(2);
}
Constructor
Name
Parameters
Description
constructor
(chart, options)
chart (FlexChart): The chart on which the

LineMarker appears.
Initializes a new instance of a LineMarker

object.
Returns: void
Properties
Name
Type
Description
alignment
LineMarkerAlignment Gets or sets the alignment of the LineMarker content.

By default, the LineMarker shows to the right, at the
bottom of the target point. Use '|' to combine alignment
values.
// set the alignment to the left.
marker.alignment = wijmo.chart.LineMarkerAlignment.Left;
// set the alignment to the left top.
marker.alignment = wijmo.chart.LineMarkerAlignment.Left
| wijmo.chart.LineMarkerAlignment.Top;
chart
FlexChart
Gets the FlexChart object that owns this LineMarker.
content
Function
Gets or sets the content function that allows to

customize the text content of the LineMarker.
Wijmo 5
April 2015
325/535
Name
Type
Description
horizontalPosition
number
Gets or sets the horizontal position of the LineMarker

relative to the plot area.
Its value range is (0, 1). If the value is null or undefined
and interaction is set to
wijmo.chart.LineMarkerInteraction.Move, the horizontal
position of the marker is calculated automatically based
on the pointer's position.
interaction
LineMarkerInteraction Gets or sets the interaction mode of the LineMarker.
isVisible
boolean
Gets or sets the visibility of the LineMarker.
lines
LineMarkerLines
Gets or sets the visibility of the LineMarker lines.
seriesIndex
number
Gets or sets the index of the series in the chart in which

the LineMarker appears. This only takes effect when the
interaction property is set to
wijmo.chart.LineMarkerInteraction.Move.
verticalPosition
number
Gets or sets the vertical position of the LineMarker

relative to the plot area.
Its value range is (0, 1). If the value is null or undefined
and interaction is set to
wijmo.chart.LineMarkerInteraction.Move, the vertical
position of the LineMarker is calculated automatically
based on the pointer's position.
number
Gets the current x-value as chart data coordinates.
number
Gets the current y-value as chart data coordinates.
Methods
Name
Parameters
Description
onPositionChanged point (Point): The target point at which

(point)
to show the LineMarker.
Raises the positionChanged event.
Returns: void
remove()
Removes the LineMarker from the chart.
Events
Name
Arguments
Description
positionChanged Point
Wijmo 5
Occurs after the LineMarker's position

changes.
April 2015
326/535
Palettes Class
Module
wijmo.chart
File
wijmo.chart.js
These are predefined color palettes for chart Series objects.
To create custom color palettes, supply an array of strings or rgba values.
You can specify palettes for FlexChart and FlexPie controls. For example:
chart.palette = Palettes.light;
The following palettes are pre-defined:
standard (default)
cocoa
coral
dark
highcontrast
light
midnight
minimal
modern
organic
slate
Wijmo 5
April 2015
327/535
PieDataLabel Class
Base Class
DataLabelBase
Module
wijmo.chart
File
wijmo.chart.js
The point data label for FlexPie.
Properties
Name
Type
Description
border
boolean

borders.
content
any




chart.initialize({
itemsSource: data,
series: [
Wijmo 5
April 2015
328/535
Name
Type
Description
});

using a function.

}

position
Wijmo 5
PieLabelPosition Gets or sets the position of the data labels.
April 2015
329/535
RenderEventArgs Class
Base Class
EventArgs
Module
wijmo.chart
File
wijmo.chart.js
Provides arguments for Series events.
Constructor
Name
Parameters
Description
constructor
(engine)
engine (IRenderEngine): (IRenderEngine) Initializes a new instance of a

The rendering engine to use.
RenderEventArgs object.
Returns: void
Properties
Name
SF empty
engine
Wijmo 5
Type
Description
data.
IRenderEngine Gets the IRenderEngine object to use for rendering the

chart elements.
April 2015
330/535
Series Class
Implements
_ISeries
Module
wijmo.chart
File
wijmo.chart.js
Represents a series of data points to display in the chart.
The Series class supports all basic chart types. You may define a different chart type on each Series object
that you add to the FlexChart series collection, and it overrides the chartType property set on the chart
that is the default for all Series objects in its collection.
Properties
Name
Type
Description
axisX
Axis
Gets or sets the x-axis for the series.
axisY
Axis
Gets or sets the y-axis for the series.
binding
string
Gets or sets the name of the property that contains Y values

for the series.
bindingX
string
Gets or sets the name of the property that contains X values

for the series.
chart
FlexChart
Gets the FlexChart object that owns this series.
chartType
ChartType
Gets or sets the chart type for a specific series, overriding

the chart type set on the overall chart.
collectionView
ICollectionView Gets the ICollectionView object that contains the data for
this series.
cssClass
string
Gets or sets the series CSS class.
hostElement
SVGGElement
Gets the series host element.
itemsSource
any

contains the series data.
legendElement
SVGGElement
Gets the series element in the legend.
name
string
Gets or sets the series name.

The series name is displayed in the chart legend. Any series
without a name does not appear in the legend.
style
any
Gets or sets the series style.
symbolMarker
Marker
Gets or sets the shape of marker to use for each data point
in the series. Applies to Scatter, LineSymbols, and
SplineSymbols chart types.
Wijmo 5
April 2015
331/535
Name
Type
Description
symbolSize
number
Gets or sets the size in pixels of the symbols used to render

this Series. Applies to Scatter, LineSymbols, and
symbolStyle
any
Gets or sets the series symbol style. Applies to Scatter,

LineSymbols, and SplineSymbols chart types.
visibility
SeriesVisibility
Gets or sets an enumerated value indicating whether and

where the series appears.
Methods
Name
Parameters
Description
drawLegendItem
(engine, rect)
engine (IRenderEngine): The rendering Draw a legend item at the specified

engine to use.
position.
rect (Rect): The position of the legend
item.
Returns: void
getDataRect()
Returns series bounding rectangle in

data coordinates.
If getDataRect() returns null the limits
are calculated automatically based on
data values.
getPlotElement
(pointIndex)
pointIndex (number): The index of the

data point.
Gets the plot element that corresponds

to the specified point index.
Returns: any
hitTest(pt, y)

window coordinates.
information about the specified point.
y (number): The Y coordinate of the
point (if the first parameter is a number).
Returns: HitTestInfo
measureLegendItem engine (IRenderEngine): The rendering Measures the height and width of the
(engine)
engine to use.
legend item.
Returns: Size
onRendering
(engine)
engine (IRenderEngine): The

IRenderEngine object used to render
the series.
Returns: void
Events
Name
Arguments
Description
rendering
IRenderEngine
Occurs when series is rendering.
Wijmo 5
April 2015
332/535
SeriesEventArgs Class
Base Class
EventArgs
Module
wijmo.chart
File
wijmo.chart.js
Provides arguments for Series events.
Constructor
Name
Parameters
Description
constructor
(series)
series (Series): Specifies the Series object

affected by this event.

SeriesEventArgs object.
Returns: void
Properties
Name
Type
SF empty
series
Wijmo 5
Description
data.
Series
Gets the Series object affected by this event.
April 2015
333/535
IRenderEngine Class
Module
wijmo.chart
File
wijmo.chart.js
Represents a rendering engine that performs basic drawing routines.
Properties
Name
Type
Description
F fill
string
Gets or sets the color used to fill the element.
F fontFamily
string
Gets or sets the font family for text output.
F fontSize
string
Gets or sets the font size for text output.
F stroke
string
Gets or sets the color used to outline the element.
F strokeWidth
number
Gets or sets the thickness of the outline.
F textFill
string
Gets or sets the text color.
Methods
Name
Parameters
Description
beginRender()
Clear the viewport and start the rendering

cycle.
endRender()
Finish the rendering cycle.
setViewportSize w (number): Viewport width.

(w, h)
h (number): Viewport height.
Set the size of the viewport.
Returns: void
Wijmo 5
April 2015
334/535
AxisType Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the axis type.
Values
Name Description
X
Category axis (normally horizontal).
Value axis (normally vertical).
Wijmo 5
April 2015
335/535
ChartElement Enum
Module
wijmo.chart
File
wijmo.chart.js
The enumerated type of chart element that may be found by the hitTest method.
Values
Name
Description
AxisX
X-axis.
AxisY
Y-axis.
ChartArea
The area within the control but outside of the axes.
Footer
The chart footer.
Header
The chart header.
Legend
The chart legend.
None
No chart element.
PlotArea
The area within the axes.
Series
A chart series.
SeriesSymbol A chart series symbol.
Wijmo 5
April 2015
336/535
ChartType Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the chart type.
Values
Name
Description
Area
Area charts are line charts with the area below the line filled with color.
Bar
Bar charts show horizontal bars.
Bubble
Bubble charts are Scatter charts with a third data value that determines the size of
the symbol.
Candlestick
Candlestick charts present items with high, low, open, and close values. The size of
the wick line is determined by the High and Low values, while the size of the bar is
determined by the Open and Close values. The bar is displayed using different
colors, depending on whether the close value is higher or lower than the open
value.
Column
Column charts show vertical bars and allow you to compare values of items across
categories.
HighLowOpenClose High-low-open-close charts display the same information as a candlestick chart,

except that opening values are displayed using lines to the left, while lines to the
right indicate closing values.
Line
Line charts show trends over a period of time or across categories.
LineSymbols
Line and symbol charts are line charts with a symbol on each data point.
Scatter
Scatter charts use X and Y coordinates to show patterns within the data.
Spline
Spline charts are line charts that plot curves rather than angled lines through the
data points.
SplineArea
Spline area charts are spline charts with the area below the line filled with color.
SplineSymbols
Spline and symbol charts are spline charts with symbols on each data point.
Wijmo 5
April 2015
337/535
LabelPosition Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the position of data labels on the chart.
Values
Name
Description
Bottom The labels appear below the data points.

Center The labels appear centered on the data points.
Left
The labels appear to the left of the data points.
None
No data labels appear.
Right
The labels appear to the right of the data points.
Top
The labels appear above the data points.
Wijmo 5
April 2015
338/535
LineMarkerAlignment Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the alignment of the LineMarker.
Values
Name
Description
Auto
The LineMarker alignment adjusts automatically so that it stays inside the boundaries of the
plot area.
Bottom The LineMarker aligns to the bottom of the pointer.

Left
The LineMarker aligns to the left of the pointer.
Right
The LineMarker aligns to the right of the pointer.
Top
The LineMarker aligns to the top of the pointer.
Wijmo 5
April 2015
339/535
LineMarkerInteraction Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the interaction of the LineMarker with the user.
Values
Name Description
Move The LineMarker moves with the pointer.
None No interaction, the user specifies the position manually.
Wijmo 5
April 2015
340/535
LineMarkerLines Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the line type for the LineMarker.
Values
Name
Description
Both
Show both vertical and horizontal lines.
Horizontal Show a horizontal line.

None
Show no lines.
Vertical
Show a vertical line.
Wijmo 5
April 2015
341/535
Marker Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the type of marker to use for the symbolMarker property. Applies to Scatter, LineSymbols, and
Values
Name Description
Box
Uses a square to mark each data point.
Dot
Uses a circle to mark each data point.
Wijmo 5
April 2015
342/535
OverlappingLabels Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies how to handle overlapping labels.
Values
Name Description
Auto Hide overlapping labels.
Show Show all labels, including overlapping ones.
Wijmo 5
April 2015
343/535
PieLabelPosition Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the position of data labels on the pie chart.
Values
Name
Description
Center The item appears at the center of the pie slice.

Inside
The label appears inside the pie slice.
None
No data labels.
Outside The item appears outside the pie slice.
Wijmo 5
April 2015
344/535
Position Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies the position of an axis or legend on the chart.
Values
Name
Description
Bottom The item appears below the chart.

Left
The item appears to the left of the chart.
None
The item is not visible.
Right
The item appears to the right of the chart.
Top
The item appears above the chart.
Wijmo 5
April 2015
345/535
SelectionMode Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies what is selected when the user clicks the chart.
Values
Name Description
None Select neither series nor data points when the user clicks the chart.
Point Select the data point when the user clicks it on the chart. Since Line, Area, Spline, and SplineArea
charts do not render individual data points, nothing is selected with this setting on those chart
types.
Series Select the whole Series when the user clicks it on the chart.
Wijmo 5
April 2015
346/535
SeriesVisibility Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies whether and where the Series is visible.
Values
Name Description
Hidden The series is hidden.
Legend The series is visible only in the legend.
Plot
The series is visible only on the plot.
Visible The series is visible on the plot and in the legend.
Wijmo 5
April 2015
347/535
Stacking Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies whether and how to stack the chart's data values.
Values
Name
Description
None
No stacking. Each series object is plotted independently.
Stacked
Stacked charts show how each value contributes to the total.
Stacked100pc 100% stacked charts show how each value contributes to the total with the relative size
of each series representing its contribution to the total.
Wijmo 5
April 2015
348/535
TickMark Enum
Module
wijmo.chart
File
wijmo.chart.js
Specifies whether and where axis tick marks appear.
Values
Name
Description
Cross
Tick marks cross the axis.
Inside
Tick marks appear inside the plot area.
None
No tick marks appear.
Outside Tick marks appear outside the plot area.
Wijmo 5
April 2015
349/535
Module wijmo.chart.interaction
File
wijmo.chart.interaction.js
Defines classes that add interactive features to charts.
Wijmo 5
April 2015
350/535
Classes
Name
Description
RangeSelector The RangeSelector control displays a range selector that allows the user to choose the
range of data to display on the specified FlexChart.
To use the RangeSelector control, specify the FlexChart control on which to display the
selected range of data.
The rangeChanged event fires when the min or max value changes. For example:
var rangeSelector = new wijmo.chart.interaction.RangeSelector(chart);
rangeSelector.rangeChanged.addHandler(function () {
// perform related updates
// e.g. modify displayed range of another chart
update(rangeSelector.min, rangeSelector.max);
});
Wijmo 5
April 2015
351/535
Enumerations
Name
Description
Orientation Specifies the orientation of the range selector.
Wijmo 5
April 2015
352/535
RangeSelector Class
Module
wijmo.chart.interaction
File
The RangeSelector control displays a range selector that allows the user to choose the range of data to
display on the specified FlexChart.
To use the RangeSelector control, specify the FlexChart control on which to display the selected range of
data.
The rangeChanged event fires when the min or max value changes. For example:
var rangeSelector = new wijmo.chart.interaction.RangeSelector(chart);
rangeSelector.rangeChanged.addHandler(function () {
// perform related updates
// e.g. modify displayed range of another chart
update(rangeSelector.min, rangeSelector.max);
});
Constructor
Name
Parameters
Description
constructor
(chart, options)
chart (FlexChart): The FlexChart that

displays the selected range.

RangeSelector control.
Returns: void
Properties
Name
Type
Description
isVisible
boolean
Gets or sets the visibility of the range selector.
max
number
Gets or sets the maximum value of the range. If not set, the
maximum is calculated automatically.
min
number
Gets or sets the minimum value of the range. If not set, the
minimum is calculated automatically.
orientation
Orientation
Gets or sets the orientation of the range selector.
Methods
Name
Parameters
Description
onRangeChanged e (EventArgs)
(e)
Returns: void
Raises the rangeChanged event.
remove()
Removes the range selector from the

chart.
Wijmo 5
April 2015
353/535
Events
Name
Arguments
Description
rangeChanged
EventArgs
Occurs after the range changes.
Wijmo 5
April 2015
354/535
Orientation Enum
Module
wijmo.chart.interaction
File
Specifies the orientation of the range selector.
Values
Name Description
X
Horizontal, x-data range.
Vertical, y-data range.
Wijmo 5
April 2015
355/535
Module wijmo.gauge
File
wijmo.gauge.js
Defines the RadialGauge, LinearGauge, and BulletGraph controls.
Unlike many gauge controls, Wijmo gauges concentrate on the data being displayed, with little
extraneous color and markup elements. They were designed to be easy to use and to read, especially on
small-screen devices.
Wijmo gauges are composed of Range objects. Every Wijmo gauge has at least two ranges: the "face"
and the "pointer".
The "face" represents the gauge background. The "min" and "max" properties of the face range
correspond to the "min" and "max" properties of the gauge control, and limit the values that the
gauge can display.
The "pointer" is the range that indicates the gauge's current value. The "max" property of the
pointer range corresponds to the "value" property of the gauge.
In addition to these two special ranges, gauges may have any number of additional ranges added to their
"ranges" collection. These additional ranges can be used for two things:
By default, the extra ranges appear as part of the gauge background. This way you can show
'zones' within the gauge, like 'good,' 'average,' and 'bad' for example.
If you set the gauge's "showRanges" property to false, the additional ranges are not shown.
Instead, they are used to automatically set the color of the "pointer" based on the current value.
Wijmo 5
April 2015
356/535
Classes
Name
Description
BulletGraph The BulletGraph is a type of linear gauge designed specifically for use in dashboards. It
displays a single key measure along with a comparative measure and qualitative ranges to
instantly signal whether the measure is good, bad, or in some other state.
Bullet Graphs were created and popularized by dashboard design expert Stephen Few.
You can find more details and examples on Wikipedia.
Live Example
Gauge
Base class for the Wijmo Gauge controls (abstract).
LinearGauge The LinearGauge displays a linear scale with an indicator that represents a single value
and optional ranges to represent reference values.
If you set the gauge's isReadOnly property to false, then the user will be able to edit the
value by clicking on the gauge.
Live Example
RadialGauge The RadialGauge displays a circular scale with an indicator that represents a single value
and optional ranges to represent reference values.
If you set the gauge's isReadOnly property to false, then the user can edit the value by
clicking on the gauge.
Live Example
Range
Defines ranges to be used with Gauge controls.

Range objects have min and max properties that define the range's domain, as well as
color and thickness properties that define the range's appearance.
Every Gauge control has at least two ranges: the 'face' defines the minimum and
maximum values for the gauge, and the 'pointer' displays the gauge's current value.
In addition to the built-in ranges, gauges may have additional ranges used to display
regions of significance (for example, low, medium, and high values).
Wijmo 5
April 2015
357/535
Enumerations
Name
Description
GaugeDirection Represents the direction in which the pointer of a LinearGauge increases.

ShowText
Wijmo 5
Specifies which values to display as text.
April 2015
358/535
BulletGraph Class
Base Class
LinearGauge
Module
wijmo.gauge
File
wijmo.gauge.js
The BulletGraph is a type of linear gauge designed specifically for use in dashboards. It displays a single
key measure along with a comparative measure and qualitative ranges to instantly signal whether the
measure is good, bad, or in some other state.
Bullet Graphs were created and popularized by dashboard design expert Stephen Few. You can find more
details and examples on Wikipedia.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

hosts the control, or a selector for the host BulletGraph control.
control.
Returns: void
Properties
Name
Type
Description
bad
number
Gets or sets a reference value considered bad for the

measure.
any
Gets or sets the template used to instantiate Gauge

controls.
(inherited from Gauge).
SF controlTemplate
direction
GaugeDirection Gets or sets the direction in which the gauge is filled.

(inherited from LinearGauge).
face
Range
Gets the Range used to represent the gauge's overall

geometry and appearance.
format
string
Gets or sets the format string to use for displaying the

gauge values as text.
Wijmo 5
April 2015
359/535
Name
Type
Description
good
number
Gets or sets a reference value considered good for the

measure.
hasShadow
boolean
Gets or sets a value indicating whether the gauge displays

a shadow effect.
hostElement
HTMLElement

isAnimated
boolean
Gets or sets a value indicating whether the gauge

animates value changes.
isReadOnly
boolean
Gets or sets a value indicating whether the user can edit

the value using the mouse and the keyboard.
isTouching
boolean

isUpdating
boolean

being updated.
max
number
Gets or sets the maximum value that can be displayed on

the gauge.
min
number
Gets or sets the minimum value that can be displayed on

the gauge.
origin
number
Gets or sets the starting point used for painting the range.
value range to start at the gauge's minimum value, or
zero if the minimum is less than zero.

pointer
Range
Gets the Range used to represent the gauge's current

value.
ranges
ObservableArray Gets the collection of ranges in this gauge.

showRanges
boolean

the ranges contained in the ranges property.
If this property is set to false, the ranges contained in the
ranges property are not displayed in the gauge. Instead,
Wijmo 5
April 2015
360/535
Name
Type
Description
they are used to interpolate the color of the pointer
range while animating value changes.

showText
ShowText
Gets or sets the ShowText values to display as text in the

gauge.
step
number
Gets or sets the amount to add to or subtract from the

value property when the user presses the arrow keys.
target
number
Gets or sets the target value for the measure.
thickness
number
Gets or sets the thickness of the gauge, on a scale

between zero and one.
Setting the thickness to one causes the gauge to fill as
much of the control area as possible. Smaller values
create thinner gauges.

value
number
Gets or sets the value to display on the gauge.

Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
classNames (string): Names of classes

to add to the control's host element.
determines how the control submits
data when used in forms.


responsible for binding the template parts
to the corresponding control members.
InputNumber control. The template must
contain elements with the 'wj-part'
attribute set to 'input', 'btn-inc', and 'btndec'. The control members '_tbx', '_btnUp',
and '_btnDn' will be assigned references to
these elements.
_tbx: 'input',
Wijmo 5
April 2015
361/535
Name
Parameters
Description
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.
deferUpdate(fn) fn (Function): Function to be executed. Executes a function within a

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

S getControl
(element)
Returns: Control
getTemplate()

hierarchy to find the nearest ancestor that
specifies a control template. For example,
if you specify a prototype for the
ComboBox control, it will override the
template defined by the DropDown base
class.
Wijmo 5
April 2015
362/535
Name
Parameters
Description
hitTest(pt, y)

Gets a number that corresponds to the
window coordinates, or a MoueEvent
value of the gauge at a given point.
object, or the x coordinate of the point.
For example:
Returns: Value of the gauge at the
point, or null if the point is not on the
gauge's face.
// hit test a point when the user clicks on

the gauge
gauge.hostElement.addEventListener('click',
function (e) {
var ht = gauge.hitTest(e.pageX, e.pageY);
if (ht != null) {
console.log('you clicked the gauge at
value ' + ht.toString());
}
});

Returns: void

code.
For example:
grid.initialize({
columns: [
{ binding: 'id', header: 'Code', width:
130 },
width: 60 }
]
});
// is equivalent to
// etc.
The initialization data is type-checked as it

is applied. If the initialization object
Wijmo 5
April 2015
363/535
Name
Parameters
Description
invalidate
(fullUpdate)

update the control layout as well as the asynchronous refresh.
content.
Returns: void
S invalidateAll(e)
e (HTMLElement): Container element. If Invalidates all Wijmo controls contained in

an HTML element.
Returns: void
properly.
properly.

onValueChanged
()
refresh
(fullUpdate)

fullUpdate (boolean): Indicates whether Refreshes the control.
to update the control layout as well as
the content.
Returns: void
Events
Name
Arguments
Description
valueChanged
EventArgs
Occurs when the value shown on the

gauge changes.
Wijmo 5
April 2015
364/535
Gauge Class
Base Class
Control
Derived Classes
LinearGauge, RadialGauge
Module
wijmo.gauge
File
wijmo.gauge.js
Base class for the Wijmo Gauge controls (abstract).
Constructor
Name
Parameters
Description
constructor
(element,
options)

Initializes a new instance of a Gauge
control.
Returns: void
Properties
Name
Type
Description
any

controls.
face
Range

format
string

hasShadow
boolean

a shadow effect.
hostElement
HTMLElement

isAnimated
boolean

isReadOnly
boolean

isTouching
boolean

SF controlTemplate
Wijmo 5
April 2015
365/535
Name
Type
Description
isUpdating
boolean

being updated.
max
number

the gauge.
min
number

the gauge.
origin
number
pointer
Range

value.
ranges
showRanges
boolean

showText
ShowText

gauge.
step
number

thickness
number

value
number
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)


Wijmo 5
April 2015

366/535
Name
Parameters
Description


these elements.

_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

S getControl
(element)
Returns: Control
Wijmo 5
April 2015
367/535
Name
Parameters
Description
getTemplate()

class.

hitTest(pt, y)

For example:
gauge's face.

Returns: void

the gauge
function (e) {
if (ht != null) {
}
});

code.
For example:
grid.initialize({
columns: [
130 },
width: 60 }
]
});
// is equivalent to
Wijmo 5
April 2015
368/535
Name
Parameters
Description
// etc.


invalidate
(fullUpdate)

content.
Returns: void
S invalidateAll(e)

an HTML element.
Returns: void
properly.
properly.

onValueChanged
()
refresh
(fullUpdate)

the content.
Returns: void
Wijmo 5
April 2015
369/535
Events
Name
Arguments
Description
valueChanged
EventArgs

gauge changes.
Wijmo 5
April 2015
370/535
LinearGauge Class
Base Class
Gauge
Derived Classes
BulletGraph
Module
wijmo.gauge
File
wijmo.gauge.js
The LinearGauge displays a linear scale with an indicator that represents a single value and optional
ranges to represent reference values.
If you set the gauge's isReadOnly property to false, then the user will be able to edit the value by clicking
on the gauge.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)
element (any): The DOM element that will Initializes a new instance of a
host the control, or a selector for the host LinearGauge control.
Returns: void
Properties
Name
SF controlTemplate
Type
Description
any

controls.
direction
GaugeDirection Gets or sets the direction in which the gauge is filled.
face
Range

format
string

hasShadow
boolean

a shadow effect.
Wijmo 5
April 2015
371/535
Name
Type
Description
hostElement
HTMLElement

isAnimated
boolean

isReadOnly
boolean

isTouching
boolean

isUpdating
boolean

being updated.
max
number

the gauge.
min
number

the gauge.
origin
number

pointer
Range

value.
ranges

showRanges
boolean

Wijmo 5
April 2015
372/535
Name
Type
Description
showText
ShowText

gauge.
step
number

thickness
number


value
number

Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)



these elements.
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
Wijmo 5
April 2015
373/535
Name
Parameters
Description
beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

S getControl
(element)
Returns: Control
getTemplate()

class.

hitTest(pt, y)
Wijmo 5

April 2015

374/535
Name
Parameters
Description

For example:
gauge's face.

the gauge
function (e) {
if (ht != null) {
}
});

Returns: void

code.
For example:
grid.initialize({
columns: [
130 },
width: 60 }
]
});
// is equivalent to
// etc.


invalidate
(fullUpdate)
Wijmo 5

content.
April 2015
375/535
Name
Parameters
Description
Returns: void
S invalidateAll(e)

an HTML element.
Returns: void
properly.
properly.

onValueChanged
()
refresh
(fullUpdate)

the content.
Returns: void
Events
Name
Arguments
Description
valueChanged
EventArgs

gauge changes.
Wijmo 5
April 2015
376/535
RadialGauge Class
Base Class
Gauge
Module
wijmo.gauge
File
wijmo.gauge.js
The RadialGauge displays a circular scale with an indicator that represents a single value and optional
ranges to represent reference values.
If you set the gauge's isReadOnly property to false, then the user can edit the value by clicking on the
gauge.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)

hosts the control, or a selector for the host RadialGauge control.
control.
Returns: void
Properties
Name
Type
Description
autoScale
boolean

automatically scales to fill the host element.
any

controls.
face
Range

format
string

hasShadow
boolean

a shadow effect.
SF controlTemplate
Wijmo 5
April 2015
377/535
Name
Type
Description
hostElement
HTMLElement

isAnimated
boolean

isReadOnly
boolean

isTouching
boolean

isUpdating
boolean

being updated.
max
number

the gauge.
min
number

the gauge.
origin
number

pointer
Range

value.
ranges

showRanges
boolean

Wijmo 5
April 2015
378/535
Name
Type
Description
showText
ShowText

gauge.
startAngle
number
Gets or sets the starting angle for the gauge, in degrees.

position.
step
number

sweepAngle
number
Gets or sets the sweeping angle for the gauge, in degrees.

position.
thickness
number


value
number

Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)


Wijmo 5
April 2015

these elements.
379/535
Name
Parameters
Description
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');

beginUpdate()

to endUpdate.
containsFocus()

focused element.

Returns: void
function throws.

dispose()

endUpdate()

to beginUpdate.
focus()

S getControl
(element)
Returns: Control
getTemplate()

Wijmo 5
April 2015
380/535
Name
Parameters
Description
class.

hitTest(pt, y)

For example:
gauge's face.

the gauge
function (e) {
if (ht != null) {
}
});

Returns: void

code.
For example:
grid.initialize({
columns: [
130 },
width: 60 }
]
});
// is equivalent to
// etc.

Wijmo 5
April 2015
381/535
Name
Parameters
Description

invalidate
(fullUpdate)

content.
Returns: void
S invalidateAll(e)

an HTML element.
Returns: void
properly.
properly.

onValueChanged
()
refresh
(fullUpdate)

the content.
Returns: void
Events
Wijmo 5
April 2015
382/535
Name
Arguments
Description
valueChanged
EventArgs

gauge changes.
Wijmo 5
April 2015
383/535
Range Class
Module
wijmo.gauge
File
wijmo.gauge.js
Defines ranges to be used with Gauge controls.
Range objects have min and max properties that define the range's domain, as well as color and
thickness properties that define the range's appearance.
Every Gauge control has at least two ranges: the 'face' defines the minimum and maximum values for the
gauge, and the 'pointer' displays the gauge's current value.
In addition to the built-in ranges, gauges may have additional ranges used to display regions of
significance (for example, low, medium, and high values).
Constructor
Name
Parameters
Description
constructor
(name)
name (string): The name of the range.
Initializes a new instance of a Range.
Returns: void
Properties
Name
Type
Description
color
string
Gets or sets the color used to display this range.
max
number
Gets or sets the maximum value for this range.
min
number
Gets or sets the minimum value for this range.
name
string
Gets or sets the name of this Range.
thickness
number
Gets or sets the thickness of this range as a percentage of

the parent gauge's thickness.
Methods
Name
Parameters
Description
onPropertyChanged e (PropertyChangedEventArgs):
(e)
PropertyChangedEventArgs that
contains the property name, old, and
new values.
Raises the propertyChanged event.
Returns: void
Events
Name
Arguments
Description
propertyChanged PropertyChangedEventArgs
Wijmo 5
April 2015
Occurs when the value of a property

changes.
384/535
GaugeDirection Enum
Module
wijmo.gauge
File
wijmo.gauge.js
Represents the direction in which the pointer of a LinearGauge increases.
Values
Name Description
Down Gauge value increases from top to bottom.
Left
Gauge value increases from right to left.
Right Gauge value increases from left to right.

Up
Gauge value increases from bottom to top.
Wijmo 5
April 2015
385/535
ShowText Enum
Module
wijmo.gauge
File
wijmo.gauge.js
Specifies which values to display as text.
Values
Name
Description
All
Show the gauge's value, min, and max as text.
MinMax Show the gauge's min and max values as text.

None
Do not show any text in the gauge.
Value
Show the gauge's value as text.
Wijmo 5
April 2015
386/535
Module wijmo.angular
File
wijmo.angular.js
Contains AngularJS directives for the Wijmo controls.
The directives allow you to add Wijmo controls to AngularJS applications using simple markup in HTML
pages.
You can use directives as regular HTML tags in the page markup. The tag name corresponds to the
control name, prefixed with "wj-," and the attributes correspond to the names of control properties and
events.
All control, property, and event names within directives follow the usual AngularJS convention of
replacing camel-casing with hyphenated lower-case names.
AngularJS directive parameters come in three flavors, depending on the type of binding they use. The
table below describes each one:
@
By value, or one-way binding. The attribute value is interpreted as a literal.
=
By reference, or two-way binding. The attribute value is interpreted as an expression.
&
Function binding. The attribute value is interpreted as a function call, including the parameters.
For more details on the different binding types, please see Dan Wahlin's blog on directives. The
documentation does not describe directive events because they are identical to the control events, and
the binding mode is always the same (function binding).
To illustrate, here is the markup used to create a ComboBox control:
<wj-combo-box
text="ctx.theCountry"
items-source="ctx.countries"
is-editable="true"
selected-index-changed="ctx.selChanged(s, e)">
</wj-combo-box>
Notice that the text property of the ComboBox is bound to a controller variable called "ctx.theCountry."
The binding goes two ways; changes in the control update the scope, and changes in the scope update
the control. To initialize the text property with a string constant, enclose the attribute value in single
quotes (for example, text="'constant'").
Notice also that the selected-index-changed event is bound to a controller method called "selChanged,"
and that the binding includes the two event parameters (without the parameters, the method is not
called). Whenever the control raises the event, the directive invokes the controller method.
Wijmo 5
April 2015
387/535
Classes
Name
Description
WjAutoComplete
AngularJS directive for the AutoComplete control.

Use the wj-auto-complete directive to add AutoComplete controls to
your AngularJS applications. Note that directive and parameter names
must be formatted as lower-case with dashes instead of camel-case. For
example:
<p>Here is an AutoComplete control:</p>
<wj-auto-complete
text="theCountry"
items-source="countries"
is-editable="false"
placeholder="country">
</wj-auto-complete>
The example below creates an AutoComplete control and binds it to a

'countries' array exposed by the controller. The AutoComplete searches
for the country as the user types, and narrows down the list of countries
that match the current input.
Live Example
The wj-auto-complete directive extends WjComboBox with the
following attributes:
css-match
@ The name of the css class used to highlight parts of the content
that match the search terms.
delay
@ The amount of delay in milliseconds between when a keystroke

occurs and when the search is performed.
items-source-function
= A function that provides the items dynamically as the user
types.
max-items
@ The maximum number of items to display in the dropdown.
min-length
@ The minimum input length to require before triggering
autocomplete suggestions.
WjBulletGraph
AngularJS directive for the BulletGraph control.

Use the wj-bullet-graph directive to add bullet graphs to your AngularJS
applications. Note that directive and parameter names must be formatted
as lower-case with dashes instead of camel-case. For example:
Wijmo 5
April 2015
388/535
Name
Description
<wj-bullet-graph
value="ctx.gauge.value"
min="0" max="10"
target="{{item.target}}"
bad="{{item.target * .75}}"
good="{{item.target * 1.25}}">
</wj-bullet-graph>
The wj-bullet-graph directive supports the following attributes:

control
= A reference to the BulletGraph control created by this directive.

direction
@ The GaugeDirection value indicating which direction the gauge

fills as the value grows.
initialized
& This event occurs after the binding has finished initializing the
control with attribute values.
is-initialized
= A value indicating whether the binding has finished initializing
the control with attribute values.
target
@ The target value for the measure.
good
@ A reference value considered good for the measure.
bad
@ A reference value considered bad for the measure.
value
= The actual value of the measure.
The wj-bullet-graph directive may contain one or more WjRange
directives.
Live Example
WjCalendar
AngularJS directive for the Calendar control.

Use the wj-calendar directive to add Calendar controls to your AngularJS
<p>Here is a Calendar control:</p>
<wj-calendar
value="theDate">
</wj-calendar>
Live Example
Wijmo 5
April 2015
389/535
Name
Description
This example creates a Calendar control and binds it to a 'date' variable
exposed by the controller. The range of dates that may be selected is
limited by the min and max properties.
The wj-calendar directive supports the following attributes:
control
= A reference to the Calendar control created by this directive.

display-month
= The month being displayed in the calendar.
first-day-of-week
@ The first day of the week.
initialized
is-initialized
item-formatter
= The function used to customize the dates shown in the
calendar.
max
@ The latest valid date (string in the format "yyyy-MM-dd").
min
@ The earliest valid date (string in the format "yyyy-MM-dd").
month-view
@ A value indicating whether the control displays a month or the
entire year.
show-header
@ A value indicating whether the control displays the header area.
value
= The date being edited.
value-changed
& The valueChanged event handler.
If provided, the min and max attributes are strings in the format "yyyyMM-dd." Technically, you can use any full date as defined in the W3C
[RFC 3339], which is also the format used with regular HTML5 input
elements.
WjCollectionViewNavigator AngularJS directive for an ICollectionView navigator element.
Use the wj-collection-view-navigator directive to add an element that
allows users to navigate through the items in an ICollectionView. Note
that directive and parameter names must be formatted as lower-case with
dashes instead of camel-case. For example:
Wijmo 5
April 2015
390/535
Name
Description
Here is a CollectionViewNavigator:</p>
<wj-collection-view-navigator
cv="myCollectionView">
</wj-collection-view-navigator>
Live Example
This example creates a CollectionView with 100,000 items and 20 items
per page. It defines a navigator to select the current page, another to
select the current item, and shows the data in a FlexGrid.
The wj-collection-view-navigator directive has a single attribute:
cv
= A reference to the ICollectionView object to navigate.

WjCollectionViewPager
AngularJS directive for an ICollectionView pager element.

Use the wj-collection-view-pager directive to add an element that
allows users to navigate through the pages in a paged ICollectionView.
Note that directive and parameter names must be formatted as lowercase with dashes instead of camel-case. For example:
Here is a CollectionViewPager:</p>
<wj-collection-view-pager
</wj-collection-view-pager>
Live Example
This example creates a CollectionView with 100,000 items and 20 items
per page. It defines a navigator to select the current page, another to
select the current item, and shows the data in a FlexGrid.
The wj-collection-view-pager directive has a single attribute:
cv
= A reference to the paged ICollectionView object to navigate.

WjColorPicker
AngularJS directive for the ColorPicker control.

Use the wj-color-picker directive to add ColorPicker controls to your
AngularJS applications. Note that directive and parameter names must be
formatted as lower-case with dashes instead of camel-case. For example:
<p>Here is a ColorPicker control:</p>
<wj-color-picker
value="theColor"
show-alpha-channel="false">
Wijmo 5
April 2015
391/535
Name
Description
</wj-color-picker>
The wj-color-picker directive supports the following attributes:

control
= A reference to the ColorPicker control created by this directive.

initialized
is-initialized
show-alpha-channel
@ A value indicating whether the control displays the alpha
channel (transparency) editor.
show-color-string
@ A value indicating whether the control displays a string
representation of the color being edited.
palette
= An array with ten color values to use as the palette.
value
= The color being edited.
value-changed
WjComboBox
AngularJS directive for the ComboBox control.

Use the wj-combo-box directive to add ComboBox controls to your
<p>Here is a ComboBox control:</p>
<wj-combo-box
text="theCountry"
is-editable="false"
</wj-combo-box>
The example below creates a ComboBox control and binds it to a

'countries' array exposed by the controller. The ComboBox searches for
the country as the user types. The isEditable property is set to false, so
the user is forced to select one of the items in the list.
Live Example
The wj-combo-box directive supports the following attributes:
Wijmo 5
April 2015
392/535
Name
Description
control
= A reference to the ComboBox control created by this directive.

display-member-path
@ The name of the property to use as the visual representation of

the items.
is-content-html
@ A value indicating whether the drop-down list displays the
items as plain text or as HTML.
is-dropped-down
@ A value indicating whether the drop down list is currently
visible.
is-editable
@ A value indicating whether the user can enter values not
present on the list.
initialized
is-initialized
item-formatter
= A function used to customize the values shown in the dropdown list.
items-source
= An array or ICollectionView that contains items to show in the
list.
max-drop-down-height
@ The maximum height of the drop-down list.
max-drop-down-width
@ The maximum width of the drop-down list.
placeholder
@ A string shown as a hint when the control is empty.
required
@ A value indicating whether to prevent null values.
show-drop-down-button
@ A value indicating whether the control displays a drop-down
button.
selected-index
= The index of the currently selected item in the drop-down list.
selected-item
= The currently selected item in the drop-down list.
selected-value
= The value of the selected item, obtained using the selectedvalue-[ath.
selected-value-path
@ The name of the property used to get the selected-value from
the selected-item.
Wijmo 5
April 2015
393/535
Name
Description
text
= The text to show in the control.

is-dropped-down-changed
& The isDroppedDownChanged event handler.

selected-index-changed
& The selectedIndexChanged event handler.

text-changed
& The textChanged event handler.
WjContextMenu
AngularJS directive for context menus.

Use the wj-context-menu directive to add context menus to elements on
the page. The wj-context-menu directive is based on the wj-menu
directive; it displays a popup menu when the user performs a context
menu request on an element (usually a right-click).
The wj-context-menu directive is specified as a parameter added to the
element that the context menu applies to. The parameter value is a
selector for the element that contains the menu. For example:

<p wj-context-menu="#idMenu" >
This paragraph has a context menu.</p>

<wj-menu id="idMenu" ng-show="false">
<wj-menu-item cmd="cmdOpen" cmd-param ="1">Open...</wj-menu-item>
<wj-menu-item cmd="cmdSave" cmd-param="2">Save </wj-menu-item>
<wj-menu-item cmd="cmdSave" cmd-param="3">Save As...</wj-menu-item>
<wj-menu-item cmd="cmdNew" cmd-param ="4">New...</wj-menu-item>
<wj-menu-separator></wj-menu-separator>
<wj-menu-item cmd="cmdExit" cmd-param="5">Exit</wj-menu-item>
</wj-menu >
WjFlexChart
AngularJS directive for the FlexChart control.

Use the wj-flex-chart directive to add charts to your AngularJS
using lower-case letters with dashes instead of camel case. For example:
<p>Here is a FlexChart control:</p>
Wijmo 5
April 2015
394/535
Name
Description
<wj-flex-chart
style="height:300px"
items-source="data"
binding-x="country">
<wj-flex-chart-axis
wj-property="axisY"
major-unit="5000">
</wj-flex-chart-axis>
<wj-flex-chart-series
binding="sales"
name="Sales">
</wj-flex-chart-series>
binding="expenses"
name="Expenses">
binding="downloads"
name="Downloads"
chart-type="LineSymbols">
</wj-flex-chart>
The example below creates a FlexChart control and binds it to a 'data'

array exposed by the controller. The chart has three series objects, each
corresponding to a property in the objects contained in the source array.
The last series in the example uses the 'chart-type' attribute to override
the default chart type used for the other series objects.
Live Example
The wj-flex-chart directive supports the following attributes:
binding
@ The name of the property that contains Y values for the chart.
You can override this at the series level.
binding-x
@ The name of the property that contains X values for the chart.
You can override this at the series level.
chart-type
@ The default chart type to use in rendering series objects. You
can override this at the series level. See ChartType.
control
= A reference to the FlexChart control that this directive creates.
footer
@ The text to display in the chart footer (plain text).
footer-style
= The style to apply to the chart footer.
header
@ The text to display in the chart header (plain text).
header-style
= The style to apply to the chart header.
initialized
Wijmo 5
April 2015
395/535
Name
Description
is-initialized
interpolate-nulls
@ The value indicating whether to interpolate or leave gaps when
there are null values in the data.
item-formatter
= The formatter function that customizes the appearance of data
points.
items-source
= An array or ICollectionView object that contains the data used
to create the chart.
legend-toggle
@ The value indicating whether clicking legend items toggles
series visibility.
options
= Chart options that only apply to certain chart types. See
options under FlexChart for details.
palette
= An array that contains the default colors used for displaying
each series.
plot-margin
= The number of pixels of space to leave between the edges of
the control and the plot area, or CSS-style margins.
rotated
@ The value indicating whether to flip the axes so that X is vertical
and Y is horizontal.
selection
= The series object that is selected.
selection-mode
@ The SelectionMode value indicating whether or what is
selected when the user clicks a series.
stacking
@ The Stacking value indicating whether or how series objects are
stacked or plotted independently.
symbol-size
@ The size in pixels of the symbols used to render data points in
Scatter, LineSymbols, and SplineSymbols charts. You can override
this at the series level.
tooltip-content
@ The value to display in the ChartTooltip content property.
rendering
& The rendering event handler.
rendered
& The rendered event handler.
Wijmo 5
April 2015
396/535
Name
Description
series-visibility-changed
& The seriesVisibilityChanged event handler.

selection-changed
& The selectionChanged event handler.

The wj-flex-chart directive may contain the following child directives:
WjFlexChartAxis, WjFlexChartSeries, WjFlexChartLegend and
WjFlexChartDataLabel.
WjFlexChartAxis
AngularJS directive for the FlexChart Axis object.

The wj-flex-chart-axis directive must be contained in a WjFlexChart
directive. It supports the following attributes:
wj-property
@ Defines the FlexChart property name, axis-x or axis-y, to

initialize with this directive.
axis-line
@ The value indicating whether the axis line is visible.
format
@ The format string used for the axis labels (see Globalize).
labels
@ The value indicating whether the axis labels are visible.
label-angle
@ The rotation angle of axis labels in degrees.
major-grid
@ The value indicating whether the axis includes grid lines.
major-tick-marks
@ Defines the appearance of tick marks on the axis (see
TickMark).
major-unit
@ The number of units between axis labels.
max
@ The minimum value shown on the axis.
min
@ The maximum value shown on the axis.
minor-grid
@ The value indicating whether the axis includes minor grid lines.
minor-tick-marks
@ Defines the appearance of minor tick marks on the axis (see
TickMark).
minor-unit
@ The number of units between minor axis ticks.
origin
@ The axis origin.
position
@ The Position value indicating the position of the axis.
reversed
Wijmo 5
April 2015
397/535
Name
Description
@ The value indicating whether the axis is reversed (top to bottom
or right to left).
title
@ The title text shown next to the axis.

WjFlexChartDataLabel
AngularJS directive for the FlexChart DataLabel object.

The wj-flex-chart-data-label directive must be contained in a
WjFlexChart directive. It supports the following attributes:
content
= A string or function that gets or sets the content of data labels.

border
@ Gets or sets a value indicating whether data labels have

borders.
position
@ The LabelPosition value indicating the position of data labels.
WjFlexChartLegend
AngularJS directive for the FlexChart Legend object.

The wj-flex-chart-legend directive must be contained in a WjFlexChart
position
@ The Position value indicating the position of the legend.

The example below shows how you can use the wj-flex-chart-legend
directive to change the position of the chart legend:
<wj-flex-chart
items-source="data"
<wj-flex-chart-axis
wj-property="axisY"
major-unit="5000">
binding="sales"
name="Sales">
<wj-flex-chart-legend
position="Bottom">
</wj-flex-chart-legend>
</wj-flex-chart>
WjFlexChartLineMarker
AngularJS directive for the FlexChart LineMarker object.

The wj-flex-line-marker directive must be contained in a WjFlexChart
isVisible
@ The value indicating whether the LineMarker is visible.
Wijmo 5
April 2015
398/535
Name
Description
seriesIndex
@ The index of the series in the chart in which the LineMarker

appears.
horizontalPosition
@ The horizontal position of the LineMarker relative to the plot
area.
content
@ The content function that allows to customize the text content
of the LineMarker..
verticalPosition
@ The vertical position of the LineMarker relative to the plot area.
alignment
@ The LineMarkerAlignment value indicating the alignment of
the LineMarker content.
lines
@ The LineMarkerLines value indicating the appearance of
LineMarker's lines.
interaction
@ The LineMarkerInteraction value indicating the interaction
mode of LineMarker.
WjFlexChartRangeSelector AngularJS directive for the FlexChart RangeSelector object.
The wj-flex-range-selector directive must be contained in a
WjFlexChart directive. It supports the following attributes:
isVisible
@ The value indicating whether the RangeSelector is visible.

min
@ The minimal value of the range.

max
@ The maximal value of the range.

orientation
@ The orientation of the RangeSelector.
WjFlexChartSeries
AngularJS directive for the FlexChart Series object.

The wj-flex-chart-series directive must be contained in a WjFlexChart
binding
@ The name of the property that contains Y values for the series.
This value overrides any binding set for the chart.
binding-x
@ The name of the property that contains X values for the series.
This value overrides any binding set for the chart.
chart-type
Wijmo 5
April 2015
399/535
Name
Description
@ The chart type to use in rendering objects for this series objects.
This value overrides the default chart type set on the chart. See
ChartType.
css-class
@ The CSS class to use for the series.
items-source
= An array or ICollectionView object that contains data for this
series.
name
@ The name of the series to show in the legend.
style
= The series style. Use ng-attr-style to specify the series style
object as an object. See the section on ngAttr attribute bindings
in AngularJS Creating Custom Directives and the FlexChart 101
Styling Series sample for more information.
symbol-marker
@ The shape of marker to use for the series. This value overrides
the default marker set on the chart. See Marker.
symbol-size
@ The size in pixels of the symbols used to render data points in
this series for Scatter, LineSymbols, and SplineSymbols charts.
This value overrides any set at the chart level.
symbol-style
= The style of the symbols used to render data points in this
series for Scatter, LineSymbols, and SplineSymbols charts. This
value overrides any set at the chart level.
visibility
= The SeriesVisibility value indicating whether and where to
display the series.
In most cases, the wj-flex-chart-series specifies only the "name" and
"binding" properties. The remaining values are inherited from the parent
wj-flex-chart directive.
WjFlexGrid
AngularJS directive for the FlexGrid control.

Use the wj-flex-grid directive to add grids to your AngularJS applications.
Note that directive and parameter names must be formatted as lowercase with dashes instead of camel-case. For example:
<p>Here is a FlexGrid control:</p>
<wj-flex-grid-column
header="Country"
binding="country">
</wj-flex-grid-column>
header="Sales"
binding="sales">
Wijmo 5
April 2015
400/535
Name
Description
header="Expenses"
binding="expenses">
header="Downloads"
binding="downloads">
</wj-flex-grid>
The example below creates a FlexGrid control and binds it to a 'data' array
exposed by the controller. The grid has three columns, each
corresponding to a property of the objects contained in the source array.
Live Example
The wj-flex-grid directive supports the following attributes:
allowAddNew
@ A value indicating whether to show a new row template so

users can add items to the source collection.
allow-delete
@ A value indicating whether the grid deletes selected rows when
the user presses the Delete key.
allow-dragging
@ An AllowDragging value indicating whether and how the user
can drag rows and columns with the mouse.
allow-merging
@ An AllowMerging value indicating which parts of the grid
provide cell merging.
allow-resizing
@ An AllowResizing value indicating whether users are allowed
to resize rows and columns with the mouse.
allow-sorting
@ A boolean value indicating whether users can sort columns by
clicking the column headers.
auto-generate-columns
@ A boolean value indicating whether the grid generates columns
automatically based on the items-source.
child-items-path
@ The name of the property used to generate child rows in
hierarchical grids.
control
= A reference to the FlexGrid control created by this directive.
defer-resizing
= A boolean value indicating whether row and column resizing
should be deferred until the user releases the mouse button.
frozen-columns
@ The number of frozen (non-scrollable) columns in the grid.
Wijmo 5
April 2015
401/535
Name
Description
frozen-rows
@ The number of frozen (non-scrollable) rows in the grid.

group-header-format
@ The format string used to create the group header content.

headers-visibility
= A HeadersVisibility value indicating whether the row and

column headers are visible.
initialized
is-initialized
item-formatter
= A function that customizes cells on this grid.
items-source
= An array or ICollectionView object that contains the items
shown on the grid.
is-read-only
@ A boolean value indicating whether the user is prevented from
editing grid cells by typing into them.
merge-manager
= A MergeManager object that specifies the merged extent of
the specified cell.
selection-mode
@ A SelectionMode value indicating whether and how the user
can select cells.
show-groups
@ A boolean value indicating whether to insert group rows to
delimit data groups.
show-sort
@ A boolean value indicating whether to display sort indicators in
the column headers.
sort-row-index
@ A number specifying the index of row in the column header
panel that shows and changes the current sort.
tree-indent
@ The indentation, in pixels, used to offset row groups of different
levels.
beginning-edit
& Handler for the beginningEdit event.
cell-edit-ended
& Handler for the cellEditEnded event.
cell-edit-ending
& Handler for the cellEditEnding event.
prepare-cell-for-edit
& Handler for the prepareCellForEdit event.
Wijmo 5
April 2015
402/535
Name
Description
resizing-column
& Handler for the resizingColumn event.

resized-column
& Handler for the resizedColumn event.

dragged-column
& Handler for the draggedColumn event.

dragging-column
& Handler for the draggingColumn event.
sorted-column
& Handler for the sortedColumn event.
sorting-column
& Handler for the sortingColumn event.
deleting-row
& Handler for the deletingRow event.
dragging-row
& Handler for the draggingRow event.
dragged-row
& Handler for the draggedRow event.
resizing-row
& Handler for the resizingRow event.
resized-row
& Handler for the resizedRow event.
row-added
& Handler for the rowAdded event.
row-edit-ended
& Handler for the rowEditEnded event.
row-edit-ending
& Handler for the rowEditEnding event.
loaded-rows
& Handler for the loadedRows event.
loading-rows
& Handler for the loadingRows event.
group-collapsed-changed
& Handler for the groupCollapsedChanged event.
group-collapsed-changing
& Handler for the groupCollapsedChanging event.
items-source-changed
& Handler for the itemsSourceChanged event.
selection-changing
& Handler for the selectionChanging event.
selection-changed
& Handler for the selectionChanged event.
scroll-position-changed
& Handler for the scrollPositionChanged event.
The wj-flex-grid directive may contain WjFlexGridColumn and
WjFlexGridCellTemplate child directives.
Wijmo 5
April 2015
403/535
Name
Description
WjFlexGridCellTemplate
AngularJS directive for the FlexGrid cell templates.

The wj-flex-grid-cell-template directive defines a template for a certain
cell type in FlexGrid, and must contain a cell-type attribute that specifies
the CellTemplateType. Depending on the template's cell type, the wjflex-grid-cell-template directive must be a child of either WjFlexGrid or
WjFlexGridColumn directives.
Column-specific cell templates must be contained in wj-flex-gridcolumn directives, and cells that are not column-specific (like row header
or top left cells) must be contained in the wj-flex-grid directive.
In addition to an HTML fragment, wj-flex-grid-cell-template directives
may contain an ng-style attribute that provides conditional formatting for
cells.
Both the ng-style attribute and the HTML fragment can use the $col,
$row and $item template variables that refer to the Column, Row and
Row.dataItem objects pertaining to the cell.
For cell types like Group and CellEdit, an additional $value variable
containing an unformatted cell value is provided. For example, here is a
FlexGrid control with templates for row headers and for the Country
column's regular and column header cells:
<wj-flex-grid-cell-template cell-type="RowHeader">
{{$row.index}}
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cell-type="RowHeaderEdit">
...
<wj-flex-grid-column header="Country" binding="country">
<wj-flex-grid-cell-template cell-type="ColumnHeader">
<img ng-src="resources/globe.png" />
{{$col.header}}
<wj-flex-grid-cell-template cell-type="Cell">
<img ng-src="resources/{{$item.country}}.png" />
{{$item.country}}
<wj-flex-grid-column header="Sales" binding="sales"></wj-flex-gridcolumn>
</wj-flex-grid>
For more detailed information on specific cell type templates refer to the
documentation for the CellTemplateType enumeration.
Note that the wj-flex-grid-column directive may also contain arbitrary
content that is treated as a template for a regular data cell (cell-
Wijmo 5
April 2015
404/535
Name
Description
type="Cell"). But if a wj-flex-grid-cell-template directive exists and is set
to cell-type="Cell" under the wj-flex-grid-column directive, it takes
priority and overrides the arbitrary content.
The wj-flex-grid-cell-template directive supports the following
attributes:
cell-type
@ The CellTemplateType value defining the type of cell the

template applies to.
cell-overflow
@ Defines the style.overflow property value for cells.
The cell-type attribute takes any of the following enumerated values:
Cell
Defines a regular (data) cell template. Must be a child of the
WjFlexGridColumn directive. For example, this cell template shows flags
in the Country column's cells:
{{$item.country}}
For a hierarchical FlexGrid (that is, one with the childItemsPath property
specified), if no Group template is provided, non-header cells in group
rows in this Column also use this template.
CellEdit
Defines a template for a cell in edit mode. Must be a child of the
WjFlexGridColumn directive. This cell type has an additional $value
property available for binding. It contains the original cell value before
editing, and the updated value after editing. For example, here is a
template that uses the Wijmo InputNumber control as an editor for the
"Sales" column:
<wj-flex-grid-column header="Sales" binding="sales">
<wj-flex-grid-cell-template cell-type="CellEdit">
<wj-input-number value="$value" step="1"></wj-input-number>
Wijmo 5
April 2015
405/535
Name
Description
ColumnHeader
Defines a template for a column header cell. Must be a child of the
WjFlexGridColumn directive. For example, this template adds an image
to the header of the "Country" column:
{{$col.header}}
RowHeader
Defines a template for a row header cell. Must be a child of the
WjFlexGrid directive. For example, this template shows row indices in the
row headers:
{{$row.index}}
</wj-flex-grid>
Note that this template is applied to a row header cell, even if it is in a

row that is in edit mode. In order to provide an edit-mode version of a
row header cell with alternate content, define the RowHeaderEdit
template.
RowHeaderEdit
Defines a template for a row header cell in edit mode. Must be a child of
the WjFlexGrid directive. For example, this template shows dots in the
header of rows being edited:
...
</wj-flex-grid>
To add the standard edit-mode indicator to cells where the RowHeader

template applies, use the following RowHeaderEdit template:
{{✎}}
Wijmo 5
April 2015
406/535
Name
Description
</wj-flex-grid>
TopLeft
Defines a template for the top left cell. Must be a child of the WjFlexGrid
directive. For example, this template shows a down/right glyph in the topleft cell of the grid:
<wj-flex-grid-cell-template cell-type="TopLeft">
<span class="wj-glyph-down-right"></span>
</wj-flex-grid>
GroupHeader
Defines a template for a group header cell in a GroupRow, Must be a
child of the WjFlexGridColumn directive.
The $row variable contains an instance of the GroupRow class. If the
grouping comes from the a CollectionView, the $item variable
references the CollectionViewGroup object.
For example, this template uses a checkbox element as an
expand/collapse toggle:
<wj-flex-grid-cell-template cell-type="GroupHeader">
<input type="checkbox" ng-model="$row.isCollapsed"/>
{{$item.name}} ({{$item.items.length}} items)
Group
Defines a template for a regular cell (not a group header) in a GroupRow.
Must be a child of the WjFlexGridColumn directive. This cell type has an
additional $value varible available for binding. In cases where columns
have the aggregate property specified, it contains the unformatted
aggregate value.
For example, this template shows an aggregate's value and kind for group
row cells in the "Sales" column:
<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
<wj-flex-grid-cell-template cell-type="Group">
Average: {{$value | number:2}}
Wijmo 5
April 2015
407/535
Name
Description
WjFlexGridColumn
AngularJS directive for the FlexGrid Column object.

The wj-flex-grid-column directive must be contained in a WjFlexGrid
aggregate
@ The Aggregate object to display in the group header rows for

this column.
align
@ The string value that sets the horizontal alignment of items in

the column to left, right, or center.
allow-dragging
@ The value indicating whether the user can move the column to
a new position with the mouse.
allow-sorting
@ The value indicating whether the user can sort the column by
clicking its header.
allow-resizing
@ The value indicating whether the user can resize the column
with the mouse.
allow-merging
@ The value indicating whether the user can merge cells in the
column.
binding
@ The name of the property to which the column is bound.
css-class
@ The name of a CSS class to use when rendering the column.
data-map
= The DataMap object to use to convert raw values into display
values for the column.
data-type
@ The enumerated DataType value that indicates the type of
value stored in the column.
format
@ The format string to use to convert raw values into display
values for the column (see Globalize).
header
@ The string to display in the column header.
input-type
@ The type attribute to specify the input element used to edit
values in the column. The default is "tel" for numeric columns,
and "text" for all other non-Boolean columns.
is-content-html
@ The value indicating whether cells in the column contain HTML
content rather than plain text.
Wijmo 5
April 2015
408/535
Name
Description
is-read-only
@ The value indicating whether the user is prevented from editing

values in the column.
is-selected
@ The value indicating whether the column is selected.
mask
@ The mask string used to edit values in the column.
max-width
@ The maximum width for the column.
min-width
@ The minimum width for the column.
name
@ The column name. You can use it to retrieve the column.
required
@ The value indicating whether the column must contain non-null
values.
show-drop-down
@ The value indicating whether to show drop-down buttons for
editing based on the column's DataMap.
visible
@ The value indicating whether the column is visible.
width
@ The width of the column in pixels or as a star value.
word-wrap
@ The value indicating whether cells in the column wrap their
content.
Any html content within the wj-flex-grid-column directive is treated as a
template for the cells in that column. The template is applied only to
regular cells. If you wish to apply templates to specific cell types such as
column or group headers, then please see the WjFlexGridCellTemplate
directive.
The following example creates two columns with a template and a
conditional style:
Live Example
The wj-flex-grid-column directive may contain WjFlexGridCellTemplate
child directives.
WjFlexGridFilter
AngularJS directive for the FlexGrid FlexGridFilter object.

The wj-flex-grid-filter directive must be contained in a WjFlexGrid
directive. For example:
<p>Here is a FlexGrid control with column filters:</p>
Wijmo 5
April 2015
409/535
Name
Description
<wj-flex-grid-filter filter-columns="['country', 'expenses']"></wj-flexgrid-filter>
header="Country"
binding="country">
header="Sales"
binding="sales">
header="Expenses"
binding="expenses">
header="Downloads"
</wj-flex-grid>
The wj-flex-grid-filter directive supports the following attributes:

filter-columns
= An array containing the names or bindings of the columns to

filter.
show-filter-icons
@ The value indicating whether filter editing buttons appear in the
grid's column headers.
filter-applied
& Handler for the filterApplied event.
WjFlexPie
AngularJS directive for the FlexPie control.

items-source
= An array or ICollectionView object that contains data for the

chart.
binding
@ The name of the property that contains item values.
binding-name
@ The name of the property that contains item names.
footer
footer-style
header
header-style
initialized
Wijmo 5
April 2015
410/535
Name
Description
is-initialized

inner-radius
@ The size of the hole inside the pie, measured as a fraction of the
pie radius.
is-animated
@ A value indicating whether to use animation to move selected
items to the selectedItemPosition.
item-formatter
= The formatter function that customizes the appearance of data
points.
offset
@ The extent to which pie slices are pulled out from the center, as
a fraction of the pie radius.
palette
= An array that contains the default colors used for displaying pie
slices.
plot-margin
= The number of pixels of space to leave between the edges of
the control and the plot area, or CSS-style margins.
reversed
@ A value indicating whether to draw pie slices in a counterclockwise direction.
start-angle
@ The starting angle for pie slices, measured clockwise from the 9
o'clock position.
selected-item-offset
@ The extent to which the selected pie slice is pulled out from the
center, as a fraction of the pie radius.
selected-item-position
@ The Position value indicating where to display the selected
slice.
selection-mode
@ The SelectionMode value indicating whether or what is
selected when the user clicks a series.
tooltip-content
rendering
rendered
The wj-flex-pie directive may contain the following child directives:
WjFlexChartLegend and WjFlexPieDataLabel.
WjFlexPieDataLabel
Wijmo 5
AngularJS directive for the FlexPie PieDataLabel object.
April 2015
411/535
Name
Description
The wj-flex-pie-data-label directive must be contained in a WjFlexPie
content

border
@ Gets or sets a value indicating whether data labels have

borders.
position
@ The PieLabelPosition value indicating the position of data
labels.
WjGroupPanel
AngularJS directive for the FlexGrid GroupPanel control.

The wj-group-panel directive connects to the FlexGrid control via the
grid property. For example:
<p>Here is a FlexGrid control with GroupPanel:</p>
<wj-group-panel grid="flex" placeholder="Drag columns here to create
groups."></wj-group-panel>
<wj-flex-grid control="flex" items-source="data">
header="Country"
binding="country">
header="Sales"
binding="sales">
header="Expenses"
binding="expenses">
header="Downloads"
</wj-flex-grid>
The wj-group-panel directive supports the following attributes:

grid
@The FlexGrid that is connected to this GroupPanel.

hide-grouped-columns
@A value indicating whether the panel hides grouped columns in

the owner grid.
max-groups
@The maximum number of groups allowed.
placeholder
@A string to display in the control when it contains no groups.
Wijmo 5
April 2015
412/535
Name
Description
WjInputColor
AngularJS directive for the InputColor control.

Use the wj-input-color directive to add InputColor controls to your
<p>Here is an InputColor control:</p>
<wj-input-color
value="theColor"
</wj-input-color>
The wj-input-color directive supports the following attributes:

control
= A reference to the InputColor control created by this directive.

is-dropped-down
@ A value indicating whether the drop-down is currently visible.
initialized
is-initialized
show-alpha-channel
@ A value indicatinbg whether the drop-down displays the alpha
channel (transparency) editor.
place-holder
@ The string to show as a hint when the control is empty.
required
button.
text
value
text-changed
value-changed
WjInputDate
Wijmo 5
AngularJS directive for the InputDate control.
April 2015
413/535
Name
Description
Use the wj-input-date directive to add InputDate controls to your
<p>Here is an InputDate control:</p>
<wj-input-date
value="theDate"
format="M/d/yyyy">
</wj-input-date>
The example below shows a Date value (that includes date and time
information) using an InputDate and an an InputTime control. Notice
how both controls are bound to the same controller variable, and each
edits the appropriate information (either date or time). The example also
shows a Calendar control that can be used to select the date with a single
click.
Live Example
The wj-input-date directive supports the following attributes:
control
= A reference to the InputDate control created by this directive.

format
@ The format used to display the date being edited (see

Globalize).
mask
@ The mask used to validate the input as the user types (see
InputMask).
is-dropped-down
initialized
is-initialized
max
@ The latest valid date (a string in the format "yyyy-MM-dd").
min
@ The earliest valid date (a string in the format "yyyy-MM-dd").
place-holder
required
Wijmo 5
April 2015
414/535
Name
Description
button.
text

value


text-changed

value-changed

If provided, the min and max attributes are strings in the format "yyyyMM-dd". Technically, you can use any full date as defined in the W3C
elements.
WjInputMask
AngularJS directive for the InputMask control.

Use the wj-input-mask directive to add InputMask controls to your
<p>Here is an InputMask control:</p>
<wj-input-mask
mask="99/99/99"
mask-placeholder="*">
</wj-input-mask>
The wj-input-mask directive supports the following attributes:

control
= A reference to the InputNumber control created by this

directive.
initialized
is-initialized
mask
@ The string mask used to format the value as the user types.
prompt-char
@ A character used to show input locations within the mask.
place-holder
value
Wijmo 5
April 2015
415/535
Name
Description
= The number being edited.
value-changed

WjInputNumber
AngularJS directive for the InputNumber control.

Use the wj-input-number directive to add InputNumber controls to
your AngularJS applications. Note that directive and parameter names
must be formatted as lower-case with dashes instead of camel-case. For
example:
<p>Here is an InputNumber control:</p>
<wj-input-number
value="theNumber"
min="0"
max="10"
format="n0"
placeholder="number between zero and ten">
</wj-input-number>
The example below creates several InputNumber controls and shows the
effect of using different formats, ranges, and step values.
Live Example
The wj-input-number directive supports the following attributes:
control
= A reference to the InputNumber control created by this

directive.
format
@ The format used to display the number (see Globalize).

input-type
@ The "type" attribute of the HTML input element hosted by the

control.
initialized
is-initialized
max
@ The largest valid number.
min
@ The smallest valid number.
place-holder
required
Wijmo 5
April 2015
416/535
Name
Description
show-spinner
@ A value indicating whether to display spinner buttons to change

the value by step units.
step
@ The amount to add or subtract to the value when the user clicks
the spinner buttons.
text

value

text-changed

value-changed
WjInputTime
AngularJS directive for the InputTime control.

Use the wj-input-time directive to add InputTime controls to your
<p>Here is an InputTime control:</p>
<wj-input-time
value="theDate"
format="h:mm tt"
min="09:00" max="17:00"
step="15">
</wj-input-time>
Live Example
This example edits a Date value (that includes date and time information)
using an InputDate and an an InputTime control. Notice how both
controls are bound to the same controller variable, and each edits the
appropriate information (either date or time). The example also shows a
Calendar control that can be used to select the date with a single click.
The wj-input-time directive extends WjComboBox with the following
attributes:
control

format
@ The format used to display the selected time.

mask
@ A mask used to validate the input as the user types (see

InputMask).
max
Wijmo 5
April 2015
417/535
Name
Description
@ The earliest valid time (a string in the format "hh:mm").
min
@ The latest valid time (a string in the format "hh:mm").

step
@ The number of minutes between entries in the drop-down list.

value
= The time being edited (as a Date object).

value-changed
& The@see: valueChanged event handler.

If provided, the min and max attributes are strings in the format
"hh:mm". Technically, you can use any full date as defined in the W3C
elements.
WjLinearGauge
AngularJS directive for the LinearGauge control.

Use the wj-linear-gauge directive to add linear gauges to your AngularJS
in lower-case with dashes instead of camel-case. For example:
<wj-linear-gauge
show-text="Value"
is-read-only="false">
<wj-range
wj-property="pointer"
thickness="0.2">
<wj-range
min="0"
max="33"
color="green">
</wj-range>
<wj-range
min="33"
max="66"
color="yellow">
</wj-range>
<wj-range
min="66"
max="100"
color="red">
</wj-range>
</wj-range>
</wj-linear-gauge>
The wj-linear-gauge directive supports the following attributes:

control
= A reference to the LinearGauge control created by this

directive.
direction
Wijmo 5
April 2015
418/535
Name
Description
@ The GaugeDirection value in which the gauge fills as the value
grows.
format
@ The format string used for displaying the gauge values as text.
has-shadow
@ A value indicating whether the gauge displays a shadow effect.

initialized
is-initialized
is-animated
@ A value indicating whether the gauge animates value changes.
is-read-only
@ A value indicating whether users are prevented from editing the
value.
min
@ The minimum value that the gauge can display.
max
@ The maximum value that the gauge can display.
show-text
@ The ShowText value indicating which values display as text
within the gauge.
step
@ The amount to add or subtract to the value property when the
user presses the arrow keys.
thickness
@ The thickness of the gauge, on a scale of zero to one.
value
= The value displayed on the gauge.
The wj-linear-gauge directive may contain one or more WjRange
directives.
Live Example
WjListBox
AngularJS directive for the ListBox control.

Use the wj-list-box directive to add ListBox controls to your AngularJS
b>Here is a ListBox control:</p>
<wj-list-box
selected-item="theCountry"
Wijmo 5
April 2015
419/535
Name
Description
</wj-list-box>
The example below creates a ListBox control and binds it to a 'countries'

array exposed by the controller. The value selected is bound to the
'theCountry' controller property using the selected-item attribute.
Live Example
The wj-list-box directive supports the following attributes:
control
= A reference to the ListBox control created by this directive.

display-member-path
@ The property to use as the visual representation of the items.

is-content-html
@ A value indicating whether items contain plain text or HTML.
initialized
is-initialized
item-formatter
= A function used to customize the values to show in the list.
items-source
= An array or ICollectionView that contains the list items.
max-height
@ The maximum height of the list.
selected-index
= The index of the currently selected item.
selected-item
= The item that is currently selected.
selected-value
= The value of the selected-item obtained using the selectedvalue-path.
selected-value-path
@ The property used to get the selected-value from the
selected-item.
items-changed
& The itemsChanged event handler.
WjMenu
Wijmo 5
AngularJS directive for the Menu control.
April 2015
420/535
Name
Description
Use the wj-menu directive to add drop-down menus to your AngularJS
<p>Here is a Menu control used as a value picker:</p>
<wj-menu header="Tax" value="tax">
<wj-menu-item value="0">Exempt</wj-menu-item>
<wj-menu-item value=".05">5%</wj-menu-item>
</wj-menu>
Live Example
This example creates three Menu controls. The first is used as a value
picker, the second uses a list of commands with parameters, and the third
is a group of three menus handled by an itemClicked function in the
controller.
The wj-menu directive extends WjComboBox with the following
attributes:
command-path
@ The command to be executed when the item is clicked.

command-parameter-path
@ The name of the property that contains command parameters.
header
@ The text shown on the control.
is-button
@ Whether the menu should react to clicks on its header area.
value
@ The value of the selected wj-menu-item value property.
item-clicked
& The itemClicked event handler.
The wj-menu directive may contain the following child directives:
WjMenuItem and WjMenuSeparator.
WjMenuItem
AngularJS directive for menu items.

The wj-menu-item directive must be contained in a WjMenu directive. It
supports the following attributes:
cmd
= The function to execute in the controller when the item is

clicked.
cmd-param
Wijmo 5
April 2015
421/535
Name
Description
= The parameter passed to the cmd function when the item is
clicked.
value
= The value to select when the item is clicked (use either this or
cmd).
The content displayed by the item is defined by the HTML contained in
wj-menu-item directive.
WjMenuSeparator
AngularJS directive for menu separators.

The wj-menu-item-separator directive must be contained in a WjMenu
directive. It adds a non-selectable separator to the menu, and has no
attributes.
WjRadialGauge
AngularJS directive for the RadialGauge control.

Use the wj-radial-gauge directive to add radial gauges to your AngularJS
Here is a <b>RadialGauge</b> control:</p>
<wj-radial-gauge
value="count"
min="0" max="10"
</wj-radial-gauge>
The wj-radial-gauge directive supports the following attributes:

control
= A reference to the RadialGauge control created by this directive.

auto-scale
@ A value indicating whether the gauge scales the display to fill

the host element.
format
@ The format string used for displaying gauge values as text.

has-shadow

initialized
is-initialized
is-animated
is-read-only
Wijmo 5
April 2015
422/535
Name
Description
@ A value indicating whether users are prevented from editing the
value.
min

max

show-text
@ A ShowText value indicating which values display as text within

the gauge.
step
@ The amount to add or subtract to the value property when the

user presses the arrow keys.
start-angle
@ The starting angle for the gauge, in degreees, measured
clockwise from the 9 o'clock position.
sweep-angle
@ The sweeping angle for the gauge in degrees (may be positive
or negative).
thickness
value
The wj-radial-gauge directive may contain one or more WjRange
directives.
Live Example
WjRange
AngularJS directive for the Range object.

The wj-range directive must be contained in a WjLinearGauge,
WjRadialGauge or WjBulletGraph directive. It adds the Range object to
the 'ranges' array property of the parent directive. You may also initialize
other Range type properties of the parent directive by specifying the
property name with the wj-property attribute.
For example:
<wj-radial-gauge
min="0"
max="200"
step="20"
value="theValue"
<wj-range
min="0"
max="100"
color="red">
</wj-range>
<wj-range
min="100"
Wijmo 5
April 2015
423/535
Name
Description
max="200"
color="green">
</wj-range>
<wj-range
color="blue">
</wj-range>
</wj-radial-gauge>
The wj-range directive supports the following attributes:

min
@ The minimum value in the range.

max
@ The maximum value in the range.

color
@ The color used to display the range.

thickness
@ The thickness of the range, on a scale of zero to one.

name
@ The name of the range.

wj-property
@ The name of the property to initialize with this directive.

WjTooltip
AngularJS directive for the Tooltip class.

Use the wj-tooltip directive to add tooltips to elements on the page. The
wj-tooltip directive supports HTML content, smart positioning, and touch.
The wj-tooltip directive is specified as a parameter added to the element
that the tooltip applies to. The parameter value is the tooltip text or the id
of an element that contains the text. For example:
<p wj-tooltip="#fineprint" >
Regular paragraph content...</p>
...
<div id="fineprint" style="display:none">
<h3>Important Note</h3>
<p>
Data for the current quarter is estimated
by pro-rating etc.</p>
</div>
Wijmo 5
April 2015
424/535
Enumerations
Name
Description
CellTemplateType Defines the type of cell to which to apply the template. This value is specified in the
cell-type attribute of the WjFlexGridCellTemplate directive.
Wijmo 5
April 2015
425/535
WjAutoComplete Class
Base Class
WjComboBox
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the AutoComplete control.
Use the wj-auto-complete directive to add AutoComplete controls to your AngularJS applications. Note
that directive and parameter names must be formatted as lower-case with dashes instead of camel-case.
For example:
<wj-auto-complete
text="theCountry"
is-editable="false"
</wj-auto-complete>
The example below creates an AutoComplete control and binds it to a 'countries' array exposed by the
controller. The AutoComplete searches for the country as the user types, and narrows down the list of
countries that match the current input.
Live Example
The wj-auto-complete directive extends WjComboBox with the following attributes:
css-match
@ The name of the css class used to highlight parts of the content that match the search terms.
delay
@ The amount of delay in milliseconds between when a keystroke occurs and when the search is
performed.
items-source-function
= A function that provides the items dynamically as the user types.
max-items
@ The maximum number of items to display in the dropdown.
min-length
@ The minimum input length to require before triggering autocomplete suggestions.
Wijmo 5
April 2015
426/535
WjBulletGraph Class
Base Class
WjLinearGauge
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the BulletGraph control.
Use the wj-bullet-graph directive to add bullet graphs to your AngularJS applications. Note that directive
and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:
<wj-bullet-graph
min="0" max="10"
target="{{item.target}}"
bad="{{item.target * .75}}"
good="{{item.target * 1.25}}">
</wj-bullet-graph>
The wj-bullet-graph directive supports the following attributes:

control
= A reference to the BulletGraph control created by this directive.

direction
@ The GaugeDirection value indicating which direction the gauge fills as the value grows.
initialized
& This event occurs after the binding has finished initializing the control with attribute values.
is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values.
target
@ The target value for the measure.
good
@ A reference value considered good for the measure.
bad
@ A reference value considered bad for the measure.
value
= The actual value of the measure.
The wj-bullet-graph directive may contain one or more WjRange directives.
Live Example
Wijmo 5
April 2015
427/535
WjCalendar Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the Calendar control.
Use the wj-calendar directive to add Calendar controls to your AngularJS applications. Note that
directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For
example:
<wj-calendar
value="theDate">
</wj-calendar>
Live Example
This example creates a Calendar control and binds it to a 'date' variable exposed by the controller. The
range of dates that may be selected is limited by the min and max properties.
The wj-calendar directive supports the following attributes:
control
= A reference to the Calendar control created by this directive.

display-month
= The month being displayed in the calendar.

first-day-of-week
@ The first day of the week.
initialized
is-initialized
item-formatter
= The function used to customize the dates shown in the calendar.
max
@ The latest valid date (string in the format "yyyy-MM-dd").
min
@ The earliest valid date (string in the format "yyyy-MM-dd").
month-view
@ A value indicating whether the control displays a month or the entire year.
show-header
@ A value indicating whether the control displays the header area.
value
Wijmo 5
April 2015
428/535

value-changed
If provided, the min and max attributes are strings in the format "yyyy-MM-dd." Technically, you can use
any full date as defined in the W3C [RFC 3339], which is also the format used with regular HTML5 input
elements.
Wijmo 5
April 2015
429/535
WjCollectionViewNavigator Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for an ICollectionView navigator element.
Use the wj-collection-view-navigator directive to add an element that allows users to navigate through
the items in an ICollectionView. Note that directive and parameter names must be formatted as lowercase with dashes instead of camel-case. For example:
<wj-collection-view-navigator
</wj-collection-view-navigator>
Live Example
This example creates a CollectionView with 100,000 items and 20 items per page. It defines a navigator to
select the current page, another to select the current item, and shows the data in a FlexGrid.
The wj-collection-view-navigator directive has a single attribute:
cv
= A reference to the ICollectionView object to navigate.
Wijmo 5
April 2015
430/535
WjCollectionViewPager Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for an ICollectionView pager element.
Use the wj-collection-view-pager directive to add an element that allows users to navigate through the
pages in a paged ICollectionView. Note that directive and parameter names must be formatted as lowercase with dashes instead of camel-case. For example:
<wj-collection-view-pager
</wj-collection-view-pager>
Live Example
This example creates a CollectionView with 100,000 items and 20 items per page. It defines a navigator to
select the current page, another to select the current item, and shows the data in a FlexGrid.
The wj-collection-view-pager directive has a single attribute:
cv
= A reference to the paged ICollectionView object to navigate.
Wijmo 5
April 2015
431/535
WjColorPicker Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the ColorPicker control.
Use the wj-color-picker directive to add ColorPicker controls to your AngularJS applications. Note that
example:
<wj-color-picker
value="theColor"
</wj-color-picker>
The wj-color-picker directive supports the following attributes:

control
= A reference to the ColorPicker control created by this directive.

initialized
is-initialized
show-alpha-channel
@ A value indicating whether the control displays the alpha channel (transparency) editor.
show-color-string
@ A value indicating whether the control displays a string representation of the color being edited.
palette
= An array with ten color values to use as the palette.
value
value-changed
Wijmo 5
April 2015
432/535
WjComboBox Class
Base Class
WjDropDown
Derived Classes
WjAutoComplete, WjInputTime, WjMenu

Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the ComboBox control.
Use the wj-combo-box directive to add ComboBox controls to your AngularJS applications. Note that
example:
<wj-combo-box
text="theCountry"
is-editable="false"
</wj-combo-box>
The example below creates a ComboBox control and binds it to a 'countries' array exposed by the
controller. The ComboBox searches for the country as the user types. The isEditable property is set to
false, so the user is forced to select one of the items in the list.
Live Example
The wj-combo-box directive supports the following attributes:
control
= A reference to the ComboBox control created by this directive.

display-member-path
@ The name of the property to use as the visual representation of the items.
is-content-html
@ A value indicating whether the drop-down list displays the items as plain text or as HTML.
is-dropped-down
@ A value indicating whether the drop down list is currently visible.

is-editable
@ A value indicating whether the user can enter values not present on the list.
initialized
is-initialized
item-formatter
= A function used to customize the values shown in the drop-down list.
Wijmo 5
April 2015
433/535
items-source
= An array or ICollectionView that contains items to show in the list.

max-drop-down-height
@ The maximum height of the drop-down list.
max-drop-down-width
@ The maximum width of the drop-down list.
placeholder
@ A string shown as a hint when the control is empty.
required
@ A value indicating whether the control displays a drop-down button.
selected-index
= The index of the currently selected item in the drop-down list.
selected-item
= The currently selected item in the drop-down list.
selected-value
= The value of the selected item, obtained using the selected-value-[ath.
selected-value-path
@ The name of the property used to get the selected-value from the selected-item.
text
text-changed
Wijmo 5
April 2015
434/535
WjContextMenu Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for context menus.
Use the wj-context-menu directive to add context menus to elements on the page. The wj-context-menu
directive is based on the wj-menu directive; it displays a popup menu when the user performs a context
menu request on an element (usually a right-click).
The wj-context-menu directive is specified as a parameter added to the element that the context menu
applies to. The parameter value is a selector for the element that contains the menu. For example:

<p wj-context-menu="#idMenu" >
This paragraph has a context menu.</p>

<wj-menu id="idMenu" ng-show="false">
<wj-menu-item cmd="cmdOpen" cmd-param ="1">Open...</wj-menu-item>
<wj-menu-item cmd="cmdSave" cmd-param="2">Save </wj-menu-item>
<wj-menu-item cmd="cmdSave" cmd-param="3">Save As...</wj-menu-item>
<wj-menu-item cmd="cmdNew" cmd-param ="4">New...</wj-menu-item>
<wj-menu-separator></wj-menu-separator>
<wj-menu-item cmd="cmdExit" cmd-param="5">Exit</wj-menu-item>
</wj-menu >
Wijmo 5
April 2015
435/535
WjFlexChart Class
Base Class
WjFlexChartBase
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexChart control.
Use the wj-flex-chart directive to add charts to your AngularJS applications. Note that directive and
parameter names must be formatted using lower-case letters with dashes instead of camel case. For
example:
<wj-flex-chart
items-source="data"
<wj-flex-chart-axis
wj-property="axisY"
major-unit="5000">
binding="sales"
name="Sales">
binding="expenses"
name="Expenses">
binding="downloads"
name="Downloads"
chart-type="LineSymbols">
</wj-flex-chart>
The example below creates a FlexChart control and binds it to a 'data' array exposed by the controller.
The chart has three series objects, each corresponding to a property in the objects contained in the source
array. The last series in the example uses the 'chart-type' attribute to override the default chart type used
for the other series objects.
Live Example
The wj-flex-chart directive supports the following attributes:
binding
@ The name of the property that contains Y values for the chart. You can override this at the series
level.
binding-x
Wijmo 5
April 2015
436/535
@ The name of the property that contains X values for the chart. You can override this at the series
level.
chart-type
@ The default chart type to use in rendering series objects. You can override this at the series
level. See ChartType.
control
= A reference to the FlexChart control that this directive creates.
footer
footer-style
header
header-style
initialized
is-initialized
interpolate-nulls
@ The value indicating whether to interpolate or leave gaps when there are null values in the data.
item-formatter
= The formatter function that customizes the appearance of data points.
items-source
= An array or ICollectionView object that contains the data used to create the chart.
legend-toggle
@ The value indicating whether clicking legend items toggles series visibility.
options
= Chart options that only apply to certain chart types. See options under FlexChart for details.
palette
= An array that contains the default colors used for displaying each series.
plot-margin
= The number of pixels of space to leave between the edges of the control and the plot area, or
CSS-style margins.
rotated
@ The value indicating whether to flip the axes so that X is vertical and Y is horizontal.
selection
= The series object that is selected.
selection-mode
@ The SelectionMode value indicating whether or what is selected when the user clicks a series.
stacking
@ The Stacking value indicating whether or how series objects are stacked or plotted
independently.
symbol-size
@ The size in pixels of the symbols used to render data points in Scatter, LineSymbols, and
SplineSymbols charts. You can override this at the series level.
tooltip-content
rendering
Wijmo 5
April 2015
437/535

rendered
series-visibility-changed
& The seriesVisibilityChanged event handler.
selection-changed
& The selectionChanged event handler.
The wj-flex-chart directive may contain the following child directives: WjFlexChartAxis,
WjFlexChartSeries, WjFlexChartLegend and WjFlexChartDataLabel.
Wijmo 5
April 2015
438/535
WjFlexChartAxis Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexChart Axis object.
The wj-flex-chart-axis directive must be contained in a WjFlexChart directive. It supports the following
attributes:
wj-property
@ Defines the FlexChart property name, axis-x or axis-y, to initialize with this directive.
axis-line
@ The value indicating whether the axis line is visible.

format
@ The format string used for the axis labels (see Globalize).
labels
@ The value indicating whether the axis labels are visible.

label-angle
@ The rotation angle of axis labels in degrees.
major-grid
@ The value indicating whether the axis includes grid lines.
major-tick-marks
@ Defines the appearance of tick marks on the axis (see TickMark).
major-unit
@ The number of units between axis labels.
max
@ The minimum value shown on the axis.
min
@ The maximum value shown on the axis.
minor-grid
@ The value indicating whether the axis includes minor grid lines.
minor-tick-marks
@ Defines the appearance of minor tick marks on the axis (see TickMark).
minor-unit
@ The number of units between minor axis ticks.
origin
@ The axis origin.
position
@ The Position value indicating the position of the axis.
reversed
@ The value indicating whether the axis is reversed (top to bottom or right to left).
title
@ The title text shown next to the axis.
Wijmo 5
April 2015
439/535
WjFlexChartDataLabel Class
Base Class
WjFlexChartDataLabelBase
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexChart DataLabel object.
The wj-flex-chart-data-label directive must be contained in a WjFlexChart directive. It supports the
content

border
@ Gets or sets a value indicating whether data labels have borders.

position
@ The LabelPosition value indicating the position of data labels.
Wijmo 5
April 2015
440/535
WjFlexChartLegend Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexChart Legend object.
The wj-flex-chart-legend directive must be contained in a WjFlexChart directive. It supports the
position
@ The Position value indicating the position of the legend.

The example below shows how you can use the wj-flex-chart-legend directive to change the position of
the chart legend:
<wj-flex-chart
items-source="data"
<wj-flex-chart-axis
wj-property="axisY"
major-unit="5000">
binding="sales"
name="Sales">
<wj-flex-chart-legend
position="Bottom">
</wj-flex-chart-legend>
</wj-flex-chart>
Wijmo 5
April 2015
441/535
WjFlexChartLineMarker Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexChart LineMarker object.
The wj-flex-line-marker directive must be contained in a WjFlexChart directive. It supports the following
attributes:
isVisible
@ The value indicating whether the LineMarker is visible.

seriesIndex
@ The index of the series in the chart in which the LineMarker appears.
horizontalPosition
@ The horizontal position of the LineMarker relative to the plot area.

content
@ The content function that allows to customize the text content of the LineMarker..
verticalPosition
@ The vertical position of the LineMarker relative to the plot area.
alignment
@ The LineMarkerAlignment value indicating the alignment of the LineMarker content.
lines
@ The LineMarkerLines value indicating the appearance of LineMarker's lines.
interaction
@ The LineMarkerInteraction value indicating the interaction mode of LineMarker.
Wijmo 5
April 2015
442/535
WjFlexChartRangeSelector Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexChart RangeSelector object.
The wj-flex-range-selector directive must be contained in a WjFlexChart directive. It supports the
isVisible
@ The value indicating whether the RangeSelector is visible.

min
@ The minimal value of the range.

max
@ The maximal value of the range.

orientation
@ The orientation of the RangeSelector.
Wijmo 5
April 2015
443/535
WjFlexChartSeries Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexChart Series object.
The wj-flex-chart-series directive must be contained in a WjFlexChart directive. It supports the following
attributes:
binding
@ The name of the property that contains Y values for the series. This value overrides any binding
set for the chart.
binding-x
@ The name of the property that contains X values for the series. This value overrides any binding
set for the chart.
chart-type
@ The chart type to use in rendering objects for this series objects. This value overrides the default
chart type set on the chart. See ChartType.
css-class
@ The CSS class to use for the series.
items-source
= An array or ICollectionView object that contains data for this series.
name
@ The name of the series to show in the legend.
style
= The series style. Use ng-attr-style to specify the series style object as an object. See the section
on ngAttr attribute bindings in AngularJS Creating Custom Directives and the FlexChart 101
Styling Series sample for more information.
symbol-marker
@ The shape of marker to use for the series. This value overrides the default marker set on the
chart. See Marker.
symbol-size
@ The size in pixels of the symbols used to render data points in this series for Scatter,
LineSymbols, and SplineSymbols charts. This value overrides any set at the chart level.
symbol-style
= The style of the symbols used to render data points in this series for Scatter, LineSymbols, and
SplineSymbols charts. This value overrides any set at the chart level.
visibility
= The SeriesVisibility value indicating whether and where to display the series.
In most cases, the wj-flex-chart-series specifies only the "name" and "binding" properties. The remaining
values are inherited from the parent wj-flex-chart directive.
Wijmo 5
April 2015
444/535
WjFlexGrid Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexGrid control.
Use the wj-flex-grid directive to add grids to your AngularJS applications. Note that directive and
parameter names must be formatted as lower-case with dashes instead of camel-case. For example:
header="Country"
binding="country">
header="Sales"
binding="sales">
header="Expenses"
binding="expenses">
header="Downloads"
</wj-flex-grid>
The example below creates a FlexGrid control and binds it to a 'data' array exposed by the controller. The
grid has three columns, each corresponding to a property of the objects contained in the source array.
Live Example
The wj-flex-grid directive supports the following attributes:
allowAddNew
@ A value indicating whether to show a new row template so users can add items to the source
collection.
allow-delete
@ A value indicating whether the grid deletes selected rows when the user presses the Delete key.
allow-dragging
@ An AllowDragging value indicating whether and how the user can drag rows and columns with
the mouse.
allow-merging
@ An AllowMerging value indicating which parts of the grid provide cell merging.
allow-resizing
Wijmo 5
April 2015
445/535
@ An AllowResizing value indicating whether users are allowed to resize rows and columns with
the mouse.
allow-sorting
@ A boolean value indicating whether users can sort columns by clicking the column headers.
auto-generate-columns
@ A boolean value indicating whether the grid generates columns automatically based on the
items-source.
child-items-path
@ The name of the property used to generate child rows in hierarchical grids.
control
= A reference to the FlexGrid control created by this directive.
defer-resizing
= A boolean value indicating whether row and column resizing should be deferred until the user
releases the mouse button.
frozen-columns
@ The number of frozen (non-scrollable) columns in the grid.
frozen-rows
@ The number of frozen (non-scrollable) rows in the grid.
group-header-format
@ The format string used to create the group header content.
headers-visibility
= A HeadersVisibility value indicating whether the row and column headers are visible.
initialized
is-initialized
item-formatter
= A function that customizes cells on this grid.
items-source
= An array or ICollectionView object that contains the items shown on the grid.
is-read-only
@ A boolean value indicating whether the user is prevented from editing grid cells by typing into
them.
merge-manager
= A MergeManager object that specifies the merged extent of the specified cell.
selection-mode
@ A SelectionMode value indicating whether and how the user can select cells.
show-groups
@ A boolean value indicating whether to insert group rows to delimit data groups.
show-sort
@ A boolean value indicating whether to display sort indicators in the column headers.
sort-row-index
@ A number specifying the index of row in the column header panel that shows and changes the
current sort.
tree-indent
@ The indentation, in pixels, used to offset row groups of different levels.
beginning-edit
& Handler for the beginningEdit event.
cell-edit-ended
Wijmo 5
April 2015
446/535
& Handler for the cellEditEnded event.

cell-edit-ending
& Handler for the cellEditEnding event.
prepare-cell-for-edit
& Handler for the prepareCellForEdit event.
resizing-column
& Handler for the resizingColumn event.
resized-column
& Handler for the resizedColumn event.
dragged-column
& Handler for the draggedColumn event.
dragging-column
& Handler for the draggingColumn event.
sorted-column
& Handler for the sortedColumn event.
sorting-column
& Handler for the sortingColumn event.
deleting-row
& Handler for the deletingRow event.
dragging-row
& Handler for the draggingRow event.
dragged-row
& Handler for the draggedRow event.
resizing-row
& Handler for the resizingRow event.
resized-row
& Handler for the resizedRow event.
row-added
& Handler for the rowAdded event.
row-edit-ended
& Handler for the rowEditEnded event.
row-edit-ending
& Handler for the rowEditEnding event.
loaded-rows
& Handler for the loadedRows event.
loading-rows
& Handler for the loadingRows event.
group-collapsed-changed
& Handler for the groupCollapsedChanged event.
group-collapsed-changing
& Handler for the groupCollapsedChanging event.
items-source-changed
& Handler for the itemsSourceChanged event.
selection-changing
& Handler for the selectionChanging event.
selection-changed
& Handler for the selectionChanged event.
scroll-position-changed
Wijmo 5
April 2015
447/535
& Handler for the scrollPositionChanged event.

The wj-flex-grid directive may contain WjFlexGridColumn and WjFlexGridCellTemplate child
directives.
Wijmo 5
April 2015
448/535
WjFlexGridCellTemplate Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexGrid cell templates.
The wj-flex-grid-cell-template directive defines a template for a certain cell type in FlexGrid, and must
contain a cell-type attribute that specifies the CellTemplateType. Depending on the template's cell type,
the wj-flex-grid-cell-template directive must be a child of either WjFlexGrid or WjFlexGridColumn
directives.
Column-specific cell templates must be contained in wj-flex-grid-column directives, and cells that are
not column-specific (like row header or top left cells) must be contained in the wj-flex-grid directive.
In addition to an HTML fragment, wj-flex-grid-cell-template directives may contain an ng-style
attribute that provides conditional formatting for cells.
Both the ng-style attribute and the HTML fragment can use the $col, $row and $item template variables
that refer to the Column, Row and Row.dataItem objects pertaining to the cell.
For cell types like Group and CellEdit, an additional $value variable containing an unformatted cell value
is provided. For example, here is a FlexGrid control with templates for row headers and for the Country
column's regular and column header cells:
{{$row.index}}
...
{{$col.header}}
{{$item.country}}
<wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
</wj-flex-grid>
For more detailed information on specific cell type templates refer to the documentation for the
CellTemplateType enumeration.
Wijmo 5
April 2015
449/535
Note that the wj-flex-grid-column directive may also contain arbitrary content that is treated as a
template for a regular data cell (cell-type="Cell"). But if a wj-flex-grid-cell-template directive exists and
is set to cell-type="Cell" under the wj-flex-grid-column directive, it takes priority and overrides the
arbitrary content.
The wj-flex-grid-cell-template directive supports the following attributes:
cell-type
@ The CellTemplateType value defining the type of cell the template applies to.
cell-overflow
@ Defines the style.overflow property value for cells.

The cell-type attribute takes any of the following enumerated values:
Cell
Defines a regular (data) cell template. Must be a child of the WjFlexGridColumn directive. For example,
this cell template shows flags in the Country column's cells:
{{$item.country}}
For a hierarchical FlexGrid (that is, one with the childItemsPath property specified), if no Group template
is provided, non-header cells in group rows in this Column also use this template.
CellEdit
Defines a template for a cell in edit mode. Must be a child of the WjFlexGridColumn directive. This cell
type has an additional $value property available for binding. It contains the original cell value before
editing, and the updated value after editing. For example, here is a template that uses the Wijmo
InputNumber control as an editor for the "Sales" column:
<wj-flex-grid-column header="Sales" binding="sales">
<wj-flex-grid-cell-template cell-type="CellEdit">
<wj-input-number value="$value" step="1"></wj-input-number>
ColumnHeader
Defines a template for a column header cell. Must be a child of the WjFlexGridColumn directive. For
example, this template adds an image to the header of the "Country" column:
Wijmo 5
April 2015
450/535
{{$col.header}}
RowHeader
Defines a template for a row header cell. Must be a child of the WjFlexGrid directive. For example, this
template shows row indices in the row headers:
{{$row.index}}
</wj-flex-grid>
Note that this template is applied to a row header cell, even if it is in a row that is in edit mode. In order to
provide an edit-mode version of a row header cell with alternate content, define the RowHeaderEdit
template.
RowHeaderEdit
Defines a template for a row header cell in edit mode. Must be a child of the WjFlexGrid directive. For
example, this template shows dots in the header of rows being edited:
...
</wj-flex-grid>
To add the standard edit-mode indicator to cells where the RowHeader template applies, use the
following RowHeaderEdit template:
{{✎}}
</wj-flex-grid>
TopLeft
Defines a template for the top left cell. Must be a child of the WjFlexGrid directive. For example, this
template shows a down/right glyph in the top-left cell of the grid:
<wj-flex-grid-cell-template cell-type="TopLeft">
<span class="wj-glyph-down-right"></span>
</wj-flex-grid>
Wijmo 5
April 2015
451/535
GroupHeader
Defines a template for a group header cell in a GroupRow, Must be a child of the WjFlexGridColumn
directive.
The $row variable contains an instance of the GroupRow class. If the grouping comes from the a
CollectionView, the $item variable references the CollectionViewGroup object.
For example, this template uses a checkbox element as an expand/collapse toggle:
<wj-flex-grid-cell-template cell-type="GroupHeader">
<input type="checkbox" ng-model="$row.isCollapsed"/>
{{$item.name}} ({{$item.items.length}} items)
Group
Defines a template for a regular cell (not a group header) in a GroupRow. Must be a child of the
WjFlexGridColumn directive. This cell type has an additional $value varible available for binding. In cases
where columns have the aggregate property specified, it contains the unformatted aggregate value.
For example, this template shows an aggregate's value and kind for group row cells in the "Sales" column:
<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
<wj-flex-grid-cell-template cell-type="Group">
Average: {{$value | number:2}}
Wijmo 5
April 2015
452/535
WjFlexGridColumn Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexGrid Column object.
The wj-flex-grid-column directive must be contained in a WjFlexGrid directive. It supports the following
attributes:
aggregate
@ The Aggregate object to display in the group header rows for this column.
align
@ The string value that sets the horizontal alignment of items in the column to left, right, or
center.
allow-dragging
@ The value indicating whether the user can move the column to a new position with the mouse.
allow-sorting
@ The value indicating whether the user can sort the column by clicking its header.
allow-resizing
@ The value indicating whether the user can resize the column with the mouse.
allow-merging
@ The value indicating whether the user can merge cells in the column.
binding
@ The name of the property to which the column is bound.
css-class
@ The name of a CSS class to use when rendering the column.
data-map
= The DataMap object to use to convert raw values into display values for the column.
data-type
@ The enumerated DataType value that indicates the type of value stored in the column.
format
@ The format string to use to convert raw values into display values for the column (see
Globalize).
header
@ The string to display in the column header.
input-type
@ The type attribute to specify the input element used to edit values in the column. The default is
"tel" for numeric columns, and "text" for all other non-Boolean columns.
is-content-html
@ The value indicating whether cells in the column contain HTML content rather than plain text.
is-read-only
@ The value indicating whether the user is prevented from editing values in the column.
is-selected
Wijmo 5
April 2015
453/535
@ The value indicating whether the column is selected.

mask
@ The mask string used to edit values in the column.

max-width
@ The maximum width for the column.

min-width
@ The minimum width for the column.
name
@ The column name. You can use it to retrieve the column.
required
@ The value indicating whether the column must contain non-null values.
show-drop-down
@ The value indicating whether to show drop-down buttons for editing based on the column's
DataMap.
visible
@ The value indicating whether the column is visible.
width
@ The width of the column in pixels or as a star value.
word-wrap
@ The value indicating whether cells in the column wrap their content.
Any html content within the wj-flex-grid-column directive is treated as a template for the cells in that
column. The template is applied only to regular cells. If you wish to apply templates to specific cell types
such as column or group headers, then please see the WjFlexGridCellTemplate directive.
The following example creates two columns with a template and a conditional style:
Live Example
The wj-flex-grid-column directive may contain WjFlexGridCellTemplate child directives.
Wijmo 5
April 2015
454/535
WjFlexGridFilter Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexGrid FlexGridFilter object.
The wj-flex-grid-filter directive must be contained in a WjFlexGrid directive. For example:
<wj-flex-grid-filter filter-columns="['country', 'expenses']"></wj-flex-grid-filter>
header="Country"
binding="country">
header="Sales"
binding="sales">
header="Expenses"
binding="expenses">
header="Downloads"
</wj-flex-grid>
The wj-flex-grid-filter directive supports the following attributes:

filter-columns
= An array containing the names or bindings of the columns to filter.

show-filter-icons
@ The value indicating whether filter editing buttons appear in the grid's column headers.
filter-applied
& Handler for the filterApplied event.
Wijmo 5
April 2015
455/535
WjFlexPie Class
Base Class
WjFlexChartBase
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexPie control.
items-source
= An array or ICollectionView object that contains data for the chart.

binding
@ The name of the property that contains item values.
binding-name
@ The name of the property that contains item names.
footer
footer-style
header
header-style
initialized
is-initialized
inner-radius
@ The size of the hole inside the pie, measured as a fraction of the pie radius.
is-animated
@ A value indicating whether to use animation to move selected items to the
selectedItemPosition.
item-formatter
= The formatter function that customizes the appearance of data points.
offset
@ The extent to which pie slices are pulled out from the center, as a fraction of the pie radius.
palette
= An array that contains the default colors used for displaying pie slices.
plot-margin
= The number of pixels of space to leave between the edges of the control and the plot area, or
CSS-style margins.
reversed
@ A value indicating whether to draw pie slices in a counter-clockwise direction.
start-angle
@ The starting angle for pie slices, measured clockwise from the 9 o'clock position.
selected-item-offset
Wijmo 5
April 2015
456/535
@ The extent to which the selected pie slice is pulled out from the center, as a fraction of the pie
radius.
selected-item-position
@ The Position value indicating where to display the selected slice.
selection-mode
@ The SelectionMode value indicating whether or what is selected when the user clicks a series.
tooltip-content
rendering
rendered
The wj-flex-pie directive may contain the following child directives: WjFlexChartLegend and
WjFlexPieDataLabel.
Wijmo 5
April 2015
457/535
WjFlexPieDataLabel Class
Base Class
WjFlexChartDataLabelBase
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexPie PieDataLabel object.
The wj-flex-pie-data-label directive must be contained in a WjFlexPie directive. It supports the following
attributes:
content

border
@ Gets or sets a value indicating whether data labels have borders.

position
@ The PieLabelPosition value indicating the position of data labels.
Wijmo 5
April 2015
458/535
WjGroupPanel Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the FlexGrid GroupPanel control.
The wj-group-panel directive connects to the FlexGrid control via the grid property. For example:
<wj-group-panel grid="flex" placeholder="Drag columns here to create groups."></wj-group-panel>
<wj-flex-grid control="flex" items-source="data">
header="Country"
binding="country">
header="Sales"
binding="sales">
header="Expenses"
binding="expenses">
header="Downloads"
</wj-flex-grid>
The wj-group-panel directive supports the following attributes:

grid
@The FlexGrid that is connected to this GroupPanel.

hide-grouped-columns
@A value indicating whether the panel hides grouped columns in the owner grid.
max-groups
@The maximum number of groups allowed.

placeholder
@A string to display in the control when it contains no groups.
Wijmo 5
April 2015
459/535
WjInputColor Class
Base Class
WjDropDown
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the InputColor control.
Use the wj-input-color directive to add InputColor controls to your AngularJS applications. Note that
example:
<p>Here is an InputColor control:</p>
<wj-input-color
value="theColor"
</wj-input-color>
The wj-input-color directive supports the following attributes:

control
= A reference to the InputColor control created by this directive.

is-dropped-down

initialized
is-initialized
show-alpha-channel
@ A value indicatinbg whether the drop-down displays the alpha channel (transparency) editor.
place-holder
required
text
value
text-changed
value-changed
Wijmo 5
April 2015
460/535
Wijmo 5
April 2015
461/535
WjInputDate Class
Base Class
WjDropDown
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the InputDate control.
Use the wj-input-date directive to add InputDate controls to your AngularJS applications. Note that
example:
<wj-input-date
value="theDate"
format="M/d/yyyy">
</wj-input-date>
an an InputTime control. Notice how both controls are bound to the same controller variable, and each
edits the appropriate information (either date or time). The example also shows a Calendar control that
can be used to select the date with a single click.
Live Example
The wj-input-date directive supports the following attributes:
control

format
@ The format used to display the date being edited (see Globalize).
mask
@ The mask used to validate the input as the user types (see InputMask).
is-dropped-down

initialized
is-initialized
max
@ The latest valid date (a string in the format "yyyy-MM-dd").

min
@ The earliest valid date (a string in the format "yyyy-MM-dd").

place-holder
Wijmo 5
April 2015
462/535
required

text
value
text-changed
value-changed
If provided, the min and max attributes are strings in the format "yyyy-MM-dd". Technically, you can use
any full date as defined in the W3C [RFC 3339], which is also the format used with regular HTML5 input
elements.
Wijmo 5
April 2015
463/535
WjInputMask Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the InputMask control.
Use the wj-input-mask directive to add InputMask controls to your AngularJS applications. Note that
example:
<wj-input-mask
mask="99/99/99"
mask-placeholder="*">
</wj-input-mask>
The wj-input-mask directive supports the following attributes:

control
= A reference to the InputNumber control created by this directive.

initialized
is-initialized
mask
@ The string mask used to format the value as the user types.
prompt-char
@ A character used to show input locations within the mask.
place-holder
value
value-changed
Wijmo 5
April 2015
464/535
WjInputNumber Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the InputNumber control.
Use the wj-input-number directive to add InputNumber controls to your AngularJS applications. Note
that directive and parameter names must be formatted as lower-case with dashes instead of camel-case.
For example:
<wj-input-number
value="theNumber"
min="0"
max="10"
format="n0"
placeholder="number between zero and ten">
</wj-input-number>
The example below creates several InputNumber controls and shows the effect of using different
formats, ranges, and step values.
Live Example
The wj-input-number directive supports the following attributes:
control
= A reference to the InputNumber control created by this directive.

format
@ The format used to display the number (see Globalize).

input-type
@ The "type" attribute of the HTML input element hosted by the control.
initialized
is-initialized
max
@ The largest valid number.
min
@ The smallest valid number.
place-holder
required
Wijmo 5
April 2015
465/535
show-spinner
@ A value indicating whether to display spinner buttons to change the value by step units.
step
@ The amount to add or subtract to the value when the user clicks the spinner buttons.
text

value

text-changed

value-changed
Wijmo 5
April 2015
466/535
WjInputTime Class
Base Class
WjComboBox
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the InputTime control.
Use the wj-input-time directive to add InputTime controls to your AngularJS applications. Note that
example:
<wj-input-time
value="theDate"
format="h:mm tt"
min="09:00" max="17:00"
step="15">
</wj-input-time>
Live Example
This example edits a Date value (that includes date and time information) using an InputDate and an an
InputTime control. Notice how both controls are bound to the same controller variable, and each edits the
appropriate information (either date or time). The example also shows a Calendar control that can be
used to select the date with a single click.
The wj-input-time directive extends WjComboBox with the following attributes:
control

format
@ The format used to display the selected time.

mask
@ A mask used to validate the input as the user types (see InputMask).
max
@ The earliest valid time (a string in the format "hh:mm").

min
@ The latest valid time (a string in the format "hh:mm").

step
@ The number of minutes between entries in the drop-down list.

value
= The time being edited (as a Date object).

value-changed
& The@see: valueChanged event handler.
Wijmo 5
April 2015
467/535
If provided, the min and max attributes are strings in the format "hh:mm". Technically, you can use any
full date as defined in the W3C [RFC 3339], which is also the format used with regular HTML5 input
elements.
Wijmo 5
April 2015
468/535
WjLinearGauge Class
Base Class
WjGauge
Derived Classes
WjBulletGraph
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the LinearGauge control.
Use the wj-linear-gauge directive to add linear gauges to your AngularJS applications. Note that
directive and parameter names must be formatted in lower-case with dashes instead of camel-case. For
example:
<wj-linear-gauge
show-text="Value"
<wj-range
thickness="0.2">
<wj-range
min="0"
max="33"
color="green">
</wj-range>
<wj-range
min="33"
max="66"
color="yellow">
</wj-range>
<wj-range
min="66"
max="100"
color="red">
</wj-range>
</wj-range>
</wj-linear-gauge>
The wj-linear-gauge directive supports the following attributes:

control
= A reference to the LinearGauge control created by this directive.

direction
@ The GaugeDirection value in which the gauge fills as the value grows.
format
@ The format string used for displaying the gauge values as text.
has-shadow

initialized
Wijmo 5
April 2015
469/535
is-initialized
is-animated
is-read-only
@ A value indicating whether users are prevented from editing the value.
min
max
show-text
@ The ShowText value indicating which values display as text within the gauge.
step
@ The amount to add or subtract to the value property when the user presses the arrow keys.
thickness
value
The wj-linear-gauge directive may contain one or more WjRange directives.
Live Example
Wijmo 5
April 2015
470/535
WjListBox Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the ListBox control.
Use the wj-list-box directive to add ListBox controls to your AngularJS applications. Note that directive
b>Here is a ListBox control:</p>
<wj-list-box
selected-item="theCountry"
</wj-list-box>
The example below creates a ListBox control and binds it to a 'countries' array exposed by the controller.
The value selected is bound to the 'theCountry' controller property using the selected-item attribute.
Live Example
The wj-list-box directive supports the following attributes:
control
= A reference to the ListBox control created by this directive.

display-member-path
@ The property to use as the visual representation of the items.

is-content-html
@ A value indicating whether items contain plain text or HTML.

initialized
is-initialized
item-formatter
= A function used to customize the values to show in the list.
items-source
= An array or ICollectionView that contains the list items.
max-height
@ The maximum height of the list.
selected-index
= The index of the currently selected item.
selected-item
= The item that is currently selected.
Wijmo 5
April 2015
471/535
selected-value
= The value of the selected-item obtained using the selected-value-path.

selected-value-path
@ The property used to get the selected-value from the selected-item.
items-changed
& The itemsChanged event handler.
Wijmo 5
April 2015
472/535
WjMenu Class
Base Class
WjComboBox
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the Menu control.
Use the wj-menu directive to add drop-down menus to your AngularJS applications. Note that directive
<wj-menu header="Tax" value="tax">
<wj-menu-item value="0">Exempt</wj-menu-item>
</wj-menu>
Live Example
This example creates three Menu controls. The first is used as a value picker, the second uses a list of
commands with parameters, and the third is a group of three menus handled by an itemClicked function
in the controller.
The wj-menu directive extends WjComboBox with the following attributes:
command-path
@ The command to be executed when the item is clicked.

command-parameter-path
@ The name of the property that contains command parameters.

header
@ The text shown on the control.

is-button
@ Whether the menu should react to clicks on its header area.

value
@ The value of the selected wj-menu-item value property.

item-clicked
& The itemClicked event handler.

The wj-menu directive may contain the following child directives: WjMenuItem and WjMenuSeparator.
Wijmo 5
April 2015
473/535
WjMenuItem Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for menu items.
The wj-menu-item directive must be contained in a WjMenu directive. It supports the following
attributes:
cmd
= The function to execute in the controller when the item is clicked.

cmd-param
= The parameter passed to the cmd function when the item is clicked.
value
= The value to select when the item is clicked (use either this or cmd).
The content displayed by the item is defined by the HTML contained in wj-menu-item directive.
Wijmo 5
April 2015
474/535
WjMenuSeparator Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for menu separators.
The wj-menu-item-separator directive must be contained in a WjMenu directive. It adds a nonselectable separator to the menu, and has no attributes.
Wijmo 5
April 2015
475/535
WjRadialGauge Class
Base Class
WjGauge
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the RadialGauge control.
Use the wj-radial-gauge directive to add radial gauges to your AngularJS applications. Note that
example:
Here is a <b>RadialGauge</b> control:</p>
<wj-radial-gauge
value="count"
min="0" max="10"
</wj-radial-gauge>
The wj-radial-gauge directive supports the following attributes:

control
= A reference to the RadialGauge control created by this directive.

auto-scale
@ A value indicating whether the gauge scales the display to fill the host element.
format
@ The format string used for displaying gauge values as text.
has-shadow
initialized
is-initialized
is-animated
is-read-only
@ A value indicating whether users are prevented from editing the value.
min
max
show-text
@ A ShowText value indicating which values display as text within the gauge.
step
@ The amount to add or subtract to the value property when the user presses the arrow keys.
Wijmo 5
April 2015
476/535
start-angle
@ The starting angle for the gauge, in degreees, measured clockwise from the 9 o'clock position.
sweep-angle
@ The sweeping angle for the gauge in degrees (may be positive or negative).
thickness
value
The wj-radial-gauge directive may contain one or more WjRange directives.
Live Example
Wijmo 5
April 2015
477/535
WjRange Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the Range object.
The wj-range directive must be contained in a WjLinearGauge, WjRadialGauge or WjBulletGraph
directive. It adds the Range object to the 'ranges' array property of the parent directive. You may also
initialize other Range type properties of the parent directive by specifying the property name with the wjproperty attribute.
For example:
<wj-radial-gauge
min="0"
max="200"
step="20"
value="theValue"
<wj-range
min="0"
max="100"
color="red">
</wj-range>
<wj-range
min="100"
max="200"
color="green">
</wj-range>
<wj-range
color="blue">
</wj-range>
</wj-radial-gauge>
The wj-range directive supports the following attributes:

min
@ The minimum value in the range.

max
@ The maximum value in the range.

color
@ The color used to display the range.

thickness
@ The thickness of the range, on a scale of zero to one.

name
@ The name of the range.

wj-property
Wijmo 5
April 2015
478/535
@ The name of the property to initialize with this directive.
Wijmo 5
April 2015
479/535
WjTooltip Class
Base Class
WjDirective
Module
wijmo.angular
File
wijmo.angular.js
AngularJS directive for the Tooltip class.
Use the wj-tooltip directive to add tooltips to elements on the page. The wj-tooltip directive supports
HTML content, smart positioning, and touch.
The wj-tooltip directive is specified as a parameter added to the element that the tooltip applies to. The
parameter value is the tooltip text or the id of an element that contains the text. For example:
<p wj-tooltip="#fineprint" >
...
<div id="fineprint" style="display:none">
<p>
Data for the current quarter is estimated
by pro-rating etc.</p>
</div>
Wijmo 5
April 2015
480/535
CellTemplateType Enum
Module
wijmo.angular
File
wijmo.angular.js
Defines the type of cell to which to apply the template. This value is specified in the cell-type attribute of
the WjFlexGridCellTemplate directive.
Values
Name
Description
Cell
Defines a regular (data) cell.
CellEdit
Defines a cell in edit mode.
ColumnHeader Defines a column header cell.

Group
Defines a regular cell in a group row.
GroupHeader
Defines a group header cell in a group row.
RowHeader
Defines a row header cell.
RowHeaderEdit Defines a row header cell in edit mode.

TopLeft
Wijmo 5
Defines a top left cell.
April 2015
481/535
Module wijmo.knockout
File
wijmo.knockout.js
Contains KnockoutJS bindings for the Wijmo controls.
The bindings allow you to add Wijmo controls to KnockoutJS applications using simple markup in HTML
pages.
To add a Wijmo control to a certain place in a page's markup, add the <div> element and define a
binding for the control in the data-bind attribute. The binding name corresponds to the control name
with a wj prefix. For example, the wjInputNumber binding represents the Wijmo InputNumber control.
The binding value is an object literal containing properties corresponding to the control's read-write
property and event names, with their values defining the corresponding control property values and event
handlers.
The following markup creates a Wijmo InputNumber control with the value property bound to the view
model's theValue property, the step property set to 1 and the inputType property set to 'text':
<div data-bind="wjInputNumber: { value: theValue, step: 1, inputType: 'text' }"></div>
Wijmo 5
April 2015
482/535
Custom elements
As an alternative to the standard Knockout binding syntax, the Wijmo for Knockout provides a possibility
to declare controls in the page markup as custom elements, where the tag name corresponds to the
control binding name and the attribute names correspond to the control property names. The element
and parameter names must be formatted as lower-case with dashes instead of camel-case. The control in
the example above can be defined as follows using the custom element syntax:
<wj-input-number value="theValue" step="1" input-type="'text'"></wj-input-number>
Note that attribute values should be defined using exactly the same JavaScript expressions syntax as you
use in data-bind definitions. The Wijmo for Knockout preprocessor converts such elements to the
conventional data-bind form, see the Custom elements preprocessor topic for more details.
Wijmo 5
April 2015
483/535
Binding to control properties

Wijmo binding for KnockoutJS supports binding to any read-write properties on the control. You can
assign any valid KnockoutJS expressions (e.g. constants, view model observable properties, or complex
expressions) to the property.
Most of the properties provide one-way binding, which means that changes in the bound observable view
model property cause changes in the control property that the observable is bound to, but not vice versa.
But some properties support two-way binding, which means that changes made in the control property
are propagated back to an observable bound to the control property as well. Two-way bindings are used
for properties that can be changed by the control itself, by user interaction with the control, or by other
occurences. For example, the InputNumber control provides two-way binding for the value and text
properties, which are changed by the control while a user is typing a new value. The rest of the
InputNumber properties operate in the one-way binding mode.
Wijmo 5
April 2015
484/535
Binding to control events

To attach a handler to a control event, specify the event name as a property of the object literal defining
the control binding, and the function to call on this event as a value of this property. Wijmo bindings
follow the same rules for defining an event handler as used for the intrinsic KnockoutJS bindings like click
and event. The event handler receives the following set of parameters, in the specified order:
data: The current model value, the same as for native KnockoutJS bindings like click and event.
sender: The sender of the event.
args: The event arguments.
The following example creates an InputNumber control and adds an event handler for the
valueChanged event showing a dialog with a new control value.

<div data-bind="wjInputNumber: { value: theValue, step: 1, valueChanged: valueChangedEH }"></div>
//View Model
this.valueChangedEH = function (data, sender, args) {
alert('The new value is: ' + sender.value);
}
The same control defined using the custom element syntax:

<wj-input-number value="theValue" step="1" value-changed="valueChangedEH"></wj-input-number>
Wijmo 5
April 2015
485/535
Binding to undefined observables

View model observable properties assigned to an undefined value get special treatment by Wijmo
bindings during the initialization phase. For example, if you create an observable as
ko.observable(undefined) or ko.observable() and bind it to a control property, Wijmo does not assign a
value to the control. Instead, for properties supporting two-way bindings, this is the way to initialize the
observable with the control's default value, because after initialization the control binding updates bound
observables with the control values of such properties. Note that an observable with a null value, e.g.
ko.observable(null), gets the usual treatment and assigns null to the control property that it is bound to.
After the primary initialization has finished, observables with undefined values go back to getting the
usual treatment from Wijmo, and assign the control property with undefined.
In the example below, the value property of the InputNumber control has its default value of 0 after
initialization, and this same value is assigned to the view model theValue property:

<div data-bind="wjInputNumber: { value: theValue }"></div>
//View Model
this.theValue = ko.observable();
Wijmo 5
April 2015
486/535
Defining complex and array properties

Some Wijmo controls have properties that contain an array or a complex object. For example, the
FlexChart control exposes axisX and axisY properties that represent an Axis object; and the series
property is an array of Series objects. Wijmo provides special bindings for such types that we add to child
elements of the control element. If the control exposes multiple properties of the same complex type,
then the wjProperty property of the complex type binding specifies which control property it defines.
The following example shows the markup used to create a FlexChart with axisX and axisY properties and
two series objects defined:
<div data-bind="wjFlexChart: { itemsSource: data, bindingX: 'country' }">
<div data-bind="wjFlexChartAxis: { wjProperty: 'axisX', title: chartProps.titleX }"></div>
<div data-bind="wjFlexChartAxis: { wjProperty: 'axisY', title: chartProps.titleY }"></div>
<div data-bind="wjFlexChartSeries: { name: 'Sales', binding: 'sales' }"></div>
<div data-bind="wjFlexChartSeries: { name: 'Downloads', binding: 'downloads' }"></div>
</div>
The same control defined using the custom element syntax:

<wj-flex-chart items-source="data" binding-x="'country'">
<wj-flex-chart-axis wj-property="'axisX'" title="chartProps.titleX"></wj-flex-chart-axis>
<wj-flex-chart-axis wj-property="'axisY'" title="chartProps.titleY"></wj-flex-chart-axis>
<wj-flex-chart-series name="'Sales'" binding"'sales'"></wj-flex-chart-series>
<wj-flex-chart-series name="'Downloads'" binding"'downloads'"></wj-flex-chart-series>
</wj-flex-chart>
Wijmo 5
April 2015
487/535
The control property

Each Wijmo control binding exposes a control property that references the Wijmo control instance
created by the binding. This allows you to reference the control in view model code or in other bindings.
For example, the following markup creates a FlexGrid control whose reference is stored in the flex
observable property of a view model and is used in the button click event handler to move to the next
grid record:

<div data-bind="'wjFlexGrid': { itemsSource: data, control: flex }"></div>
<button data-bind="click: moveToNext">Next</button>
//View Model
this.flex = ko.observable();
this.moveToNext = function () {
this.flex().collectionView.moveCurrentToNext();
}
Wijmo 5
April 2015
488/535
The initialized event

Each Wijmo control binding exposes an initialized event and a Boolean isInitialized property. The event
occurs right after the binding creates the control and fully initializes it with the values specified in the
binding attributes. For bindings containing child bindings, for example, a wjFlexGrid with child
wjFlexGridColumn bindings, this also means that child bindings have fully initialized and have been
applied to the control represented by the parent binding. The isInitialized property is set to true right
before triggering the initialized event. You can bind a view model observable property to the bindings
isInitialized property to access its value.
The following example adjusts FlexGridColumn formatting after the control fully initializes with its
bindings, which guarantees that these formats are not overwritten with formats defined in the bindings:

<div data-bind="'wjFlexGrid': { itemsSource: dataArray, initialized: flexInitialized }">
<div data-bind="wjFlexGridColumn: { binding: 'sales', format: 'n2' }"></div>
<div data-bind="wjFlexGridColumn: { binding: 'downloads', format: 'n2' }"></div>
</div>
//View Model
this.flexInitialized = function (data, sender, args) {
var columns = sender.columns;
for (var i = 0; i < columns.length; i++) {
if (columns[i].dataType = wijmo.DataType.Number) {
columns[i].format = 'n0;
}
}
}
Wijmo 5
April 2015
489/535
Custom elements preprocessor

The Wijmo Knockout preprocessor uses the standard Knockout
ko.bindingProvider.instance.preprocessNode API. This may cause problems in cases where other custom
preprocessors are used on the same page, because Knockout offers a single instance property for
attaching a preprocessor function, and the next registering preprocessor removes the registration of the
previous one.
To honor another attached preprocessor, the Wijmo Knockout preprocessor stores the currently
registered preprocessor during initialization and delegates the work to it in cases where another
processing node is not recognized as a Wijmo control element, thus organizing a preprocessor stack. But
if you register another preprocessor after the Wijmo for Knockout preprocessor (that is, after the <script>
reference to the wijmo.knockout.js module is executed) then you need to ensure that the other
preprocessor behaves in a similar way; otherwise, the Wijmo Knockout preprocessor is disabled.
If you prefer to disable the Wijmo Knockout preprocessor, set the wijmo.disableKnockoutTags property
to false before the wijmo.knockout.js module reference and after the references to the core Wijmo
modules, for example:
<script src="scripts/wijmo.js" type="text/javascript"></script>
<script src="scripts/wijmo.input.js" type="text/javascript"></script>
<script type="text/javascript">
wijmo.disableKnockoutTags = true;
</script>
<script src="scripts/wijmo.knockout.js" type="text/javascript"></script>
Note that in this case you can use only the conventional data-bind syntax for adding Wijmo controls to
the page markup; the Wijmo custom elements are not recognized.
Wijmo 5
April 2015
490/535
Classes
Name
Description
wjAutoComplete
KnockoutJS binding for the AutoComplete control.

Use the wjAutoComplete binding to add AutoComplete controls to your
KnockoutJS applications. For example:
<div data-bind="wjAutoComplete: {
itemsSource: countries,
text: theCountry,
isEditable: false,
placeholder: 'country' }">
</div>
The wjAutoComplete binding supports all read-write properties and

events of the AutoComplete control. The following properties provide
two-way binding mode:
wjBulletGraph
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
KnockoutJS binding for the BulletGraph control.

Use the wjBulletGraph binding to add BulletGraph controls to your
<p>Here is a BulletGraph control:</p>
<div data-bind="wjBulletGraph: {
value: props.value,
min: props.min,
max: props.max,
format: props.format,
good: props.ranges.middle.max,
bad: props.ranges.middle.min,
target: props.ranges.target,
showRanges: props.showRanges }"
class="linear-gauge">
<div data-bind="wjRange: {
wjProperty: 'pointer',
thickness: props.ranges.pointerThickness }">
</div>
</div>
The wjBulletGraph binding may contain the wjRange child binding.
Wijmo 5
April 2015
491/535
Name
Description
The wjBulletGraph binding supports all read-write properties and events
of the BulletGraph control. The value property provides two-way binding
mode.
wjCalendar
KnockoutJS binding for the Calendar control.

Use the wjCalendar binding to add Calendar controls to your KnockoutJS
applications. For example:
<div
data-bind="wjCalendar: { value: theDate }">
</div>
The wjCalendar binding supports all read-write properties and events of

the Calendar control. The following properties provide two-way binding
mode:
value
displayMonth
wjCollectionViewNavigator
KnockoutJS binding for an ICollectionView navigator element.

Use the wjCollectionViewNavigator directive to add an element that
allows users to navigate through the items in an ICollectionView. For
example:
<div
data-bind="wjCollectionViewNavigator: { cv: myCollectionView }">
</div>
The wjCollectionViewNavigator directive has a single attribute:

cv
Reference to the ICollectionView object to navigate.

wjCollectionViewPager
KnockoutJS binding for an ICollectionView pager element.

Use the wjCollectionViewPager directive to add an element that allows
users to navigate through the pages in a paged ICollectionView. For
example:
<div
data-bind="wjCollectionViewPager: { cv: myCollectionView }">
</div>
Wijmo 5
April 2015
492/535
Name
Description
The wjCollectionViewPager directive has a single attribute:
cv
Reference to the paged ICollectionView object to navigate.

wjColorPicker
KnockoutJS binding for the ColorPicker control.

Use the wjColorPicker binding to add ColorPicker controls to your
<div
data-bind="wjColorPicker: { value: theColor }">
</div>
The wjColorPicker binding supports all read-write properties and events

of the ColorPicker control. The following properties provide two-way
binding mode:
wjComboBox
value
KnockoutJS binding for the ComboBox control.

Use the wjComboBox binding to add ComboBox controls to your
<div data-bind="wjComboBox: {
text: theCountry,
isEditable: false,
</div>
The wjComboBox binding supports all read-write properties and events

of the ComboBox control. The following properties provide two-way
binding mode:
wjFlexChart
Wijmo 5
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
KnockoutJS binding for the FlexChart control.
April 2015
493/535
Name
Description
Use the wjFlexChart binding to add FlexChart controls to your
<div data-bind="wjFlexChart: { itemsSource: data }">
<div data-bind="wjFlexChartLegend : {
position: 'Top' }">
</div>
<div data-bind="wjFlexChartAxis: {
wjProperty: 'axisX',
title: chartProps.titleX }">
</div>
wjProperty: 'axisY',
majorUnit: 5000 }">
</div>
<div data-bind="wjFlexChartSeries: {
name: 'Sales',
binding: 'sales' }">
</div>
name: 'Expenses',
binding: 'expenses' }">
</div>
name: 'Downloads',
binding: 'downloads',
chartType: 'LineSymbols' }">
</div>
</div>
The wjFlexChart binding may contain the following child bindings:

wjFlexChartAxis, wjFlexChartSeries, wjFlexChartLegend.
The wjFlexChart binding supports all read-write properties and events of
the FlexChart control, and the additional tooltipContent property that
assigns a value to the FlexChart.tooltip.content property. The selection
property provides two-way binding mode.
wjFlexChartAxis
KnockoutJS binding for the FlexChart Axis object.

The wjFlexChartAxis binding must be contained in a wjFlexChart
binding. Use the wjProperty attribute to specify the property (axisX or
axisY) to initialize with this binding.
The wjFlexChartAxis binding supports all read-write properties and
events of the Axis class.
wjFlexChartLegend
KnockoutJS binding for the Charts' Legend object.

The wjFlexChartLegend binding must be contained in one the following
bindings: wjFlexChart, wjFlexPie.
The wjFlexChartLegend binding supports all read-write properties and
events of the Legend class.
Wijmo 5
April 2015
494/535
Name
Description
wjFlexChartSeries
KnockoutJS binding for the FlexChart Series object.

The wjFlexChartSeries binding must be contained in a wjFlexChart
binding.
The wjFlexChartSeries binding supports all read-write properties and
events of the Series class. The visibility property provides two-way
binding mode.
wjFlexGrid
KnockoutJS binding for the FlexGrid control.

Use the wjFlexGrid binding to add FlexGrid controls to your KnockoutJS
<div data-bind="wjFlexGrid: { itemsSource: data }">
<div data-bind="wjFlexGridColumn: {
header: 'Country',
binding: 'country',
width: '*' }">
</div>
header: 'Date',
binding: 'date' }">
</div>
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
header: 'Active',
binding: 'active' }">
</div>
</div>
The wjFlexGrid binding may contain wjFlexGridColumn child bindings.

The wjFlexGrid binding supports all read-write properties and events of
the FlexGrid control, except for the scrollPosition and selection
properties.
wjFlexGridColumn
KnockoutJS binding for the FlexGrid Column object.

The wjFlexGridColumn binding must be contained in a wjFlexGrid
binding. For example:
header: 'Country',
binding: 'country',
width: '*' }">
</div>
Wijmo 5
April 2015
495/535
Name
Description
header: 'Date',
binding: 'date' }">
</div>
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
header: 'Active',
</div>
</div>
The wjFlexGridColumn binding supports all read-write properties and

events of the Column class. The isSelected property provides two-way
binding mode.
In addition to regular attributes that match properties in the Column
class, an element with the wjFlexGridColumn binding may contain a
wjStyle binding that provides conditional formatting and an HTML
fragment that is used as a cell template. Grid rows automatically stretch
vertically to fit custom cell contents.
Both the wjStyle binding and the HTML fragment can use the $item
observable variable in KnockoutJS bindings to refer to the item that is
bound to the current row. Also available are the $row and $col observable
variables containing cell row and column indexes. For example:
header: 'Symbol',
binding: 'symbol',
readOnly: true,
width: '*' }">
<a data-bind="attr: {
href: 'https://finance.yahoo.com/q?s=' + $item().symbol() },
text: $item().symbol">
</a>
</div>
header: 'Change',
binding: 'changePercent',
format: 'p2',
width: '*'
},
wjStyle: {
color: getAmountColor($item().change) }">
</div>
These bindings create two columns. The first has a template that produces
a hyperlink based on the bound item's "symbol" property. The second has
a conditional style that renders values with a color determined by a
function implemented in the controller.
Wijmo 5
April 2015
496/535
Name
Description
wjFlexGridFilter
KnockoutJS binding for the FlexGrid FlexGridFilter object.

The wjFlexGridFilter binding must be contained in a wjFlexGrid binding.
For example:
<div data-bind="wjFlexGridFilter: { filterColumns: ['country',
'amount'] }"></div>
<div data-bind="wjFlexGridColumn:
header: 'Country',
binding: 'country',
width: '*' }">
</div>
header: 'Date',
binding: 'date' }">
</div>
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
header: 'Active',
</div>
</div>
The wjFlexGridFilter binding supports all read-write properties and

events of the FlexGridFilter class.
wjFlexPie
KnockoutJS binding for the FlexPie control.

Use the wjFlexPie binding to add FlexPie controls to your KnockoutJS
<p>Here is a FlexPie control:</p>
<div data-bind="wjFlexPie: {
itemsSource: data,
binding: 'value',
bindingName: 'name',
header: 'Fruit By Value' }">
<div data-bind="wjFlexChartLegend : { position: 'Top' }"></div>
</div>
The wjFlexPie binding may contain the wjFlexChartLegend child binding.

The wjFlexPie binding supports all read-write properties and events of the
FlexPie control.
wjGroupPanel
Wijmo 5
KnockoutJS binding for the FlexGrid GroupPanel control.
April 2015
497/535
Name
Description
The wjGroupPanel binding should be connected to the FlexGrid control
using the grid property. For example:
<div data-bind="wjGroupPanel: { grid: flex(), placeholder: 'Drag columns
here to create groups.' }"></div>
<div data-bind="wjFlexGrid: { control: flex, itemsSource: data }">
header: 'Country',
binding: 'country',
width: '*' }">
</div>
header: 'Date',
binding: 'date' }">
</div>
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
header: 'Active',
</div>
</div>
The wjGroupPanel binding supports all read-write properties and events

of the GroupPanel class.
wjInputColor
KnockoutJS binding for the InputColor control.

Use the wjInputColor binding to add InputColor controls to your
<p>Here is a InputColor control:</p>
<div
data-bind="wjInputColor: { value: theColor }">
</div>
The wjInputColor binding supports all read-write properties and events

of the InputColor control. The following properties provide two-way
binding mode:
wjInputDate
Wijmo 5
isDroppedDown
text
value
KnockoutJS binding for the InputDate control.
April 2015
498/535
Name
Description
Use the wjInputDate binding to add InputDate controls to your
<div data-bind="wjInputDate: {
value: theDate,
format: 'M/d/yyyy' }">
</div>
The wjInputDate binding supports all read-write properties and events of

the InputDate control. The following properties provide two-way binding
mode:
wjInputMask
isDroppedDown
text
value
KnockoutJS binding for the InputMask control.

Use the wjInputMask binding to add InputMask controls to your
<div data-bind="wjInputMask: {
mask: '99/99/99',
promptChar: '*' }">
</div>
The wjInputMask binding supports all read-write properties and events of

the InputMask control. The value property provides two-way binding
mode.
wjInputNumber
KnockoutJS binding for the InputNumber control.

Use the wjInputNumber binding to add InputNumber controls to your
<div data-bind="wjInputNumber: {
value: theNumber,
min: 0,
max: 10,
format: 'n0',
placeholder: 'number between zero and ten' }">
</div>
Wijmo 5
April 2015
499/535
Name
Description
The wjInputNumber binding supports all read-write properties and
events of the InputNumber control. The following properties provide
two-way binding mode:
wjInputTime
value
text
KnockoutJS binding for the InputTime control.

Use the wjInputTime binding to add InputTime controls to your
<div data-bind="wjInputTime: {
min: new Date(2014, 8, 1, 9, 0),
max: new Date(2014, 8, 1, 17, 0),
step: 15,
format: 'h:mm tt',
value: theDate }">
</div>
The wjInputTime binding supports all read-write properties and events of

the InputTime control. The following properties provide two-way binding
mode:
wjLinearGauge
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
value
KnockoutJS binding for the LinearGauge control.

Use the wjLinearGauge binding to add LinearGauge controls to your
<p>Here is a LinearGauge control:</p>
<div data-bind="wjLinearGauge: {
value: props.value,
min: props.min,
max: props.max,
<class="linear-gauge">
</div>
Wijmo 5
April 2015
500/535
Name
Description
min: props.ranges.lower.min,
max: props.ranges.lower.max,
color: props.ranges.lower.color }">
</div>
min: props.ranges.middle.min,
max: props.ranges.middle.max,
color: props.ranges.middle.color }">
</div>
min: props.ranges.upper.min,
max: props.ranges.upper.max,
color: props.ranges.upper.color }">
</div>
</div>
The wjLinearGauge binding may contain the wjRange child binding.

The wjLinearGauge binding supports all read-write properties and events
of the LinearGauge control. The value property provides two-way binding
mode.
wjListBox
KnockoutJS binding for the ListBox control.

Use the wjListBox binding to add ListBox controls to your KnockoutJS
<p>Here is a ListBox control:</p>
<div data-bind="wjListBox: {
selectedItem: theCountry }">
</div>
The wjListBox binding supports all read-write properties and events of

the ListBox control. The following properties provide two-way binding
mode:
wjMenu
selectedIndex
selectedItem
selectedValue
KnockoutJS binding for the Menu control.

Use the wjMenu binding to add Menu controls to your KnockoutJS
<div data-bind="wjMenu: { value: tax, header: 'Tax' }">
<span data-bind="wjMenuItem: { value: 0 }">Exempt</span>
<span data-bind="wjMenuSeparator: {}"></span>
<span data-bind="wjMenuItem: { value: .05 }">5%</span>
Wijmo 5
April 2015
501/535
Name
Description
</div>
The wjMenu binding may contain the following child bindings:

wjMenuItem, wjMenuSeparator.
The wjMenu binding supports all read-write properties and events of the
Menu control. The following properties provide two-way binding mode:
wjMenuItem
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
value
KnockoutJS binding for menu items.

Use the wjMenuItem binding to add menu items to a Menu control. The
wjMenuItem binding must be contained in a wjMenu binding. For
example:
<p>Here is a Menu control with four menu items:</p>
</div>
The wjMenuItem binding supports the following attributes:

cmd
Function to execute in the controller when the item is clicked.

cmdParam
Parameter passed to the cmd function when the item is clicked.

value
Value selected when the item is clicked (use either this or cmd).
wjMenuSeparator
KnockoutJS binding for menu separators.

The the wjMenuSeparator adds a non-selectable separator to a Menu
control, and has no attributes. It must be contained in a wjMenu binding.
For example:
<p>Here is a Menu control with four menu items and one separator:</p>
Wijmo 5
April 2015
502/535
Name
Description
</div>
wjRadialGauge
KnockoutJS binding for the RadialGauge control.

Use the wjRadialGauge binding to add RadialGauge controls to your
<p>Here is a RadialGauge control:</p>
<div data-bind="wjRadialGauge: {
value: props.value,
min: props.min,
max: props.max,
class="radial-gauge">
</div>
</div>
</div>
</div>
</div>
The wjRadialGauge binding may contain the wjRange child binding.

The wjRadialGauge binding supports all read-write properties and events
of the RadialGauge control. The value property provides two-way binding
mode.
wjRange
KnockoutJS binding for the Gauge's Range object.

The wjRange binding must be contained in one of the following bindings:
wjLinearGauge
wjRadialGauge
wjBulletGraph
By default, this binding adds a Range object to the ranges collection of

the Chart control. The wjProperty attribute allows you to specify another
Chart property, for example the pointer property, to initialize with the
binding.
Wijmo 5
April 2015
503/535
Name
Description
The wjRange binding supports all read-write properties and events of the
Range class.
wjStyle
KnockoutJS binding for conditional formatting of FlexGrid Column cells.

Use the wjStyle binding together with the wjFlexGridColumn binding to
provide conditional formatting to column cells. For example:
header: 'Change',
format: 'p2',
width: '*'
},
wjStyle: { color: getAmountColor($item().change) }"></div>
The wjStyle uses the same syntax as the native KnockoutJS style binding.
In addition to the view model properties, the following observable
variables are available in binding expressions:
$item
References the item that is bound to the current row.

$row
The row index.

$col
The column index.

wjTooltip
KnockoutJS binding for the Tooltip class.

Use the wjTooltip binding to add tooltips to elements on the page. The
wjTooltip supports HTML content, smart positioning, and touch.
The wjTooltip binding is specified on an element that the tooltip applies
to. The value is the tooltip text or the id of an element that contains the
text. For example:
<p data-bind="wjTooltip: '#fineprint'" >
...
<div id="fineprint" style="display:none" >
<p>
Data for the current quarter is estimated by pro-rating etc...</p>
</div>
Wijmo 5
April 2015
504/535
wjAutoComplete Class
Base Class
wjComboBox
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the AutoComplete control.
Use the wjAutoComplete binding to add AutoComplete controls to your KnockoutJS applications. For
example:
<div data-bind="wjAutoComplete: {
text: theCountry,
isEditable: false,
</div>
The wjAutoComplete binding supports all read-write properties and events of the AutoComplete
control. The following properties provide two-way binding mode:
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
Wijmo 5
April 2015
505/535
wjBulletGraph Class
Base Class
wjLinearGauge
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the BulletGraph control.
Use the wjBulletGraph binding to add BulletGraph controls to your KnockoutJS applications. For
example:
<p>Here is a BulletGraph control:</p>
<div data-bind="wjBulletGraph: {
value: props.value,
min: props.min,
max: props.max,
good: props.ranges.middle.max,
bad: props.ranges.middle.min,
target: props.ranges.target,
class="linear-gauge">
</div>
</div>
The wjBulletGraph binding may contain the wjRange child binding.

The wjBulletGraph binding supports all read-write properties and events of the BulletGraph control. The
value property provides two-way binding mode.
Wijmo 5
April 2015
506/535
wjCalendar Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the Calendar control.
Use the wjCalendar binding to add Calendar controls to your KnockoutJS applications. For example:
<div
data-bind="wjCalendar: { value: theDate }">
</div>
The wjCalendar binding supports all read-write properties and events of the Calendar control. The
following properties provide two-way binding mode:
value
displayMonth
Wijmo 5
April 2015
507/535
wjCollectionViewNavigator Class
Base Class
WjCollectionViewBaseBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for an ICollectionView navigator element.
Use the wjCollectionViewNavigator directive to add an element that allows users to navigate through
the items in an ICollectionView. For example:
<div
data-bind="wjCollectionViewNavigator: { cv: myCollectionView }">
</div>
The wjCollectionViewNavigator directive has a single attribute:

cv
Reference to the ICollectionView object to navigate.
Wijmo 5
April 2015
508/535
wjCollectionViewPager Class
Base Class
WjCollectionViewBaseBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for an ICollectionView pager element.
Use the wjCollectionViewPager directive to add an element that allows users to navigate through the
pages in a paged ICollectionView. For example:
<div
data-bind="wjCollectionViewPager: { cv: myCollectionView }">
</div>
The wjCollectionViewPager directive has a single attribute:

cv
Reference to the paged ICollectionView object to navigate.
Wijmo 5
April 2015
509/535
wjColorPicker Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the ColorPicker control.
Use the wjColorPicker binding to add ColorPicker controls to your KnockoutJS applications. For
example:
<div
data-bind="wjColorPicker: { value: theColor }">
</div>
The wjColorPicker binding supports all read-write properties and events of the ColorPicker control. The
value
Wijmo 5
April 2015
510/535
wjComboBox Class
Base Class
WjDropDownBinding
Derived Classes
wjAutoComplete, wjInputTime, wjMenu

Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the ComboBox control.
Use the wjComboBox binding to add ComboBox controls to your KnockoutJS applications. For example:
<div data-bind="wjComboBox: {
text: theCountry,
isEditable: false,
</div>
The wjComboBox binding supports all read-write properties and events of the ComboBox control. The
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
Wijmo 5
April 2015
511/535
wjFlexChart Class
Base Class
WjFlexChartBaseBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the FlexChart control.
Use the wjFlexChart binding to add FlexChart controls to your KnockoutJS applications. For example:
<div data-bind="wjFlexChart: { itemsSource: data }">
<div data-bind="wjFlexChartLegend : {
position: 'Top' }">
</div>
wjProperty: 'axisX',
title: chartProps.titleX }">
</div>
wjProperty: 'axisY',
majorUnit: 5000 }">
</div>
name: 'Sales',
binding: 'sales' }">
</div>
name: 'Expenses',
binding: 'expenses' }">
</div>
name: 'Downloads',
binding: 'downloads',
chartType: 'LineSymbols' }">
</div>
</div>
The wjFlexChart binding may contain the following child bindings: wjFlexChartAxis, wjFlexChartSeries,
wjFlexChartLegend.
The wjFlexChart binding supports all read-write properties and events of the FlexChart control, and the
additional tooltipContent property that assigns a value to the FlexChart.tooltip.content property. The
selection property provides two-way binding mode.
Wijmo 5
April 2015
512/535
wjFlexChartAxis Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the FlexChart Axis object.
The wjFlexChartAxis binding must be contained in a wjFlexChart binding. Use the wjProperty attribute
to specify the property (axisX or axisY) to initialize with this binding.
The wjFlexChartAxis binding supports all read-write properties and events of the Axis class.
Wijmo 5
April 2015
513/535
wjFlexChartLegend Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the Charts' Legend object.
The wjFlexChartLegend binding must be contained in one the following bindings: wjFlexChart,
wjFlexPie.
The wjFlexChartLegend binding supports all read-write properties and events of the Legend class.
Wijmo 5
April 2015
514/535
wjFlexChartSeries Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the FlexChart Series object.
The wjFlexChartSeries binding must be contained in a wjFlexChart binding.
The wjFlexChartSeries binding supports all read-write properties and events of the Series class. The
visibility property provides two-way binding mode.
Wijmo 5
April 2015
515/535
wjFlexGrid Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the FlexGrid control.
Use the wjFlexGrid binding to add FlexGrid controls to your KnockoutJS applications. For example:
header: 'Country',
binding: 'country',
width: '*' }">
</div>
header: 'Date',
binding: 'date' }">
</div>
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
header: 'Active',
</div>
</div>
The wjFlexGrid binding may contain wjFlexGridColumn child bindings.

The wjFlexGrid binding supports all read-write properties and events of the FlexGrid control, except for
the scrollPosition and selection properties.
Wijmo 5
April 2015
516/535
wjFlexGridColumn Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the FlexGrid Column object.
The wjFlexGridColumn binding must be contained in a wjFlexGrid binding. For example:
header: 'Country',
binding: 'country',
width: '*' }">
</div>
header: 'Date',
binding: 'date' }">
</div>
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
header: 'Active',
</div>
</div>
The wjFlexGridColumn binding supports all read-write properties and events of the Column class. The
isSelected property provides two-way binding mode.
In addition to regular attributes that match properties in the Column class, an element with the
wjFlexGridColumn binding may contain a wjStyle binding that provides conditional formatting and an
HTML fragment that is used as a cell template. Grid rows automatically stretch vertically to fit custom cell
contents.
Both the wjStyle binding and the HTML fragment can use the $item observable variable in KnockoutJS
bindings to refer to the item that is bound to the current row. Also available are the $row and $col
observable variables containing cell row and column indexes. For example:
header: 'Symbol',
binding: 'symbol',
readOnly: true,
width: '*' }">
<a data-bind="attr: {
href: 'https://finance.yahoo.com/q?s=' + $item().symbol() },
text: $item().symbol">
Wijmo 5
April 2015
517/535
</a>
</div>
header: 'Change',
format: 'p2',
width: '*'
},
wjStyle: {
color: getAmountColor($item().change) }">
</div>
These bindings create two columns. The first has a template that produces a hyperlink based on the
bound item's "symbol" property. The second has a conditional style that renders values with a color
determined by a function implemented in the controller.
Wijmo 5
April 2015
518/535
wjFlexGridFilter Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the FlexGrid FlexGridFilter object.
The wjFlexGridFilter binding must be contained in a wjFlexGrid binding. For example:
<div data-bind="wjFlexGridFilter: { filterColumns: ['country', 'amount']
header: 'Country',
binding: 'country',
width: '*' }">
</div>
header: 'Date',
binding: 'date' }">
</div>
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
header: 'Active',
</div>
</div>
}"></div>
The wjFlexGridFilter binding supports all read-write properties and events of the FlexGridFilter class.
Wijmo 5
April 2015
519/535
wjFlexPie Class
Base Class
WjFlexChartBaseBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the FlexPie control.
Use the wjFlexPie binding to add FlexPie controls to your KnockoutJS applications. For example:
<p>Here is a FlexPie control:</p>
<div data-bind="wjFlexPie: {
itemsSource: data,
binding: 'value',
bindingName: 'name',
header: 'Fruit By Value' }">
<div data-bind="wjFlexChartLegend : { position: 'Top' }"></div>
</div>
The wjFlexPie binding may contain the wjFlexChartLegend child binding.

The wjFlexPie binding supports all read-write properties and events of the FlexPie control.
Wijmo 5
April 2015
520/535
wjGroupPanel Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the FlexGrid GroupPanel control.
The wjGroupPanel binding should be connected to the FlexGrid control using the grid property. For
example:
<div data-bind="wjGroupPanel: { grid: flex(), placeholder: 'Drag columns here to create groups.' }"></div>
<div data-bind="wjFlexGrid: { control: flex, itemsSource: data }">
header: 'Country',
binding: 'country',
width: '*' }">
</div>
header: 'Date',
binding: 'date' }">
</div>
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
header: 'Active',
</div>
</div>
The wjGroupPanel binding supports all read-write properties and events of the GroupPanel class.
Wijmo 5
April 2015
521/535
wjInputColor Class
Base Class
WjDropDownBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the InputColor control.
Use the wjInputColor binding to add InputColor controls to your KnockoutJS applications. For example:
<p>Here is a InputColor control:</p>
<div
data-bind="wjInputColor: { value: theColor }">
</div>
The wjInputColor binding supports all read-write properties and events of the InputColor control. The
isDroppedDown
text
value
Wijmo 5
April 2015
522/535
wjInputDate Class
Base Class
WjDropDownBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the InputDate control.
Use the wjInputDate binding to add InputDate controls to your KnockoutJS applications. For example:
<div data-bind="wjInputDate: {
value: theDate,
format: 'M/d/yyyy' }">
</div>
The wjInputDate binding supports all read-write properties and events of the InputDate control. The
isDroppedDown
text
value
Wijmo 5
April 2015
523/535
wjInputMask Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the InputMask control.
Use the wjInputMask binding to add InputMask controls to your KnockoutJS applications. For example:
<div data-bind="wjInputMask: {
mask: '99/99/99',
promptChar: '*' }">
</div>
The wjInputMask binding supports all read-write properties and events of the InputMask control. The
value property provides two-way binding mode.
Wijmo 5
April 2015
524/535
wjInputNumber Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the InputNumber control.
Use the wjInputNumber binding to add InputNumber controls to your KnockoutJS applications. For
example:
<div data-bind="wjInputNumber: {
value: theNumber,
min: 0,
max: 10,
format: 'n0',
placeholder: 'number between zero and ten' }">
</div>
The wjInputNumber binding supports all read-write properties and events of the InputNumber control.
The following properties provide two-way binding mode:
value
text
Wijmo 5
April 2015
525/535
wjInputTime Class
Base Class
wjComboBox
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the InputTime control.
Use the wjInputTime binding to add InputTime controls to your KnockoutJS applications. For example:
<div data-bind="wjInputTime: {
min: new Date(2014, 8, 1, 9, 0),
max: new Date(2014, 8, 1, 17, 0),
step: 15,
format: 'h:mm tt',
value: theDate }">
</div>
The wjInputTime binding supports all read-write properties and events of the InputTime control. The
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
value
Wijmo 5
April 2015
526/535
wjLinearGauge Class
Base Class
WjGaugeBinding
Derived Classes
wjBulletGraph
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the LinearGauge control.
Use the wjLinearGauge binding to add LinearGauge controls to your KnockoutJS applications. For
example:
<p>Here is a LinearGauge control:</p>
<div data-bind="wjLinearGauge: {
value: props.value,
min: props.min,
max: props.max,
<class="linear-gauge">
</div>
</div>
</div>
</div>
</div>
The wjLinearGauge binding may contain the wjRange child binding.

The wjLinearGauge binding supports all read-write properties and events of the LinearGauge control.
The value property provides two-way binding mode.
Wijmo 5
April 2015
527/535
wjListBox Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the ListBox control.
Use the wjListBox binding to add ListBox controls to your KnockoutJS applications. For example:
<p>Here is a ListBox control:</p>
<div data-bind="wjListBox: {
selectedItem: theCountry }">
</div>
The wjListBox binding supports all read-write properties and events of the ListBox control. The following
properties provide two-way binding mode:
selectedIndex
selectedItem
selectedValue
Wijmo 5
April 2015
528/535
wjMenu Class
Base Class
wjComboBox
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the Menu control.
Use the wjMenu binding to add Menu controls to your KnockoutJS applications. For example:
</div>
The wjMenu binding may contain the following child bindings: wjMenuItem, wjMenuSeparator.
The wjMenu binding supports all read-write properties and events of the Menu control. The following
properties provide two-way binding mode:
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
value
Wijmo 5
April 2015
529/535
wjMenuItem Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for menu items.
Use the wjMenuItem binding to add menu items to a Menu control. The wjMenuItem binding must be
contained in a wjMenu binding. For example:
<p>Here is a Menu control with four menu items:</p>
</div>
The wjMenuItem binding supports the following attributes:

cmd
Function to execute in the controller when the item is clicked.

cmdParam
Parameter passed to the cmd function when the item is clicked.

value
Value selected when the item is clicked (use either this or cmd).
Wijmo 5
April 2015
530/535
wjMenuSeparator Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for menu separators.
The the wjMenuSeparator adds a non-selectable separator to a Menu control, and has no attributes. It
must be contained in a wjMenu binding. For example:
<p>Here is a Menu control with four menu items and one separator:</p>
</div>
Wijmo 5
April 2015
531/535
wjRadialGauge Class
Base Class
WjGaugeBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the RadialGauge control.
Use the wjRadialGauge binding to add RadialGauge controls to your KnockoutJS applications. For
example:
<p>Here is a RadialGauge control:</p>
<div data-bind="wjRadialGauge: {
value: props.value,
min: props.min,
max: props.max,
class="radial-gauge">
</div>
</div>
</div>
</div>
</div>
The wjRadialGauge binding may contain the wjRange child binding.

The wjRadialGauge binding supports all read-write properties and events of the RadialGauge control.
The value property provides two-way binding mode.
Wijmo 5
April 2015
532/535
wjRange Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the Gauge's Range object.
The wjRange binding must be contained in one of the following bindings:
wjLinearGauge
wjRadialGauge
wjBulletGraph
By default, this binding adds a Range object to the ranges collection of the Chart control. The
wjProperty attribute allows you to specify another Chart property, for example the pointer property, to
initialize with the binding.
The wjRange binding supports all read-write properties and events of the Range class.
Wijmo 5
April 2015
533/535
wjStyle Class
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for conditional formatting of FlexGrid Column cells.
Use the wjStyle binding together with the wjFlexGridColumn binding to provide conditional formatting
to column cells. For example:
header: 'Change',
format: 'p2',
width: '*'
},
wjStyle: { color: getAmountColor($item().change) }"></div>
The wjStyle uses the same syntax as the native KnockoutJS style binding. In addition to the view model
properties, the following observable variables are available in binding expressions:
$item
References the item that is bound to the current row.

$row
The row index.

$col
The column index.
Wijmo 5
April 2015
534/535
wjTooltip Class
Base Class
WjBinding
Module
wijmo.knockout
File
wijmo.knockout.js
KnockoutJS binding for the Tooltip class.
Use the wjTooltip binding to add tooltips to elements on the page. The wjTooltip supports HTML
content, smart positioning, and touch.
The wjTooltip binding is specified on an element that the tooltip applies to. The value is the tooltip text
or the id of an element that contains the text. For example:
<p data-bind="wjTooltip: '#fineprint'" >
...
<div id="fineprint" style="display:none" >
<p>
Data for the current quarter is estimated by pro-rating etc...</p>
</div>
Wijmo 5
April 2015
535/535

Wijmo 5 Reference Guide

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wijmo 5 Reference Guide

Uploaded by

Copyright:

Available Formats

Wijmo 5 Reference

Referencing Wijmo 5 in Your Applications

wijmo.grid.js: Contains the FlexGrid control.

Deploying Wijmo locally

Deploying Wijmo from CDN

Creating Wijmo 5 Controls

Sizing and Styling Controls

Globalizing Wijmo 5 Applications

Using Enumerations in Wijmo 5

Setting enumeration properties

Getting enumeration properties

Converting enumeration values

Note for .NET Developers

Using Wijmo 5 in AngularJS Applications

Variables: Reusable common values, such as color and style information.

Download a copy of less.js and save it.

<link rel="stylesheet/less" type="text/css" href="styles.less">

Creating New Themes

@text - Default text color.

Deploying New Themes

Provides binding to complex properties (e.g. 'customer.address.city')

Provides arguments for cancellable events.

Static class that provides utility methods for clipboard operations.

Base class for all Wijmo controls.

Provides date and time utilities.

Base class for event arguments.

Class that implements formatting and parsing of numbers and Dates.

Class that represents a point (with x and y coordinates).

PropertyChangedEventArgs Provides arguments for property change events.

Class that represents a size (with width and height).

Provides a pop-up window that displays additional information about

Provides arguments for the popup event.

sender is the object that raised the event, and

Allows callers to verify whether an object implements an interface.

Aggregate Specifies the type of aggregate to calculate over a group of values.

Enumeration with key values.

Gets or sets an object that contains all localizable strings in

Adds a class to an element.

Calls a function on a timer with a

The function returns an interval ID that

value (any): Value supposed to Asserts that a value is an array.

value (boolean): Value

Asserts that a value is a Boolean.

Returns: The Boolean passed

value (any): Array or

Asserts that a value is an

Returns: The ICollectionView

value (Date): Value supposed

Asserts that a value is a Date.

Returns: The Date passed in.

value (number): Value

value (any): Value supposed to Asserts that a value is a function.

asInt(value, nullOK, positive)

value (number): Value

value (number): Value

value (string): Value supposed Asserts that a value is a string.

asType(value, type, nullOK)

value (any): Value to be

Asserts that a value is an instance of a

Returns: The value passed in.

value (any): Value to convert.

clamp(value, min, max)

Changes the type of a value.