Professional Documents
Culture Documents
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
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:
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.
Wijmo 5
April 2015
3/535
<!-- AngularJS and Wijmo directives (optional, use in AngularJS applications) -->
<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>
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
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 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
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
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';
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>
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.
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.
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.
Wijmo 5
April 2015
15/535
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
CancelEventArgs
Clipboard
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
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
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
Globalize
Point
Class that represents a rectangle (with left, top, width, and height).
Size
Wijmo 5
April 2015
19/535
Name
Description
Tooltip
Manual Mode: The caller is responsible for showing and hiding the
tooltip using the show and hide methods. For example:
var tt = new wijmo.Tooltip();
element.addEventListener('click', function () {
if (tt.isVisible) {
tt.hide();
} else {
tt.show(element, 'This is an important element!');
}
});
TooltipEventArgs
Wijmo 5
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:
IQueryInterface
Wijmo 5
April 2015
21/535
Enumerations
Name
Description
Wijmo 5
April 2015
22/535
Properties
Name
Type
Description
culture
any
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.
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.
Wijmo 5
April 2015
24/535
Name
Parameters
Description
Returns An interval id that you can
use to suspend the animation.
asArray(value, nullOK)
asBoolean(value, nullOK)
Wijmo 5
April 2015
25/535
Name
Parameters
Description
asFunction(value, nullOK)
asNumber(value, nullOK,
positive)
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)
Wijmo 5
April 2015
26/535
Name
Parameters
Description
contains(parent, child)
copy(dst, src)
createElement(html)
Returns: void
Wijmo 5
April 2015
27/535
Name
Parameters
Description
escapeHtml(text)
Returns: An HTML-escaped
version of the original string.
Wijmo 5
April 2015
28/535
Name
Parameters
Description
Returns The formatted string.
getElement(selector)
Returns: HTMLElement
getElementRect(e)
e (Element)
Returns: Rect
This is similar to the
getBoundingClientRect function,
except that uses window coordinates,
which change when the document
scrolls.
S getFirstDayOfWeek()
S getNumberDecimalSeparator
()
getType(value)
getVersion()
hasClass(e, className)
hidePopup(popup, remove)
Wijmo 5
April 2015
29/535
Name
Parameters
Description
isArray(value)
Returns: boolean
isBoolean(value)
Returns: boolean
isDate(value)
Returns: boolean
isFunction(value)
Returns: boolean
isInt(value)
Returns: boolean
isNullOrWhiteSpace(value)
Returns: void
isNumber(value)
Returns: boolean
isObject(value)
isPrimitive(value)
isString(value)
Returns: boolean
isUndefined(value)
Returns: boolean
S parseDate(value, format)
Wijmo 5
April 2015
30/535
Name
S parseFloat(value)
Parameters
Description
removeClass(e, className)
e (HTMLElement): Element
that will have the class
removed.
className (string): Class to
remove form the element.
Returns: void
setCss(e, css)
e (HTMLElement): Element
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.
(default value: false)
Returns: void
toggleClass(e, className,
addOrRemove)
Wijmo 5
e (HTMLElement): Element
that will have the class added.
className (string): Class to
April 2015
31/535
Name
Parameters
Description
add or remove.
addOrRemove (boolean):
Whether to add or remove the
class.
Returns: void
tryCast(value, type)
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)
Returns: void
Properties
Name
Type
Description
path
string
Methods
Name
Parameters
Description
Returns: any
setValue(object, object (any): The object that contains the
value)
data to be set.
value (any): Data value to set.
Returns: void
Wijmo 5
April 2015
33/535
CancelEventArgs Class
Base Class
EventArgs
Derived Classes
wijmo
File
wijmo.js
Provides arguments for cancellable events.
Properties
Name
F cancel
Type
Description
boolean
SF empty
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
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)
Returns: void
Properties
Name
Type
Description
number
number
number
number
Methods
Name
Parameters
Description
equals(clr)
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
S fromRgba(r, g,
b, a)
Returns: Color
S fromString
(value)
getHsl()
S interpolate(c1,
c2, pct)
Returns: Color
toString()
Wijmo 5
April 2015
37/535
Control Class
Derived Classes
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.
(default value: false)
Returns: void
Properties
Name
Type
Description
hostElement
HTMLElement
isTouching
boolean
isUpdating
boolean
Methods
Wijmo 5
April 2015
38/535
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Returns: HTMLElement
beginUpdate()
containsFocus()
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()
endUpdate()
focus()
S getControl
(element)
Returns: Control
Wijmo 5
April 2015
39/535
Name
Parameters
Description
getTemplate()
initialize
(options)
Returns: void
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)
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
S addSeconds
value (Date): Original date.
Gets a new Date that adds the specified
(value, seconds) seconds (number): Number of seconds to number of seconds to a given Date.
add to the given date.
Returns: Date
S addYears(value, value (Date): Original date.
years)
years (number): Number of years to add
to the given date.
Returns: Date
S clone(date)
Returns: Date
Wijmo 5
April 2015
42/535
Name
S equals(d1, d2)
Parameters
Description
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)
Returns: boolean
S sameTime(d1,
d2)
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
Methods
Name
Parameters
Description
addHandler
(handler, self)
Returns: void
Wijmo 5
April 2015
44/535
Name
Parameters
Description
raise(sender, args)
Returns: void
removeAllHandlers
()
removeHandler
(handler, self)
Returns: void
Wijmo 5
April 2015
45/535
EventArgs Class
Derived Classes
Properties
Name
Type
Description
SF empty
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
S formatDate
(value, format)
Wijmo 5
April 2015
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.
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
Fy
number
Methods
Name
Parameters
Description
clone()
equals(pt)
Wijmo 5
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)
Returns: void
Properties
Name
Type
SF empty
Description
Provides a value to use with events that do not have event
data.
(inherited from EventArgs).
newValue
any
oldValue
any
propertyName
string
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
F height
number
F left
number
number
F top
number
F width
number
right
Methods
Name
Parameters
Description
clone()
contains(pt)
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
April 2015
51/535
Name
Parameters
Description
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)
Returns: void
Properties
Name
Type
Description
F height
number
F width
number
Methods
Name
Parameters
Description
clone()
equals(sz)
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:
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:
var tt = new wijmo.Tooltip();
element.addEventListener('click', function () {
if (tt.isVisible) {
tt.hide();
} else {
tt.show(element, 'This is an important element!');
}
});
Constructor
Name
Parameters
Description
constructor()
Properties
Name
Type
Description
gap
number
Gets or sets the distance between the tooltip and the target
element.
hideDelay
number
isContentHtml
boolean
isVisible
boolean
Wijmo 5
April 2015
54/535
Name
Type
Description
showDelay
number
Methods
Name
Parameters
Description
hide()
onPopup(e)
Returns: void
setTooltip
(element,
content)
Events
Name
Arguments
Description
popup
TooltipEventArgs
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)
Returns: void
Properties
Name
F cancel
content
Type
Description
boolean
string
SF empty
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:
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
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
Cnt
Max
Min
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
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
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
Delete
Down
End
Enter
Escape
F1
The F1 key.
F10
F11
F12
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
Left
Right
Space
Tab
Up
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
CollectionView
CollectionViewGroup
GroupDescription
PageChangingEventArgs
Wijmo 5
April 2015
63/535
Name
Description
PropertyGroupDescription
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 cv = new wijmo.collections.CollectionView(items);
var gd = new wijmo.collections.PropertyGroupDescription('country',
function(item, propName) {
return item[propName][0]; // return country's initial
});
cv.groupDescriptions.push(gd);
SortDescription
Wijmo 5
April 2015
64/535
Interfaces
Name
Description
ICollectionView
IComparer
IEditableCollectionView
INotifyCollectionChanged Notifies listeners of dynamic changes, such as when items get added and
removed or when the collection is sorted, filtered, or grouped.
IPagedCollectionView
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
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
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.
Returns: void
Properties
Name
Type
Description
canAddNew
boolean
canCancelEdit
boolean
canChangePage
boolean
Wijmo 5
April 2015
68/535
Name
Type
Description
canFilter
boolean
canGroup
boolean
canRemove
boolean
canSort
boolean
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
currentPosition
number
filter
IPredicate
groupDescriptions
ObservableArray
groups
isAddingNew
boolean
isEditingItem
boolean
isEmpty
boolean
isPageChanging
boolean
isUpdating
Wijmo 5
April 2015
69/535
Name
Type
Description
itemCount
number
items
any
itemsAdded
ObservableArray
itemsEdited
ObservableArray
itemsRemoved
ObservableArray
newItemCreator
Function
pageCount
number
pageIndex
number
pageSize
number
sortConverter
Function
Wijmo 5
April 2015
70/535
Name
Type
Description
value = countries[value]; // convert country id into
name
}
return value;
}
sortDescriptions
ObservableArray
sourceCollection
any
totalItemCount
number
trackChanges
boolean
Methods
Name
Parameters
Description
addNew()
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();
cancelEdit()
cancelNew()
clearChanges()
commitEdit()
commitNew()
contains(item)
Returns: boolean
Wijmo 5
April 2015
72/535
Name
Parameters
deferUpdate(fn)
editItem(item)
Description
Returns: void
Returns: void
endUpdate()
implementsInterface
(interfaceName)
moveCurrentTo(item)
Returns: boolean
moveCurrentToFirst()
moveCurrentToLast()
moveCurrentToNext()
moveCurrentToPosition index (number): Index of the item that Sets the item at the specified index in
(index)
will become current.
the view as the current item.
Returns: boolean
moveCurrentToPrevious
()
moveToFirstPage()
moveToLastPage()
moveToNextPage()
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()
e ()
(default value: EventArgs.empty)
Returns: void
onCurrentChanging(e)
e (CancelEventArgs):
CancelEventArgs that contains the
event data.
Returns: boolean
onPageChanged(e)
e ()
(default value: EventArgs.empty)
Returns: void
onPageChanging(e)
e (PageChangingEventArgs):
PageChangingEventArgs that
contains the event data.
Returns: boolean
refresh()
remove(item)
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
currentChanged
Wijmo 5
April 2015
74/535
Name
Arguments
Description
currentChanging
CancelEventArgs
pageChanged
pageChanging
Wijmo 5
April 2015
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.
Returns: void
Methods
Name
Parameters
Description
getAggregate
(aggType,
binding, view)
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
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)
Returns: void
Properties
Name
F action
Type
Description
SF empty
F index
number
F item
any
SF reset
Wijmo 5
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)
Properties
Name
Type
F collectionChanged
Description
Occurs when the collection changes.
isUpdating
Methods
Name
Parameters
Description
beginUpdate()
clear()
deferUpdate(fn)
Wijmo 5
Returns: void
April 2015
79/535
Name
Parameters
Description
endUpdate()
insert(index, item)
Returns: void
onCollectionChanged e (): Contains a description of the
(e)
change.
(default value:
NotifyCollectionChangedEventArgs.
reset)
Returns: void
push(item)
setAt(index, item)
Returns: void
slice(begin, end)
Wijmo 5
April 2015
80/535
Name
Parameters
Description
splice(index, count,
item)
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)
Returns: void
Properties
Name
F cancel
Type
Description
boolean
SF empty
F newPageIndex
Wijmo 5
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 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 cv = new wijmo.collections.CollectionView(items);
var gd = new wijmo.collections.PropertyGroupDescription('country',
function(item, propName) {
return item[propName][0]; // return country's initial
});
cv.groupDescriptions.push(gd);
Constructor
Name
Parameters
Description
constructor
(property,
converter)
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
Wijmo 5
April 2015
84/535
SortDescription Class
Module
wijmo.collections
File
wijmo.js
Describes a sorting criterion.
Constructor
Name
Parameters
Description
constructor
(property,
ascending)
Properties
Name
Type
Description
ascending
boolean
property
string
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
F canGroup
boolean
F canSort
boolean
F currentChanged
Event
F currentChanging
Event
F currentItem
any
F currentPosition
number
F filter
IPredicate
F groupDescriptions
F groups
any
F isEmpty
boolean
Wijmo 5
April 2015
86/535
Name
Type
Description
F items
any
F sortDescriptions
F sourceCollection
any
Methods
Name
Parameters
Description
beginUpdate()
contains(item)
Returns: boolean
deferUpdate(fn)
endUpdate()
moveCurrentTo(item)
Returns: boolean
moveCurrentToFirst()
moveCurrentToLast()
moveCurrentToNext()
moveCurrentToPosition index (number): The index of the item Sets the item at the specified index in
(index)
to set as the currentItem.
the view as the current item.
Returns: boolean
moveCurrentToPrevious
()
refresh()
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
F canCancelEdit
boolean
F canRemove
boolean
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
F isEditingItem
boolean
Methods
Name
Parameters
Description
addNew()
cancelEdit()
cancelNew()
commitEdit()
commitNew()
editItem(item)
Returns: void
Wijmo 5
April 2015
89/535
Name
Parameters
Description
remove(item)
Returns: void
removeAt(index) index (number): Index of the item to
remove from the collection.
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
F isPageChanging
boolean
F itemCount
number
F pageChanged
Event
F pageChanging
Event
F pageIndex
number
F pageSize
number
F totalItemCount
number
Methods
Name
Parameters
Description
moveToFirstPage()
moveToLastPage()
Wijmo 5
April 2015
92/535
Name
Parameters
Description
moveToNextPage()
moveToPage(index)
Returns: boolean
moveToPreviousPage
()
Wijmo 5
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
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
CellRange
Represents a rectangular group of cells defined by two row indices and two
column indices.
CellRangeEventArgs
Column
ColumnCollection
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.
Represents a logical part of the grid, such as the column headers, row headers,
and scrollable data part.
GroupRow
HitTestInfo
MergeManager
Row
Wijmo 5
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
Wijmo 5
April 2015
98/535
Enumerations
Name
Description
AllowDragging
AllowMerging
Specifies constants that define which areas of the grid support cell merging.
AllowResizing
AutoSizeMode
CellType
HeadersVisibility Specifies constants that specify the visibility of row and column headers.
RowColFlags
SelectedState
SelectionMode
SelMove
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)
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
Properties
Name
Type
Description
bottomRow
number
col
number
col2
number
columnSpan
number
isSingleCell
boolean
isValid
boolean
leftCol
number
rightCol
number
row
number
row2
number
rowSpan
number
topRow
number
Methods
Wijmo 5
April 2015
101/535
Name
Parameters
Description
clone()
contains(r, c)
Returns: boolean
containsRow(r) r (number): The index of the row to find.
Returns: boolean
equals(rng)
Returns: boolean
getRenderSize
(panel)
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)
Properties
Name
Type
Description
boolean
cellRange
CellRange
col
number
F cancel
SF empty
panel
GridPanel
row
number
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
align
string
allowDragging
boolean
allowMerging
boolean
allowResizing
boolean
allowSorting
boolean
Gets or sets a value indicating whether the user can sort the
column by clicking its header.
binding
string
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.
(inherited from RowCol).
currentSort
string
dataMap
DataMap
dataType
DataType
format
string
grid
FlexGrid
header
string
index
number
inputType
string
isContentHtml
Wijmo 5
boolean
April 2015
105/535
Name
Type
Description
isReadOnly
boolean
isSelected
boolean
isVisible
boolean
string
maxWidth
number
minWidth
number
name
string
pos
number
renderSize
number
renderWidth
number
required
boolean
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
sortMemberPath
string
visible
boolean
width
any
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
Methods
Name
Parameters
Description
getAlignment()
onPropertyChanged
()
Wijmo 5
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
firstVisibleIndex
frozen
Description
number
maxSize
number
minSize
number
Methods
Name
Parameters
Description
beginUpdate()
Wijmo 5
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)
deferUpdate(fn)
Returns: void
getColumn(name)
position (number): Position of the item Gets the index of the element at a
in the collection, in pixels.
given physical position.
(inherited from RowColCollection).
Returns: number
getNextCell(index,
move, pageSize)
Wijmo 5
April 2015
110/535
Name
Parameters
Description
insert(index, item)
Returns: void
isFrozen(index)
Returns: boolean
moveElement(src,
dst)
Returns: void
onCollectionChanged e ()
(e)
(default value: wijmo.collections.
NotifyCollectionChangedEventArgs.
reset)
Returns: void
push(item)
Wijmo 5
April 2015
111/535
Name
Parameters
Description
removeAt(index)
setAt(index, item)
Returns: void
slice(begin, end)
sort(compareFn)
splice(index, count,
item)
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)
Properties
Name
Type
Description
collectionView
displayMemberPath
string
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
getDisplayValues
()
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()
onMapChanged
()
Events
Name
Arguments
Description
mapChanged
EventArgs
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').
options (): JavaScript object containing
initialization data for the control.
Returns: void
Properties
Name
Type
Description
activeEditor
allowAddNew
boolean
allowDelete
boolean
allowDragging
AllowDragging
allowMerging
AllowMerging
Wijmo 5
April 2015
115/535
Name
Type
Description
allowResizing
AllowResizing
allowSorting
boolean
autoClipboard
boolean
autoSizeMode
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
cells
GridPanel
childItemsPath
string
Wijmo 5
April 2015
116/535
Name
Type
Description
clientSize
Size
collectionView
ICollectionView
columnHeaders
GridPanel
columnLayout
string
columns
ColumnCollection
controlRect
Rect
deferResizing
boolean
editRange
CellRange
frozenColumns
number
frozenRows
number
groupHeaderFormat
string
Wijmo 5
April 2015
117/535
Name
Type
Description
HeadersVisibility
hostElement
HTMLElement
isReadOnly
boolean
Gets or whether the user can edit the grid cells by typing
into them.
isTouching
boolean
isUpdating
boolean
itemFormatter
Function
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
...
}
any
mergeManager
MergeManager
rowHeaders
GridPanel
rows
RowCollection
scrollPosition
Point
scrollSize
Size
selection
CellRange
selectionMode
SelectionMode
showGroups
boolean
showSort
boolean
Wijmo 5
April 2015
119/535
Name
Type
Description
sortRowIndex
number
topLeftCells
GridPanel
treeIndent
number
viewRange
CellRange
Methods
Name
Parameters
Description
Wijmo 5
April 2015
120/535
Name
Parameters
Description
spacing, in pixels.
(default value: 4)
Returns: void
autoSizeColumns
(firstColumn, lastColumn,
header, extra)
Returns: void
autoSizeRow(r, header,
extra)
autoSizeRows(firstRow,
lastRow, header, extra)
beginUpdate()
Wijmo 5
April 2015
121/535
Name
Parameters
Description
collapseGroupsToLevel
(level)
Returns: void
containsFocus()
deferUpdate(fn)
endUpdate()
finishEditing(cancel)
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
that contains the cell.
scrollable area of the grid.
c (number): Index of the
column that contains the cell.
formatted (boolean):
Whether to format the value
for display.
Returns: any
getClipString(rng)
S getControl(element)
Returns: string
getTemplate()
Wijmo 5
April 2015
123/535
Name
Parameters
Description
the ComboBox control, it will override
the template defined by the DropDown
base class.
Returns: A HitTestInfo
object with information about
wijmo.grid.CellType[ht.cellType] +
the point.
'".');
});
initialize(options)
Returns: void
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.
Wijmo 5
April 2015
124/535
Name
Parameters
Description
contains unknown property names or
invalid data types, this method will throw.
fullUpdate (boolean):
Whether to update the
control layout as well as the
content.
(default value: true)
Returns: void
S invalidateAll(e)
Returns: boolean
onAutoSizedColumn(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
Wijmo 5
April 2015
125/535
Name
Parameters
Description
onAutoSizedRow(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onAutoSizingColumn(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: boolean
onAutoSizingRow(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: boolean
onBeginningEdit(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onCellEditEnding(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: True if the event
was not canceled.
Wijmo 5
April 2015
126/535
Name
Parameters
Description
onCopied(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onCopying(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onDraggedColumn(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onDraggedRow(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onDraggingColumn(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
e (FormatItemEventArgs):
FormatItemEventArgs that
contains the event data.
Returns: void
Wijmo 5
April 2015
127/535
Name
Parameters
Description
onGroupCollapsedChanged e (CellRangeEventArgs):
(e)
CellRangeEventArgs that
contains the event data.
Returns: void
onGroupCollapsedChanging e (CellRangeEventArgs):
(e)
CellRangeEventArgs that
contains the event data.
Returns: void
onLoadingRows(e)
e (CancelEventArgs)
Returns: void
onPasted(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onPasting(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onResizedColumn(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onResizedRow(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
Wijmo 5
April 2015
128/535
Name
Parameters
Description
onResizingColumn(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onRowEditEnded(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onRowEditEnding(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Returns: void
onScrollPositionChanged()
onSelectionChanged(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
Wijmo 5
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
April 2015
129/535
Name
Parameters
Description
Returns: void
onSortingColumn(e)
e (CellRangeEventArgs):
CellRangeEventArgs that
contains the event data.
fullUpdate (boolean):
Whether to update the grid
layout and content, or just
the content.
(default value: true)
Returns: void
refreshCells(fullUpdate,
recycle, cells)
fullUpdate (boolean):
Refreshes the grid display.
Whether to update the grid
layout and content, or just
the content.
recycle (boolean): Whether
to recycle existing elements.
(default value: false)
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.
c (number): Index of the
column to scroll into view.
Returns: True if the grid
scrolled.
select(rng, show)
setCellData(r, c, value,
coerce)
Wijmo 5
r (number): Index of the row Sets the value of a cell in the scrollable
that contains the cell.
area of the grid.
c (any): Index, name, or
binding of the column that
contains the cell.
April 2015
130/535
Name
Parameters
Description
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)
Events
Wijmo 5
April 2015
131/535
Name
Arguments
Description
autoSizedColumn
CellRangeEventArgs
autoSizedRow
CellRangeEventArgs
autoSizingColumn
CellRangeEventArgs
autoSizingRow
CellRangeEventArgs
beginningEdit
CellRangeEventArgs
cellEditEnded
CellRangeEventArgs
cellEditEnding
CellRangeEventArgs
copied
CellRangeEventArgs
copying
CellRangeEventArgs
deletingRow
CellRangeEventArgs
draggedColumn
CellRangeEventArgs
draggedRow
CellRangeEventArgs
draggingColumn
CellRangeEventArgs
draggingRow
CellRangeEventArgs
Wijmo 5
April 2015
132/535
Name
Arguments
Description
formatItem
FormatItemEventArgs
groupCollapsedChanged CellRangeEventArgs
groupCollapsedChanging CellRangeEventArgs
itemsSourceChanged
EventArgs
loadedRows
EventArgs
loadingRows
CancelEventArgs
pasted
CellRangeEventArgs
pasting
CellRangeEventArgs
Wijmo 5
April 2015
133/535
Name
Arguments
Description
prepareCellForEdit
CellRangeEventArgs
resizedColumn
CellRangeEventArgs
resizedRow
CellRangeEventArgs
resizingColumn
CellRangeEventArgs
resizingRow
CellRangeEventArgs
rowAdded
CellRangeEventArgs
rowEditEnded
CellRangeEventArgs
rowEditEnding
CellRangeEventArgs
scrollPositionChanged
EventArgs
selectionChanged
CellRangeEventArgs
selectionChanging
CellRangeEventArgs
sortedColumn
CellRangeEventArgs
sortingColumn
CellRangeEventArgs
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
Initializes a new instance of a
(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
cell
HTMLElement
cellRange
CellRange
col
number
F cancel
SF empty
panel
GridPanel
row
number
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
columns
grid
FlexGrid
height
number
hostElement
HTMLElement
rows
RowCollection
viewRange
CellRange
width
number
Methods
Name
Parameters
Description
Wijmo 5
April 2015
136/535
Name
Parameters
Description
coordinates. The viewport coordinates
are the same as those used by the
getBoundingClientRect method.
getCellData(r, c,
formatted)
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()
Properties
Name
Type
Description
allowDragging
boolean
allowMerging
boolean
allowResizing
boolean
cssClass
string
Gets or sets a CSS class name to use when rendering nonheader cells in the row or column.
(inherited from RowCol).
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
index
number
Wijmo 5
April 2015
138/535
Name
Type
Description
isCollapsed
boolean
isContentHtml
boolean
isReadOnly
boolean
isSelected
boolean
isVisible
boolean
number
pos
number
renderHeight
number
number
size
number
visible
boolean
wordWrap
boolean
Wijmo 5
April 2015
139/535
Methods
Name
Parameters
Description
getCellRange()
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)
Returns: void
Properties
Name
Type
Description
cellRange
CellRange
cellType
CellType
col
number
edgeBottom
boolean
edgeLeft
boolean
edgeRight
boolean
edgeTop
boolean
gridPanel
GridPanel
point
Point
row
number
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)
Returns: void
Methods
Name
Parameters
Description
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
Gets or sets a CSS class name to use when rendering nonheader cells in the row or column.
(inherited from RowCol).
dataItem
any
Gets or sets the item in the data collection that the item is
bound to.
grid
FlexGrid
height
number
index
number
isContentHtml
boolean
isReadOnly
boolean
Wijmo 5
April 2015
143/535
Name
Type
Description
isSelected
boolean
isVisible
boolean
number
renderHeight
number
renderSize
number
size
number
visible
boolean
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
Gets or sets a CSS class name to use when rendering nonheader cells in the row or column.
grid
FlexGrid
index
number
isContentHtml
boolean
isReadOnly
boolean
isSelected
boolean
isVisible
boolean
pos
number
renderSize
number
size
number
visible
boolean
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)
Returns: void
Properties
Name
Type
F collectionChanged
Description
Occurs when the collection changes.
(inherited from ObservableArray).
defaultSize
number
frozen
number
isUpdating
maxSize
number
minSize
number
Methods
Name
Parameters
Description
beginUpdate()
Wijmo 5
April 2015
147/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
move the element, or specify -1 to
append the element.
Returns: Returns true if the move is
valid, false otherwise.
clear()
deferUpdate(fn)
Returns: void
getItemAt(position)
getNextCell(index,
move, pageSize)
Returns: void
getTotalSize()
Wijmo 5
April 2015
148/535
Name
Parameters
Description
Returns: void
isFrozen(index)
Returns: boolean
moveElement(src,
dst)
Returns: void
onCollectionChanged e ()
(e)
(default value: wijmo.collections.
NotifyCollectionChangedEventArgs.
reset)
Returns: void
push(item)
setAt(index, item)
Returns: void
slice(begin, end)
Wijmo 5
April 2015
149/535
Name
Parameters
Description
splice(index, count,
item)
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
Occurs when the collection changes.
(inherited from ObservableArray).
defaultSize
number
frozen
number
maxGroupLevel
number
maxSize
number
minSize
number
Methods
Name
Parameters
Description
beginUpdate()
Wijmo 5
April 2015
151/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)
deferUpdate(fn)
Returns: void
getItemAt(position)
position (number): Position of the item Gets the index of the element at a
in the collection, in pixels.
given physical position.
(inherited from RowColCollection).
Returns: number
getNextCell(index,
move, pageSize)
Returns: void
getTotalSize()
Wijmo 5
April 2015
152/535
Name
Parameters
Description
insert(index, item)
Returns: void
isFrozen(index)
Returns: boolean
moveElement(src,
dst)
Returns: void
onCollectionChanged e ()
(e)
(default value: wijmo.collections.
NotifyCollectionChangedEventArgs.
reset)
Returns: void
push(item)
Wijmo 5
April 2015
153/535
Name
Parameters
Description
setAt(index, item)
Returns: void
slice(begin, end)
sort(compareFn)
splice(index, count,
item)
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
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
AllHeaders
Cells
No merging.
RowHeaders
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
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
Cells
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
RowHeader
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
Row
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
AllowResizing
AllowSorting
The column can be sorted by clicking its header with the mouse.
RowDefault
Selected
Visible
WordWrap
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
None
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
None
Row
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
Home
Next
Prev
PrevCell
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
ColumnFilterEditor
ConditionFilter
FlexGridFilter
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
ValueFilterEditor
Wijmo 5
April 2015
166/535
Interfaces
Name
Description
Wijmo 5
April 2015
167/535
Enumerations
Name
Description
Wijmo 5
April 2015
168/535
ColumnFilter Class
Implements
IColumnFilter
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
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.
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
conditionFilter
filterType
FilterType
isActive
boolean
valueFilter
ValueFilter
Methods
Name
Parameters
Description
apply(value)
Returns: boolean
clear()
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
wijmo.grid.filter.js
The editor used to inspect and modify column filters.
This class is used by the FlexGridFilter class; you rarely use it directly.
Constructor
Name
Parameters
Description
constructor
(element, filter,
sortButtons)
Properties
Name
Type
Description
any
filter
ColumnFilter
hostElement
HTMLElement
isTouching
boolean
isUpdating
boolean
SF controlTemplate
Methods
Name
Parameters
applyTemplate
(classNames,
template, parts,
namePart)
Wijmo 5
Description
April 2015
171/535
Name
Parameters
Description
Returns: HTMLElement
containsFocus()
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.
endUpdate()
Wijmo 5
April 2015
172/535
Name
Parameters
Description
focus()
S getControl
(element)
Returns: Control
getTemplate()
Returns: void
Wijmo 5
April 2015
173/535
Name
Parameters
Description
contains unknown property names or
invalid data types, this method will throw.
S invalidateAll(e)
updateEditor()
updateFilter()
Events
Wijmo 5
April 2015
174/535
Name
Arguments
Description
filterChanged
EventArgs
Wijmo 5
April 2015
175/535
ConditionFilter Class
Implements
IColumnFilter
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
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)
Returns: void
Properties
Name
Type
Description
and
boolean
column
Column
condition1
condition2
isActive
boolean
Methods
Name
Parameters
Description
apply(value)
Returns: boolean
clear()
Returns: boolean
Wijmo 5
April 2015
176/535
ConditionFilterEditor Class
Base Class
Control
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
The editor used to inspect and modify ConditionFilter objects.
This class is used by the FlexGridFilter class; you rarely use it directly.
Constructor
Name
Parameters
Description
constructor
(element, filter)
Properties
Name
SF controlTemplate
Type
Description
any
filter
hostElement
HTMLElement
isTouching
boolean
isUpdating
boolean
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Wijmo 5
April 2015
177/535
Name
Parameters
Description
Returns: HTMLElement
containsFocus()
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.
endUpdate()
focus()
Wijmo 5
April 2015
178/535
Name
S getControl
(element)
Parameters
Description
Returns: Control
getTemplate()
Returns: void
Wijmo 5
April 2015
179/535
Name
Parameters
Description
(inherited from Control).
invalidate
(fullUpdate)
updateEditor()
updateFilter()
Wijmo 5
April 2015
180/535
FilterCondition Class
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
Defines a filter condition.
This class is used by the FlexGridFilter class; you rarely use it directly.
Properties
Name
Type
Description
operator
Operator
value
any
Methods
Name
Parameters
Description
apply(value)
Returns: boolean
Wijmo 5
April 2015
181/535
FlexGridFilter Class
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
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)
Returns: void
Properties
Name
Type
Description
defaultFilterType
FilterType
grid
FlexGrid
showFilterIcons
boolean
Wijmo 5
April 2015
182/535
Name
Type
Description
showSortButtons
boolean
Methods
Name
Parameters
Description
apply()
clear()
closeEditor()
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.
(default value: true)
Returns: ColumnFilter
onFilterApplied
()
Events
Name
Arguments
Description
filterApplied
EventArgs
Wijmo 5
April 2015
183/535
ValueFilter Class
Implements
IColumnFilter
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
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)
Returns: void
Properties
Name
Type
Description
column
Column
filterText
string
isActive
boolean
showValues
any
Methods
Name
Parameters
Description
apply(value)
Returns: boolean
clear()
Returns: boolean
Wijmo 5
April 2015
184/535
ValueFilterEditor Class
Base Class
Control
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
The editor used to inspect and modify ValueFilter objects.
This class is used by the FlexGridFilter class; you rarely use it directly.
Constructor
Name
Parameters
Description
constructor
(element, filter)
Properties
Name
Type
Description
any
filter
ValueFilter
hostElement
HTMLElement
isTouching
boolean
isUpdating
boolean
SF controlTemplate
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Wijmo 5
April 2015
185/535
Name
Parameters
Description
Returns: HTMLElement
containsFocus()
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.
endUpdate()
focus()
Wijmo 5
April 2015
186/535
Name
S getControl
(element)
Parameters
Description
Returns: Control
getTemplate()
Returns: void
Wijmo 5
April 2015
187/535
Name
Parameters
Description
(inherited from Control).
invalidate
(fullUpdate)
updateEditor()
updateFilter()
Wijmo 5
April 2015
188/535
IColumnFilter Class
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
Defines a filter for a column on a FlexGrid control.
This class is used by the FlexGridFilter class; you rarely use it directly.
Wijmo 5
April 2015
189/535
FilterType Enum
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
Specifies types of column filter.
Values
Name
Description
Both
No filter.
Value
Wijmo 5
April 2015
190/535
Operator Enum
Module
wijmo.grid.filter
File
wijmo.grid.filter.js
Specifies filter condition operators.
Values
Name Description
BW
Begins with.
CT
Contains.
EQ
Equals.
EW
Ends with.
GE
GT
Greater than.
LE
LT
Less than.
NC
NE
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)
Properties
Name
SF controlTemplate
grid
Type
Description
any
FlexGrid
Wijmo 5
April 2015
194/535
Name
Type
Description
hideGroupedColumns
boolean
hostElement
HTMLElement
isTouching
boolean
isUpdating
boolean
maxGroups
number
placeholder
string
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Returns: HTMLElement
Wijmo 5
April 2015
195/535
Name
Parameters
Description
beginUpdate()
containsFocus()
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.
endUpdate()
focus()
S getControl
(element)
Returns: Control
getTemplate()
Wijmo 5
April 2015
196/535
Name
Parameters
Description
Returns: void
Wijmo 5
April 2015
197/535
Name
Parameters
Description
container and call the invalidateAll
method so the contained Wijmo controls
will update their layout information
properly.
Wijmo 5
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
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
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.
Use the value property to get or set the currently selected color.
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.
#
Letter.
l
Letter or space.
A
Alphanumeric.
a
Alphanumeric or space.
.
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)
Properties
Name
Type
Description
collectionView
ICollectionView
any
string
SF controlTemplate
cssMatch
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:
<!-- css style for highlighting matches -->
.match {
background-color: yellow;
color:black;
}
// assign css style to cssMatch property
autoComplete.cssMatch = 'match';
delay
number
displayMemberPath
string
dropDown
HTMLElement
hostElement
HTMLElement
inputElement
boolean
isDroppedDown
boolean
isEditable
boolean
isTouching
boolean
Wijmo 5
April 2015
206/535
Name
Type
Description
isUpdating
boolean
itemFormatter
Function
any
itemsSourceFunction
Function
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
maxDropDownWidth
number
maxItems
number
minLength
number
placeholder
string
required
boolean
selectedIndex
number
selectedItem
any
selectedValue
any
selectedValuePath
string
showDropDownButton boolean
text
string
Methods
Name
Parameters
Description
Wijmo 5
April 2015
208/535
Name
Parameters
Description
Returns: HTMLElement
containsFocus()
deferUpdate(fn)
fn (Function): Function to be
executed.
Returns: void
endUpdate()
Wijmo 5
April 2015
209/535
Name
Parameters
Description
focus()
S getControl(element)
Returns: Control
getDisplayText(index)
Returns: string
getTemplate()
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)
Wijmo 5
April 2015
210/535
Name
Parameters
Description
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.
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
Wijmo 5
April 2015
211/535
Name
Parameters
Description
update their layout information
properly.
Raises the
isDroppedDownChanged event.
(inherited from DropDown).
onSelectedIndexChanged
(e)
e (EventArgs)
Returns: void
onTextChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)
selectAll()
Events
Name
Arguments
Description
isDroppedDownChanged EventArgs
selectedIndexChanged
EventArgs
textChanged
EventArgs
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)
Properties
Name
Type
Description
SF controlTemplate
any
displayMonth
Date
firstDayOfWeek
number
Wijmo 5
April 2015
213/535
Name
Type
Description
hostElement
HTMLElement
isTouching
boolean
isUpdating
boolean
itemFormatter
Function
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
showHeader
boolean
value
Date
Methods
Name
Parameters
Description
applyTemplate
(classNames, template,
parts, namePart)
Wijmo 5
April 2015
214/535
Name
Parameters
Description
Returns: HTMLElement
containsFocus()
deferUpdate(fn)
fn (Function): Function to be
executed.
Returns: void
Wijmo 5
April 2015
215/535
Name
Parameters
Description
endUpdate()
focus()
S getControl(element)
Returns: Control
getTemplate()
Returns: void
Wijmo 5
April 2015
216/535
Name
Parameters
Description
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.
Returns: void
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
onValueChanged(e)
e (EventArgs)
Returns: void
Wijmo 5
April 2015
217/535
Name
Parameters
Description
refresh(fullUpdate)
Events
Name
Arguments
Description
displayMonthChanged EventArgs
valueChanged
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).
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
Constructor
Name
Parameters
Description
constructor
(element,
options)
Properties
Name
Type
Description
any
hostElement
HTMLElement
isTouching
boolean
isUpdating
boolean
palette
string
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
showColorString
boolean
value
string
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Returns: HTMLElement
containsFocus()
Wijmo 5
April 2015
220/535
Name
Parameters
Description
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.
endUpdate()
focus()
S getControl
(element)
Returns: Control
getTemplate()
Wijmo 5
April 2015
221/535
Name
Parameters
Description
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.
S invalidateAll(e)
Wijmo 5
April 2015
222/535
Name
Parameters
Description
will update their layout information
properly.
Events
Name
Arguments
Description
valueChanged
EventArgs
Wijmo 5
April 2015
223/535
ComboBox Class
Base Class
DropDown
Derived Classes
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)
Properties
Name
Type
Description
collectionView
ICollectionView
Wijmo 5
April 2015
224/535
Name
Type
Description
any
displayMemberPath
string
dropDown
HTMLElement
hostElement
HTMLElement
inputElement
SF controlTemplate
boolean
isDroppedDown
boolean
isEditable
boolean
isTouching
boolean
isUpdating
boolean
itemFormatter
Function
Wijmo 5
April 2015
225/535
Name
Type
Description
content = '<b>' + content + '</b>';
}
return content;
}
itemsSource
any
maxDropDownHeight number
maxDropDownWidth
number
placeholder
string
required
boolean
selectedIndex
number
selectedItem
any
selectedValue
any
selectedValuePath
string
showDropDownButton boolean
text
string
Methods
Name
Parameters
Description
Wijmo 5
April 2015
226/535
Name
Parameters
Description
with the 'wj-part' attribute set to
'input', 'btn-inc', and 'btn-dec'. 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');
containsFocus()
deferUpdate(fn)
fn (Function): Function to be
executed.
Returns: void
endUpdate()
focus()
S getControl(element)
Wijmo 5
April 2015
227/535
Name
Parameters
Description
Returns: Control
getDisplayText(index)
Returns: string
getTemplate()
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
match or just the start of the string.
Returns: The index of the item, or -1
if not found.
initialize(options)
Wijmo 5
April 2015
228/535
Name
Parameters
Description
grid.autoGenerateColumns = false;
// etc.
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
Wijmo 5
Raises the
isDroppedDownChanged event.
(inherited from DropDown).
April 2015
229/535
Name
Parameters
Description
onSelectedIndexChanged
(e)
e (EventArgs)
Returns: void
onTextChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)
selectAll()
Events
Name
Arguments
Description
isDroppedDownChanged EventArgs
selectedIndexChanged
EventArgs
textChanged
EventArgs
Wijmo 5
April 2015
230/535
DropDown Class
Base Class
Control
Derived Classes
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)
Properties
Name
Type
Description
any
dropDown
HTMLElement
hostElement
HTMLElement
inputElement
SF controlTemplate
Wijmo 5
boolean
April 2015
231/535
Name
Type
Description
isTouching
boolean
isUpdating
boolean
placeholder
string
showDropDownButton boolean
text
string
Methods
Name
Parameters
Description
Wijmo 5
April 2015
232/535
Name
Parameters
Description
containsFocus()
deferUpdate(fn)
Returns: void
endUpdate()
focus()
S getControl(element)
Returns: Control
getTemplate()
Wijmo 5
April 2015
233/535
Name
Parameters
Description
initialize(options)
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
Wijmo 5
April 2015
234/535
Name
Parameters
Description
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.
Raises the
isDroppedDownChanged event.
onTextChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)
selectAll()
Events
Name
Arguments
Description
isDroppedDownChanged EventArgs
textChanged
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.
Use the value property to get or set the currently selected color.
Live Example
Constructor
Name
Parameters
Description
constructor
(element,
options)
Properties
Name
Type
Description
colorPicker
ColorPicker
any
dropDown
HTMLElement
hostElement
HTMLElement
inputElement
SF controlTemplate
Wijmo 5
April 2015
236/535
Name
Type
Description
isDroppedDown
boolean
isTouching
boolean
isUpdating
boolean
placeholder
string
required
boolean
showAlphaChannel
boolean
showDropDownButton boolean
text
string
value
string
Methods
Name
Parameters
Description
Wijmo 5
April 2015
237/535
Name
Parameters
Description
and '_btnDn' will be assigned
references to these elements.
this.applyTemplate('wj-control wjinputnumber', template, {
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
containsFocus()
deferUpdate(fn)
fn (Function): Function to be
executed.
Returns: void
endUpdate()
focus()
S getControl(element)
Returns: Control
Wijmo 5
April 2015
238/535
Name
Parameters
Description
getTemplate()
Wijmo 5
April 2015
239/535
Name
Parameters
Description
invalidate(fullUpdate)
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
Raises the
isDroppedDownChanged event.
(inherited from DropDown).
onTextChanged(e)
e (EventArgs)
Returns: void
onValueChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)
Wijmo 5
April 2015
240/535
Name
Parameters
Description
Returns: void
selectAll()
Events
Name
Arguments
Description
isDroppedDownChanged EventArgs
textChanged
EventArgs
valueChanged
EventArgs
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)
Properties
Name
Type
Description
calendar
Calendar
any
HTMLElement
SF controlTemplate
dropDown
Wijmo 5
April 2015
242/535
Name
Type
Description
format
string
hostElement
HTMLElement
inputElement
boolean
isTouching
boolean
isUpdating
boolean
mask
string
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
required
boolean
showDropDownButton boolean
text
Wijmo 5
string
April 2015
243/535
Name
Type
Description
value
Date
Methods
Name
Parameters
Description
containsFocus()
deferUpdate(fn)
Wijmo 5
fn (Function): Function to be
executed.
Returns: void
April 2015
244/535
Name
Parameters
Description
endUpdate is called even if the
function throws.
endUpdate()
focus()
S getControl(element)
Returns: Control
getTemplate()
Wijmo 5
April 2015
245/535
Name
Parameters
Description
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.
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
Wijmo 5
April 2015
246/535
Name
Parameters
Description
update their layout information
properly.
Raises the
isDroppedDownChanged event.
(inherited from DropDown).
onTextChanged(e)
e (EventArgs)
Returns: void
onValueChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)
selectAll()
Events
Name
Arguments
Description
isDroppedDownChanged EventArgs
textChanged
EventArgs
valueChanged
EventArgs
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.
#
Letter.
l
Letter or space.
A
Alphanumeric.
a
Alphanumeric or space.
.
Wijmo 5
April 2015
248/535
Literals.
Constructor
Name
Parameters
Description
constructor
(element,
options)
Properties
Name
Type
Description
any
hostElement
HTMLElement
inputElement
SF controlTemplate
boolean
isUpdating
boolean
mask
string
maskFull
boolean
placeholder
string
promptChar
string
value
string
Methods
Wijmo 5
April 2015
249/535
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Returns: HTMLElement
containsFocus()
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.
Wijmo 5
April 2015
250/535
Name
Parameters
Description
endUpdate()
focus()
S getControl
(element)
Returns: Control
getTemplate()
Wijmo 5
April 2015
251/535
Name
Parameters
Description
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.
S invalidateAll(e)
Wijmo 5
April 2015
252/535
Name
Parameters
Description
selectAll()
Events
Name
Arguments
Description
valueChanged
EventArgs
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)
Properties
Name
SF controlTemplate
format
Type
Description
any
string
hostElement
Wijmo 5
HTMLElement
April 2015
254/535
Name
Type
Description
inputElement
inputType
string
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
required
boolean
showSpinner
boolean
step
number
text
string
value
number
Methods
Name
Parameters
applyTemplate
(classNames,
template, parts,
namePart)
Wijmo 5
Description
April 2015
255/535
Name
Parameters
Description
Returns: HTMLElement
containsFocus()
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.
endUpdate()
Wijmo 5
April 2015
256/535
Name
Parameters
Description
focus()
S getControl
(element)
Returns: Control
getTemplate()
Wijmo 5
April 2015
257/535
Name
Parameters
Description
invalid data types, this method will
throw.
S invalidateAll(e)
onValueChanged e (EventArgs)
(e)
Returns: void
refresh
(fullUpdate)
selectAll()
Wijmo 5
April 2015
258/535
Events
Name
Arguments
Description
textChanged
EventArgs
valueChanged
EventArgs
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.
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
Constructor
Name
Parameters
Description
constructor
(element,
options)
Properties
Name
Type
Description
collectionView
ICollectionView
any
string
SF controlTemplate
displayMemberPath
Wijmo 5
April 2015
260/535
Name
Type
Description
dropDown
HTMLElement
format
string
hostElement
HTMLElement
inputElement
boolean
isDroppedDown
boolean
isEditable
boolean
isTouching
boolean
isUpdating
boolean
itemFormatter
Function
Wijmo 5
April 2015
261/535
Name
Type
Description
function customItemFormatter(index, content) {
if (this.makeItemBold(index)) {
content = '<b>' + content + '</b>';
}
return content;
}
any
mask
string
max
Date
Gets or sets the latest time that the user can enter.
maxDropDownHeight number
maxDropDownWidth
number
min
Date
Gets or sets the earliest time that the user can enter.
placeholder
string
required
boolean
selectedIndex
number
selectedItem
any
selectedValue
any
selectedValuePath
string
Wijmo 5
April 2015
262/535
Name
Type
Description
showDropDownButton boolean
step
number
text
string
value
Date
Methods
Name
Parameters
Description
containsFocus()
Wijmo 5
April 2015
263/535
Name
Parameters
Description
deferUpdate(fn)
fn (Function): Function to be
executed.
Returns: void
endUpdate()
focus()
S getControl(element)
Returns: Control
getDisplayText(index)
Returns: string
getTemplate()
Wijmo 5
April 2015
264/535
Name
Parameters
Description
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)
S invalidateAll(e)
Wijmo 5
e (HTMLElement): Container
element. If set to null, all Wijmo
April 2015
265/535
Name
Parameters
Description
Returns: void
Raises the
isDroppedDownChanged event.
(inherited from DropDown).
onSelectedIndexChanged
(e)
e (EventArgs)
Returns: void
onTextChanged(e)
e (EventArgs)
Returns: void
onValueChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)
selectAll()
Events
Wijmo 5
April 2015
266/535
Name
Arguments
Description
isDroppedDownChanged EventArgs
selectedIndexChanged
EventArgs
textChanged
EventArgs
valueChanged
EventArgs
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)
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
April 2015
268/535
Name
Type
Description
any
displayMemberPath
string
hostElement
HTMLElement
isContentHtml
boolean
isTouching
boolean
isUpdating
boolean
itemFormatter
Function
SF controlTemplate
itemsSource
any
maxHeight
number
selectedIndex
number
selectedItem
any
selectedValue
any
selectedValuePath
string
Methods
Wijmo 5
April 2015
269/535
Name
Parameters
Description
applyTemplate
(classNames, template,
parts, namePart)
Returns: HTMLElement
containsFocus()
deferUpdate(fn)
fn (Function): Function to be
executed.
Returns: void
Wijmo 5
April 2015
270/535
Name
Parameters
Description
element.
(inherited from Control).
endUpdate()
focus()
S getControl(element)
Returns: Control
getDisplayText(index)
Returns: string
getDisplayValue(index)
Returns: string
getTemplate()
Wijmo 5
Returns: void
April 2015
271/535
Name
Parameters
Description
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.
Returns: void
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
Wijmo 5
April 2015
272/535
Name
Parameters
Description
controls will update their layout
information properly.
e (EventArgs)
Returns: void
onItemsChanged(e)
e (EventArgs)
Returns: void
onSelectedIndexChanged e (EventArgs)
(e)
Returns: void
refresh()
showSelection()
Events
Name
Arguments
Description
itemChecked
EventArgs
itemsChanged
EventArgs
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)
Properties
Name
Type
Description
collectionView
ICollectionView
Wijmo 5
April 2015
274/535
Name
Type
Description
command
any
commandPath
string
SF controlTemplate
any
displayMemberPath
string
dropDown
HTMLElement
header
string
hostElement
HTMLElement
Wijmo 5
April 2015
275/535
Name
Type
Description
inputElement
boolean
// 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.
(inherited from ComboBox).
isDroppedDown
boolean
isEditable
boolean
isTouching
boolean
isUpdating
boolean
itemFormatter
Function
Wijmo 5
April 2015
277/535
Name
Type
Description
(inherited from ComboBox).
itemsSource
any
maxDropDownHeight
number
maxDropDownWidth
number
placeholder
string
required
boolean
selectedIndex
number
selectedItem
any
selectedValue
any
selectedValuePath
string
showDropDownButton
boolean
text
string
Methods
Name
Parameters
Description
Wijmo 5
April 2015
278/535
Name
Parameters
Description
Returns: HTMLElement
containsFocus()
deferUpdate(fn)
fn (Function): Function to be
executed.
Returns: void
Wijmo 5
April 2015
279/535
Name
Parameters
Description
endUpdate()
focus()
S getControl(element)
Returns: Control
getDisplayText(index)
Returns: string
getTemplate()
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)
Wijmo 5
April 2015
280/535
Name
Parameters
Description
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.
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
Wijmo 5
April 2015
281/535
Name
Parameters
Description
invalidateAll method so the
contained Wijmo controls will
update their layout information
properly.
Raises the
isDroppedDownChanged event.
(inherited from DropDown).
onItemClicked(e)
e (EventArgs)
Returns: void
onSelectedIndexChanged
(e)
e (EventArgs)
Returns: void
onTextChanged(e)
e (EventArgs)
Returns: void
refresh(fullUpdate)
selectAll()
Events
Name
Arguments
Description
isDroppedDownChanged EventArgs
itemClicked
EventArgs
Wijmo 5
EventArgs
April 2015
282/535
Name
Arguments
Description
textChanged
EventArgs
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
AxisCollection
ChartTooltip
DataLabel
DataLabelBase
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
Legend
LineMarker
Palettes
Wijmo 5
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;
PieDataLabel
standard (default)
cocoa
coral
dark
highcontrast
light
midnight
minimal
modern
organic
slate
Wijmo 5
April 2015
286/535
Interfaces
Name
Description
Wijmo 5
April 2015
287/535
Enumerations
Name
Description
AxisType
ChartElement
The enumerated type of chart element that may be found by the hitTest
method.
ChartType
LabelPosition
Marker
Specifies the type of marker to use for the symbolMarker property. Applies to
Scatter, LineSymbols, and SplineSymbols chart types.
OverlappingLabels
PieLabelPosition
Position
SelectionMode
SeriesVisibility
Stacking
TickMark
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)
Returns: void
Properties
Name
Type
Description
actualMax
number
actualMin
number
axisLine
boolean
axisType
AxisType
binding
string
format
string
Gets or sets the format string used for axis labels (see
Globalize).
itemFormatter
Function
Wijmo 5
April 2015
289/535
Name
Type
Description
o
o
itemsSource
any
labelAngle
number
labels
boolean
logBase
number
majorGrid
boolean
majorTickMarks
TickMark
majorUnit
number
max
number
min
number
Wijmo 5
April 2015
290/535
Name
Type
Description
minorGrid
boolean
minorTickMarks
TickMark
minorUnit
number
name
string
origin
number
overlappingLabels
position
Position
reversed
boolean
title
string
Methods
Name
Parameters
Description
convert(val)
Returns: number
convertBack(val)
Returns: number
onRangeChanged
()
Events
Name
Arguments
Description
rangeChanged
EventArgs
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
Occurs when the collection changes.
(inherited from ObservableArray).
isUpdating
Methods
Name
Parameters
Description
beginUpdate()
clear()
constructor(data)
deferUpdate(fn)
Returns: void
Wijmo 5
April 2015
292/535
Name
Parameters
Description
getAxis(name)
Returns: void
onCollectionChanged e (): Contains a description of the
(e)
change.
(default value:
NotifyCollectionChangedEventArgs.
reset)
Returns: void
push(item)
setAt(index, item)
Returns: void
slice(begin, end)
Wijmo 5
April 2015
293/535
Name
Parameters
Description
splice(index, count,
item)
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()
Properties
Name
Type
Description
content
any
gap
number
Gets or sets the distance between the tooltip and the target
element.
(inherited from Tooltip).
hideDelay
number
isContentHtml
boolean
isVisible
boolean
showDelay
number
threshold
number
Methods
Name
Parameters
Description
hide()
onPopup(e)
Returns: void
Wijmo 5
April 2015
295/535
Name
Parameters
Description
setTooltip
(element,
content)
Returns: void
Events
Name
Arguments
Description
popup
EventArgs
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
content
any
Wijmo 5
April 2015
297/535
Name
Type
Description
});
chart.dataLabel.position = "Top";
chart.dataLabel.content = "{y}";
Wijmo 5
LabelPosition
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
content
any
Wijmo 5
April 2015
299/535
Name
Type
Description
chart.dataLabel.position = "Top";
chart.dataLabel.content = "{y}";
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.
element (e.g. '#theCtrl').
options (): A JavaScript object containing
initialization data for the control.
Returns: void
Properties
Name
Type
axes
axisX
Axis
axisY
Axis
binding
string
bindingX
string
chartType
ChartType
collectionView
dataLabel
DataLabel
Wijmo 5
Description
April 2015
301/535
Name
Type
Description
footer
string
footerStyle
any
header
string
headerStyle
any
hostElement
HTMLElement
interpolateNulls
boolean
isTouching
boolean
isUpdating
boolean
itemFormatter
Function
itemsSource
any
legend
Legend
legendToggle
boolean
options
any
Wijmo 5
April 2015
302/535
Name
Type
Description
}
palette
string
any
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;
// set the plot margin
chart.plotMargin = '10
// set the plot margin
(20px)
chart.plotMargin = '10
boolean
selection
Series
selectionMode
SelectionMode
series
stacking
Stacking
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
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;
Methods
Name
Parameters
Description
applyTemplate
(classNames, template,
parts, namePart)
Returns: HTMLElement
Wijmo 5
April 2015
305/535
Name
Parameters
Description
containsFocus()
dataToPoint(pt, y)
fn (Function): Function to be
executed.
Returns: void
endUpdate()
focus()
S getControl(element)
Returns: Control
getTemplate()
Wijmo 5
April 2015
306/535
Name
Parameters
Description
control, it will override the template
defined by the DropDown base
class.
initialize(options)
Returns: void
Wijmo 5
April 2015
307/535
Name
Parameters
Description
invalidate(fullUpdate)
Returns: void
S invalidateAll(e)
e (HTMLElement): Container
element. If set to null, all Wijmo
controls on the page will be
invalidated.
Returns: void
e (RenderEventArgs): The
RenderEventArgs object used to
render the chart.
Returns: void
onRendering(e)
e (RenderEventArgs): The
RenderEventArgs object used to
render the chart.
Returns: void
onSelectionChanged(e)
e (EventArgs)
Returns: void
Wijmo 5
April 2015
308/535
Name
Parameters
Description
refresh(fullUpdate)
Events
Name
Arguments
Description
rendered
EventArgs
rendering
EventArgs
selectionChanged
EventArgs
seriesVisibilityChanged SeriesEventArgs
Wijmo 5
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
collectionView
footer
string
footerStyle
any
header
string
headerStyle
any
hostElement
HTMLElement
isTouching
boolean
isUpdating
boolean
itemFormatter
Function
itemsSource
any
legend
Legend
palette
string
Wijmo 5
April 2015
310/535
Name
Type
Description
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)'];
plotMargin
any
selectionMode
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Wijmo 5
April 2015
311/535
Name
Parameters
Description
namePart (string): Name of the part to responsible for binding the template
be named after the host element. This
parts to the corresponding control
determines how the control submits data members.
when used in forms.
For example, the code below applies a
Returns: HTMLElement
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
references to these elements.
this.applyTemplate('wj-control wjinputnumber', template, {
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
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').
(inherited from Control).
options (): JavaScript object containing
initialization data for the control.
(default value: null)
invalidateOnResize (boolean): Whether
the control should be invalidated when it
is resized.
(default value: false)
Returns: void
containsFocus()
deferUpdate(fn)
Returns: void
The control will not be updated until the
function has been executed. This
Wijmo 5
April 2015
312/535
Name
Parameters
Description
method ensures endUpdate is called
even if the function throws.
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.
host element (e.g. '#theCtrl').
(inherited from Control).
Returns: Control
getTemplate()
Returns: void
Wijmo 5
April 2015
313/535
Name
Parameters
Description
{ binding: 'id', header: 'Code',
width: 130 },
{ binding: 'name', header: 'Name',
width: 60 }
]
});
// is equivalent to
grid.itemsSource = myList;
grid.autoGenerateColumns = false;
// etc.
Returns: void
S invalidateAll(e)
Wijmo 5
April 2015
314/535
Name
Parameters
Description
onRendered(e)
e (RenderEventArgs): The
Raises the rendered event.
RenderEventArgs object used to render
the chart.
Returns: void
onRendering(e)
e (RenderEventArgs): The
Raises the rendering event.
RenderEventArgs object used to render
the chart.
Returns: void
Events
Name
Arguments
Description
rendered
RenderEventArgs
rendering
RenderEventArgs
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)
Properties
Name
Type
Description
binding
string
collectionView
dataLabel
PieDataLabel
footer
string
footerStyle
any
header
string
headerStyle
any
hostElement
HTMLElement
innerRadius
number
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
isTouching
boolean
isUpdating
boolean
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
Wijmo 5
April 2015
317/535
Name
Type
Description
There is a set of predefined palettes in the Palettes class
that you can use, for example:
chart.palette = wijmo.chart.Palettes.coral;
any
boolean
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
Wijmo 5
April 2015
318/535
Name
Type
Description
selectionMode
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
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Returns: HTMLElement
containsFocus()
Returns: void
Wijmo 5
April 2015
319/535
Name
Parameters
Description
The control will not be updated until the
function has been executed. This method
ensures endUpdate is called even if the
function throws.
endUpdate()
focus()
S getControl
(element)
Returns: Control
getTemplate()
initialize
(options)
Wijmo 5
Returns: void
April 2015
320/535
Name
Parameters
Description
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.
Wijmo 5
April 2015
321/535
Name
Parameters
Description
will update their layout information
properly.
e (RenderEventArgs): The
RenderEventArgs object used to render
the chart.
Returns: void
onRendering(e) e (RenderEventArgs): The
RenderEventArgs object used to render
the chart.
Returns: void
refresh
(fullUpdate)
Returns: void
Events
Name
Arguments
Description
rendered
EventArgs
rendering
EventArgs
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)
Properties
Name
Type
Description
chartElement
ChartElement
distance
number
item
any
point
Point
pointIndex
number
series
Series
any
any
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
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)
Returns: void
Properties
Name
Type
Description
alignment
chart
FlexChart
content
Function
Wijmo 5
April 2015
325/535
Name
Type
Description
horizontalPosition
number
interaction
isVisible
boolean
lines
LineMarkerLines
seriesIndex
number
verticalPosition
number
number
number
Methods
Name
Parameters
Description
Returns: void
remove()
Events
Name
Arguments
Description
positionChanged Point
Wijmo 5
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;
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
content
any
Wijmo 5
April 2015
328/535
Name
Type
Description
});
chart.dataLabel.position = "Top";
chart.dataLabel.content = "{y}";
Wijmo 5
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)
Properties
Name
SF empty
engine
Wijmo 5
Type
Description
Provides a value to use with events that do not have event
data.
(inherited from EventArgs).
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
axisY
Axis
binding
string
bindingX
string
chart
FlexChart
chartType
ChartType
collectionView
ICollectionView Gets the ICollectionView object that contains the data for
this series.
cssClass
string
hostElement
SVGGElement
itemsSource
any
legendElement
SVGGElement
name
string
style
any
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
symbolStyle
any
visibility
SeriesVisibility
Methods
Name
Parameters
Description
drawLegendItem
(engine, rect)
getDataRect()
getPlotElement
(pointIndex)
Returns: any
hitTest(pt, y)
measureLegendItem engine (IRenderEngine): The rendering Measures the height and width of the
(engine)
engine to use.
legend item.
Returns: Size
onRendering
(engine)
Returns: void
Events
Name
Arguments
Description
rendering
IRenderEngine
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)
Returns: void
Properties
Name
Type
SF empty
series
Wijmo 5
Description
Provides a value to use with events that do not have event
data.
(inherited from EventArgs).
Series
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
F fontFamily
string
F fontSize
string
F stroke
string
F strokeWidth
number
F textFill
string
Methods
Name
Parameters
Description
beginRender()
endRender()
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
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
Footer
Header
Legend
None
No chart element.
PlotArea
Series
A chart series.
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
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.
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
None
Right
Top
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.
Right
Top
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 no lines.
Vertical
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
SplineSymbols chart types.
Values
Name Description
Box
Dot
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
None
No data labels.
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
None
Right
Top
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
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
Stacked
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
Inside
None
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
Wijmo 5
April 2015
352/535
RangeSelector Class
Module
wijmo.chart.interaction
File
wijmo.chart.interaction.js
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)
Returns: void
Properties
Name
Type
Description
isVisible
boolean
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
Methods
Name
Parameters
Description
onRangeChanged e (EventArgs)
(e)
Returns: void
remove()
Wijmo 5
April 2015
353/535
Events
Name
Arguments
Description
rangeChanged
EventArgs
Wijmo 5
April 2015
354/535
Orientation Enum
Module
wijmo.chart.interaction
File
wijmo.chart.interaction.js
Specifies the orientation of the range selector.
Values
Name Description
X
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
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
Wijmo 5
April 2015
357/535
Enumerations
Name
Description
Wijmo 5
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)
Properties
Name
Type
Description
bad
number
any
SF controlTemplate
direction
face
Range
format
string
Wijmo 5
April 2015
359/535
Name
Type
Description
good
number
hasShadow
boolean
hostElement
HTMLElement
isAnimated
boolean
isReadOnly
boolean
isTouching
boolean
isUpdating
boolean
max
number
min
number
origin
number
Gets or sets the starting point used for painting the range.
By default, this property is set to null, which causes the
value range to start at the gauge's minimum value, or
zero if the minimum is less than zero.
Range
ranges
showRanges
boolean
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
step
number
target
number
thickness
number
number
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Returns: HTMLElement
Wijmo 5
April 2015
361/535
Name
Parameters
Description
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
containsFocus()
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.
host element (e.g. '#theCtrl').
(inherited from Control).
Returns: Control
getTemplate()
Wijmo 5
April 2015
362/535
Name
Parameters
Description
(inherited from Control).
hitTest(pt, y)
Wijmo 5
April 2015
363/535
Name
Parameters
Description
invalidate
(fullUpdate)
S invalidateAll(e)
Events
Name
Arguments
Description
valueChanged
EventArgs
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)
Properties
Name
Type
Description
any
face
Range
format
string
hasShadow
boolean
hostElement
HTMLElement
isAnimated
boolean
isReadOnly
boolean
isTouching
boolean
SF controlTemplate
Wijmo 5
April 2015
365/535
Name
Type
Description
isUpdating
boolean
max
number
min
number
origin
number
Gets or sets the starting point used for painting the range.
By default, this property is set to null, which causes the
value range to start at the gauge's minimum value, or
zero if the minimum is less than zero.
pointer
Range
ranges
showRanges
boolean
showText
ShowText
step
number
thickness
number
value
number
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Wijmo 5
April 2015
366/535
Name
Parameters
Description
Returns: HTMLElement
containsFocus()
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.
host element (e.g. '#theCtrl').
(inherited from Control).
Returns: Control
Wijmo 5
April 2015
367/535
Name
Parameters
Description
getTemplate()
Wijmo 5
April 2015
368/535
Name
Parameters
Description
// etc.
S invalidateAll(e)
Wijmo 5
April 2015
369/535
Events
Name
Arguments
Description
valueChanged
EventArgs
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.
element (e.g. '#theCtrl').
options (): JavaScript object containing
initialization data for the control.
Returns: void
Properties
Name
SF controlTemplate
Type
Description
any
direction
face
Range
format
string
hasShadow
boolean
Wijmo 5
April 2015
371/535
Name
Type
Description
hostElement
HTMLElement
isAnimated
boolean
isReadOnly
boolean
isTouching
boolean
isUpdating
boolean
max
number
min
number
origin
number
Gets or sets the starting point used for painting the range.
By default, this property is set to null, which causes the
value range to start at the gauge's minimum value, or
zero if the minimum is less than zero.
Range
ranges
showRanges
boolean
Wijmo 5
April 2015
372/535
Name
Type
Description
showText
ShowText
step
number
thickness
number
number
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Returns: HTMLElement
Wijmo 5
April 2015
373/535
Name
Parameters
Description
beginUpdate()
containsFocus()
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.
host element (e.g. '#theCtrl').
(inherited from Control).
Returns: Control
getTemplate()
Wijmo 5
April 2015
374/535
Name
Parameters
Description
Wijmo 5
April 2015
375/535
Name
Parameters
Description
Returns: void
S invalidateAll(e)
Events
Name
Arguments
Description
valueChanged
EventArgs
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)
Properties
Name
Type
Description
autoScale
boolean
any
face
Range
format
string
hasShadow
boolean
SF controlTemplate
Wijmo 5
April 2015
377/535
Name
Type
Description
hostElement
HTMLElement
isAnimated
boolean
isReadOnly
boolean
isTouching
boolean
isUpdating
boolean
max
number
min
number
origin
number
Gets or sets the starting point used for painting the range.
By default, this property is set to null, which causes the
value range to start at the gauge's minimum value, or
zero if the minimum is less than zero.
Range
ranges
showRanges
boolean
Wijmo 5
April 2015
378/535
Name
Type
Description
showText
ShowText
startAngle
number
step
number
sweepAngle
number
thickness
number
number
Methods
Name
Parameters
Description
applyTemplate
(classNames,
template, parts,
namePart)
Returns: HTMLElement
Wijmo 5
April 2015
379/535
Name
Parameters
Description
this.applyTemplate('wj-control wjinputnumber', template, {
_tbx: 'input',
_btnUp: 'btn-inc',
_btnDn: 'btn-dec'
}, 'input');
containsFocus()
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.
host element (e.g. '#theCtrl').
(inherited from Control).
Returns: Control
getTemplate()
Wijmo 5
April 2015
380/535
Name
Parameters
Description
template defined by the DropDown base
class.
Wijmo 5
April 2015
381/535
Name
Parameters
Description
contains unknown property names or
invalid data types, this method will throw.
S invalidateAll(e)
Events
Wijmo 5
April 2015
382/535
Name
Arguments
Description
valueChanged
EventArgs
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)
Returns: void
Properties
Name
Type
Description
color
string
max
number
min
number
name
string
thickness
number
Methods
Name
Parameters
Description
onPropertyChanged e (PropertyChangedEventArgs):
(e)
PropertyChangedEventArgs that
contains the property name, old, and
new values.
Returns: void
Events
Name
Arguments
Description
propertyChanged PropertyChangedEventArgs
Wijmo 5
April 2015
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
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
Value
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
@ The name of the css class used to highlight parts of the content
that match the search terms.
delay
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>
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
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
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
Wijmo 5
April 2015
391/535
Name
Description
</wj-color-picker>
Wijmo 5
April 2015
392/535
Name
Description
control
Wijmo 5
April 2015
393/535
Name
Description
text
<!-- define the context menu (hidden and with an id) -->
<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
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>
<wj-flex-chart-series
binding="expenses"
name="Expenses">
</wj-flex-chart-series>
<wj-flex-chart-series
binding="downloads"
name="Downloads"
chart-type="LineSymbols">
</wj-flex-chart-series>
</wj-flex-chart>
@ 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
& 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.
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
Wijmo 5
April 2015
397/535
Name
Description
@ The value indicating whether the axis is reversed (top to bottom
or right to left).
title
WjFlexChartLineMarker
Wijmo 5
April 2015
398/535
Name
Description
seriesIndex
@ 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
Wijmo 5
April 2015
400/535
Name
Description
<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>
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
Wijmo 5
April 2015
401/535
Name
Description
frozen-rows
Wijmo 5
April 2015
402/535
Name
Description
resizing-column
Wijmo 5
April 2015
403/535
Name
Description
WjFlexGridCellTemplate
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
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>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
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:
<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>
</wj-flex-grid-column>
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:
<wj-flex-grid items-source="data">
<wj-flex-grid-cell-template cell-type="RowHeader">
{{$row.index}}
</wj-flex-grid-cell-template>
</wj-flex-grid>
Wijmo 5
April 2015
406/535
Name
Description
</wj-flex-grid-cell-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 topleft cell of the grid:
<wj-flex-grid items-source="data">
<wj-flex-grid-cell-template cell-type="TopLeft">
<span class="wj-glyph-down-right"></span>
</wj-flex-grid-cell-template>
</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-column header="Country" binding="country">
<wj-flex-grid-cell-template cell-type="GroupHeader">
<input type="checkbox" ng-model="$row.isCollapsed"/>
{{$item.name}} ({{$item.items.length}} items)
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
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
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
WjFlexGridColumn
Wijmo 5
April 2015
408/535
Name
Description
is-read-only
Wijmo 5
April 2015
409/535
Name
Description
<wj-flex-grid items-source="data">
<wj-flex-grid-filter filter-columns="['country', 'expenses']"></wj-flexgrid-filter>
<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>
Wijmo 5
April 2015
410/535
Name
Description
is-initialized
Wijmo 5
April 2015
411/535
Name
Description
The wj-flex-pie-data-label directive must be contained in a WjFlexPie
directive. It supports the following attributes:
content
Wijmo 5
April 2015
412/535
Name
Description
WjInputColor
Wijmo 5
April 2015
413/535
Name
Description
Use the wj-input-date directive to add InputDate 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 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
@ The mask used to validate the input as the user types (see
InputMask).
is-dropped-down
@ A value indicating whether the drop-down is currently visible.
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.
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
@ The string to show as a hint when the control is empty.
required
@ A value indicating whether to prevent null values.
show-drop-down-button
Wijmo 5
April 2015
414/535
Name
Description
@ A value indicating whether the control displays a drop-down
button.
text
Wijmo 5
April 2015
415/535
Name
Description
= The number being edited.
value-changed
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
Wijmo 5
April 2015
416/535
Name
Description
show-spinner
@ The amount to add or subtract to the value when the user clicks
the spinner buttons.
text
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
Wijmo 5
April 2015
417/535
Name
Description
@ The earliest valid time (a string in the format "hh:mm").
min
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
& 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.
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
Wijmo 5
April 2015
419/535
Name
Description
</wj-list-box>
Wijmo 5
April 2015
420/535
Name
Description
Use the wj-menu directive to add drop-down menus 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 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-item value=".1">10%</wj-menu-item>
<wj-menu-item value=".15">15%</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
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
WjRadialGauge
Wijmo 5
April 2015
422/535
Name
Description
@ A value indicating whether users are prevented from editing the
value.
min
Wijmo 5
April 2015
423/535
Name
Description
max="200"
color="green">
</wj-range>
<wj-range
wj-property="pointer"
color="blue">
</wj-range>
</wj-radial-gauge>
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:
<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.
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
value="ctx.gauge.value"
min="0" max="10"
target="{{item.target}}"
bad="{{item.target * .75}}"
good="{{item.target * 1.25}}">
</wj-bullet-graph>
@ 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:
<p>Here is a Calendar control:</p>
<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
Wijmo 5
April 2015
428/535
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:
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
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:
Here is a CollectionViewPager:</p>
<wj-collection-view-pager
cv="myCollectionView">
</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
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
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">
</wj-color-picker>
& 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.
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
& The valueChanged event handler.
Wijmo 5
April 2015
432/535
WjComboBox Class
Base Class
WjDropDown
Derived Classes
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
directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For
example:
<p>Here is a ComboBox control:</p>
<wj-combo-box
text="theCountry"
items-source="countries"
is-editable="false"
placeholder="country">
</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
@ 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
Wijmo 5
April 2015
433/535
items-source
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:
<!-- paragraph with a context menu -->
<p wj-context-menu="#idMenu" >
This paragraph has a context menu.</p>
<!-- define the context menu (hidden and with an id) -->
<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:
<p>Here is a FlexChart control:</p>
<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>
<wj-flex-chart-series
binding="expenses"
name="Expenses">
</wj-flex-chart-series>
<wj-flex-chart-series
binding="downloads"
name="Downloads"
chart-type="LineSymbols">
</wj-flex-chart-series>
</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
@ 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
& 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.
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
Wijmo 5
April 2015
437/535
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 format string used for the axis labels (see Globalize).
labels
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
following attributes:
content
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
following attributes:
position
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 index of the series in the chart in which the LineMarker appears.
horizontalPosition
@ 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
following attributes:
isVisible
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:
<p>Here is a FlexGrid 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>
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
& 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.
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
Wijmo 5
April 2015
447/535
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:
<wj-flex-grid items-source="data">
<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-cell-template>
<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>
<wj-flex-grid-cell-template cell-type="Cell">
<img ng-src="resources/{{$item.country}}.png" />
{{$item.country}}
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
<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
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>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
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:
<wj-flex-grid-column header="Country" binding="country">
<wj-flex-grid-cell-template cell-type="ColumnHeader">
<img ng-src="resources/globe.png" />
Wijmo 5
April 2015
450/535
{{$col.header}}
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
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:
<wj-flex-grid items-source="data">
<wj-flex-grid-cell-template cell-type="RowHeader">
{{$row.index}}
</wj-flex-grid-cell-template>
</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 items-source="data">
<wj-flex-grid-cell-template cell-type="RowHeaderEdit">
...
</wj-flex-grid-cell-template>
</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 items-source="data">
<wj-flex-grid-cell-template cell-type="RowHeaderEdit">
{{✎}}
</wj-flex-grid-cell-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 items-source="data">
<wj-flex-grid-cell-template cell-type="TopLeft">
<span class="wj-glyph-down-right"></span>
</wj-flex-grid-cell-template>
</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-column header="Country" binding="country">
<wj-flex-grid-cell-template cell-type="GroupHeader">
<input type="checkbox" ng-model="$row.isCollapsed"/>
{{$item.name}} ({{$item.items.length}} items)
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
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}}
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
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
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:
<p>Here is a FlexGrid control with column filters:</p>
<wj-flex-grid items-source="data">
<wj-flex-grid-filter filter-columns="['country', 'expenses']"></wj-flex-grid-filter>
<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>
@ The value indicating whether filter editing buttons appear in the grid's column headers.
filter-applied
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
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
@ The value to display in the ChartTooltip content property.
rendering
& The rendering event handler.
rendered
& The rendered event handler.
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
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:
<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">
<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>
@A value indicating whether the panel hides grouped columns in the owner grid.
max-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
directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For
example:
<p>Here is an InputColor control:</p>
<wj-input-color
value="theColor"
show-alpha-channel="false">
</wj-input-color>
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
directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For
example:
<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
@ 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
& 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.
max
Wijmo 5
April 2015
462/535
required
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
directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For
example:
<p>Here is an InputMask control:</p>
<wj-input-mask
mask="99/99/99"
mask-placeholder="*">
</wj-input-mask>
& 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.
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
@ The string to show as a hint when the control is empty.
value
= The number being edited.
value-changed
& The valueChanged event handler.
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:
<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
@ The "type" attribute of the HTML input element hosted by the control.
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.
max
@ The largest valid number.
min
@ The smallest valid number.
place-holder
@ The string to show as a hint when the control is empty.
required
@ A value indicating whether to prevent null values.
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
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
directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For
example:
<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
@ A mask used to validate the input as the user types (see InputMask).
max
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
value="ctx.gauge.value"
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 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
& This event occurs after the binding has finished initializing the control with attribute values.
Wijmo 5
April 2015
469/535
is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values.
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
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
and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:
b>Here is a ListBox control:</p>
<wj-list-box
selected-item="theCountry"
items-source="countries"
placeholder="country">
</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
Wijmo 5
April 2015
471/535
selected-value
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
and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:
<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-item value=".1">10%</wj-menu-item>
<wj-menu-item value=".15">15%</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
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 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
directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For
example:
Here is a <b>RadialGauge</b> control:</p>
<wj-radial-gauge
style="height:300px"
value="count"
min="0" max="10"
is-read-only="false">
</wj-radial-gauge>
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
@ The thickness of the gauge, on a scale of zero to one.
value
= The value displayed on the gauge.
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"
is-read-only="false">
<wj-range
min="0"
max="100"
color="red">
</wj-range>
<wj-range
min="100"
max="200"
color="green">
</wj-range>
<wj-range
wj-property="pointer"
color="blue">
</wj-range>
</wj-radial-gauge>
Wijmo 5
April 2015
478/535
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" >
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
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
CellEdit
GroupHeader
RowHeader
Wijmo 5
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
Wijmo 5
April 2015
484/535
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.
<!-- HTML -->
<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);
}
Wijmo 5
April 2015
485/535
Wijmo 5
April 2015
486/535
Wijmo 5
April 2015
487/535
Wijmo 5
April 2015
488/535
Wijmo 5
April 2015
489/535
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
wjBulletGraph
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
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
value
displayMonth
wjCollectionViewNavigator
Wijmo 5
April 2015
492/535
Name
Description
The wjCollectionViewPager directive has a single attribute:
cv
wjComboBox
value
wjFlexChart
Wijmo 5
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
April 2015
493/535
Name
Description
Use the wjFlexChart binding to add FlexChart controls to your
KnockoutJS applications. For example:
<p>Here is a FlexChart control:</p>
<div data-bind="wjFlexChart: { itemsSource: data }">
<div data-bind="wjFlexChartLegend : {
position: 'Top' }">
</div>
<div data-bind="wjFlexChartAxis: {
wjProperty: 'axisX',
title: chartProps.titleX }">
</div>
<div data-bind="wjFlexChartAxis: {
wjProperty: 'axisY',
majorUnit: 5000 }">
</div>
<div data-bind="wjFlexChartSeries: {
name: 'Sales',
binding: 'sales' }">
</div>
<div data-bind="wjFlexChartSeries: {
name: 'Expenses',
binding: 'expenses' }">
</div>
<div data-bind="wjFlexChartSeries: {
name: 'Downloads',
binding: 'downloads',
chartType: 'LineSymbols' }">
</div>
</div>
wjFlexChartLegend
Wijmo 5
April 2015
494/535
Name
Description
wjFlexChartSeries
wjFlexGrid
Wijmo 5
April 2015
495/535
Name
Description
header: 'Date',
binding: 'date' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Active',
binding: 'active' }">
</div>
</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
Wijmo 5
April 2015
497/535
Name
Description
The wjGroupPanel binding should be connected to the FlexGrid control
using the grid property. For example:
<p>Here is a FlexGrid control with GroupPanel:</p>
<div data-bind="wjGroupPanel: { grid: flex(), placeholder: 'Drag columns
here to create groups.' }"></div>
<div data-bind="wjFlexGrid: { control: flex, itemsSource: data }">
<div data-bind="wjFlexGridColumn: {
header: 'Country',
binding: 'country',
width: '*' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Date',
binding: 'date' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Active',
binding: 'active' }">
</div>
</div>
wjInputDate
Wijmo 5
isDroppedDown
text
value
April 2015
498/535
Name
Description
Use the wjInputDate binding to add InputDate controls to your
KnockoutJS applications. For example:
<p>Here is an InputDate control:</p>
<div data-bind="wjInputDate: {
value: theDate,
format: 'M/d/yyyy' }">
</div>
wjInputMask
isDroppedDown
text
value
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
wjLinearGauge
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
value
Wijmo 5
April 2015
500/535
Name
Description
min: props.ranges.lower.min,
max: props.ranges.lower.max,
color: props.ranges.lower.color }">
</div>
<div data-bind="wjRange: {
min: props.ranges.middle.min,
max: props.ranges.middle.max,
color: props.ranges.middle.color }">
</div>
<div data-bind="wjRange: {
min: props.ranges.upper.min,
max: props.ranges.upper.max,
color: props.ranges.upper.color }">
</div>
</div>
wjMenu
selectedIndex
selectedItem
selectedValue
Wijmo 5
April 2015
501/535
Name
Description
</div>
wjMenuItem
isDroppedDown
text
selectedIndex
selectedItem
selectedValue
value
Value selected when the item is clicked (use either this or cmd).
wjMenuSeparator
Wijmo 5
April 2015
502/535
Name
Description
<span data-bind="wjMenuItem: { value: .1 }">10%</span>
<span data-bind="wjMenuItem: { value: .15 }">15%</span>
</div>
wjRadialGauge
wjLinearGauge
wjRadialGauge
wjBulletGraph
Wijmo 5
April 2015
503/535
Name
Description
The wjRange binding supports all read-write properties and events of the
Range class.
wjStyle
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
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:
<p>Here is an AutoComplete control:</p>
<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:
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,
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>
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:
<p>Here is a Calendar control:</p>
<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:
Here is a CollectionViewNavigator:</p>
<div
data-bind="wjCollectionViewNavigator: { cv: myCollectionView }">
</div>
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:
Here is a CollectionViewPager:</p>
<div
data-bind="wjCollectionViewPager: { cv: myCollectionView }">
</div>
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:
<p>Here is a ColorPicker control:</p>
<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:
value
Wijmo 5
April 2015
510/535
wjComboBox Class
Base Class
WjDropDownBinding
Derived Classes
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:
<p>Here is a ComboBox control:</p>
<div data-bind="wjComboBox: {
itemsSource: countries,
text: theCountry,
isEditable: false,
placeholder: 'country' }">
</div>
The wjComboBox binding supports all read-write properties and events of the ComboBox control. The
following properties provide two-way binding mode:
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:
<p>Here is a FlexChart control:</p>
<div data-bind="wjFlexChart: { itemsSource: data }">
<div data-bind="wjFlexChartLegend : {
position: 'Top' }">
</div>
<div data-bind="wjFlexChartAxis: {
wjProperty: 'axisX',
title: chartProps.titleX }">
</div>
<div data-bind="wjFlexChartAxis: {
wjProperty: 'axisY',
majorUnit: 5000 }">
</div>
<div data-bind="wjFlexChartSeries: {
name: 'Sales',
binding: 'sales' }">
</div>
<div data-bind="wjFlexChartSeries: {
name: 'Expenses',
binding: 'expenses' }">
</div>
<div data-bind="wjFlexChartSeries: {
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:
<p>Here is a FlexGrid control:</p>
<div data-bind="wjFlexGrid: { itemsSource: data }">
<div data-bind="wjFlexGridColumn: {
header: 'Country',
binding: 'country',
width: '*' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Date',
binding: 'date' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Active',
binding: 'active' }">
</div>
</div>
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:
<p>Here is a FlexGrid control:</p>
<div data-bind="wjFlexGrid: { itemsSource: data }">
<div data-bind="wjFlexGridColumn: {
header: 'Country',
binding: 'country',
width: '*' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Date',
binding: 'date' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Active',
binding: '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:
<div data-bind="wjFlexGridColumn: {
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>
<div data-bind="wjFlexGridColumn: {
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
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:
<p>Here is a FlexGrid control with column filters:</p>
<div data-bind="wjFlexGrid: { itemsSource: data }">
<div data-bind="wjFlexGridFilter: { filterColumns: ['country', 'amount']
<div data-bind="wjFlexGridColumn:
header: 'Country',
binding: 'country',
width: '*' }">
</div>
<div data-bind="wjFlexGridColumn:
header: 'Date',
binding: 'date' }">
</div>
<div data-bind="wjFlexGridColumn:
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
<div data-bind="wjFlexGridColumn:
header: 'Active',
binding: '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>
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:
<p>Here is a FlexGrid control with GroupPanel:</p>
<div data-bind="wjGroupPanel: { grid: flex(), placeholder: 'Drag columns here to create groups.' }"></div>
<div data-bind="wjFlexGrid: { control: flex, itemsSource: data }">
<div data-bind="wjFlexGridColumn: {
header: 'Country',
binding: 'country',
width: '*' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Date',
binding: 'date' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Revenue',
binding: 'amount',
format: 'n0' }">
</div>
<div data-bind="wjFlexGridColumn: {
header: 'Active',
binding: '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
following properties provide two-way binding mode:
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:
<p>Here is an InputDate control:</p>
<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:
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:
<p>Here is an InputMask control:</p>
<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:
<p>Here is an InputNumber control:</p>
<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:
<p>Here is an InputTime control:</p>
<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:
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,
format: props.format,
showRanges: props.showRanges }"
<class="linear-gauge">
<div data-bind="wjRange: {
wjProperty: 'pointer',
thickness: props.ranges.pointerThickness }">
</div>
<div data-bind="wjRange: {
min: props.ranges.lower.min,
max: props.ranges.lower.max,
color: props.ranges.lower.color }">
</div>
<div data-bind="wjRange: {
min: props.ranges.middle.min,
max: props.ranges.middle.max,
color: props.ranges.middle.color }">
</div>
<div data-bind="wjRange: {
min: props.ranges.upper.min,
max: props.ranges.upper.max,
color: props.ranges.upper.color }">
</div>
</div>
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: {
itemsSource: countries,
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:
<p>Here is a Menu control used as a value picker:</p>
<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>
<span data-bind="wjMenuItem: { value: .1 }">10%</span>
<span data-bind="wjMenuItem: { value: .15 }">15%</span>
</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 data-bind="wjMenu: { value: tax, header: 'Tax' }">
<span data-bind="wjMenuItem: { value: 0 }">Exempt</span>
<span data-bind="wjMenuItem: { value: .05 }">5%</span>
<span data-bind="wjMenuItem: { value: .1 }">10%</span>
<span data-bind="wjMenuItem: { value: .15 }">15%</span>
</div>
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 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>
<span data-bind="wjMenuItem: { value: .1 }">10%</span>
<span data-bind="wjMenuItem: { value: .15 }">15%</span>
</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,
format: props.format,
showRanges: props.showRanges }"
class="radial-gauge">
<div data-bind="wjRange: {
wjProperty: 'pointer',
thickness: props.ranges.pointerThickness }">
</div>
<div data-bind="wjRange: {
min: props.ranges.lower.min,
max: props.ranges.lower.max,
color: props.ranges.lower.color }">
</div>
<div data-bind="wjRange: {
min: props.ranges.middle.min,
max: props.ranges.middle.max,
color: props.ranges.middle.color }">
</div>
<div data-bind="wjRange: {
min: props.ranges.upper.min,
max: props.ranges.upper.max,
color: props.ranges.upper.color }">
</div>
</div>
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:
<div data-bind="wjFlexGridColumn: {
header: 'Change',
binding: 'changePercent',
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
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'" >
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
535/535