addClass(e: Element, className: string): void
Adds a class to an element.
Element that will have the class added.
Class (or space-separated list of classes) to add to the element.
animate(apply: IAnimateCallback, duration?: number, step?: number): any
Calls a function on a timer with a parameter varying between zero and one.
Use this function to create animations by modifying document properties or styles on a timer.
For example, the code below changes the opacity of an element from zero to one in one second:
import { animate } from '@mescius/wijmo';
const element = document.getElementById('someElement');
animate(pct => {
element.style.opacity = pct;
}, 1000);
The function returns an interval ID that you can use to stop the animation. This is typically done when you are starting a new animation and wish to suspend other on-going animations on the same element. For example, the code below keeps track of the interval ID and clears if before starting a new animation:
import { animate } from '@mescius/wijmo';
const element = document.getElementById('someElement');
if (this._animInterval) {
clearInterval(this._animInterval);
}
this._animInterval = animate(pct => {
element.style.opacity = pct;
if (pct == 1) {
self._animInterval = null;
}
}, 1000);
Callback function that modifies the document. The function takes a single parameter that represents a percentage.
The duration of the animation, in milliseconds.
The interval between animation frames, in milliseconds.
asArray(value: any, nullOK?: boolean): any[]
Asserts that a value is an array.
Value supposed to be an array.
Whether null values are acceptable.
asBoolean(value: boolean, nullOK?: boolean): boolean
Asserts that a value is a Boolean.
Value supposed to be Boolean.
Whether null values are acceptable.
asCollectionView(value: any, nullOK?: boolean): ICollectionView
Asserts that a value is an ICollectionView or an Array.
Array or ICollectionView.
Whether null values are acceptable.
asDate(value: Date, nullOK?: boolean): Date
Asserts that a value is a Date.
Value supposed to be a Date.
Whether null values are acceptable.
asEnum(value: number, enumType: any, nullOK?: boolean): number
Asserts that a value is a valid setting for an enumeration.
Value supposed to be a member of the enumeration.
Enumeration to test for.
Whether null values are acceptable.
asFunction(value: any, nullOK?: boolean): Function
Asserts that a value is a function.
Value supposed to be a function.
Whether null values are acceptable.
asInt(value: number, nullOK?: boolean, positive?: boolean): number
Asserts that a value is an integer.
Value supposed to be an integer.
Whether null values are acceptable.
Whether to accept only positive integers.
asNumber(value: number, nullOK?: boolean, positive?: boolean): number
Asserts that a value is a number.
Value supposed to be numeric.
Whether null values are acceptable.
Whether to accept only positive numeric values.
assert(condition: boolean, msg: string): void
Throws an exception if a condition is false.
Condition expected to be true.
Message of the exception if the condition is not true.
asString(value: string, nullOK?: boolean): string
Asserts that a value is a string.
Value supposed to be a string.
Whether null values are acceptable.
asType(value: any, type: any, nullOK?: boolean): any
Asserts that a value is an instance of a given type.
Value to be checked.
Type of value expected.
Whether null values are acceptable.
changeType(value: any, type: DataType, format?: string, refDate?: Date): any
Changes the type of a value.
If the conversion fails, the original value is returned. To check if a conversion succeeded, you should check the type of the returned value.
Value to convert.
DataType to convert the value to.
Format to use when converting to or from strings.
Reference date to use when parsing strings with missing information.
clamp(value: number, min: number, max: number): number
Clamps a value between a minimum and a maximum.
closest(e: any, selector: string): Element
Finds the closest ancestor (including the original element) that satisfies a selector.
Element where the search should start.
A string containing a selector expression to match elements against.
closestClass(e: any, className: string): Node
Finds the closest ancestor (including the original element) that satisfies a class selector.
Element where the search should start.
A string containing the class name to match elements against.
contains(parent: any, child: any, popup?: boolean): boolean
Checks whether an HTML element contains another.
Parent element.
Child element.
Whether to take Wijmo popups into account.
copy(dst: any, src: any, copySubObjects?: boolean, copyNativeSubObjects?: boolean): any
Copies properties from an object to another.
This method is typically used to initialize controls and other Wijmo objects by setting their properties and assigning event handlers.
The destination object must define all the properties defined in the source, or an error will be thrown.
The destination object.
The source object.
Whether to copy properties of Object type props.
createElement(html: string, appendTo?: HTMLElement, css?: any): HTMLElement
Creates an element from an HTML string.
HTML fragment to convert into an HTMLElement.
Optional HTMLElement to append the new element to.
Optional CSS attributes to apply to the root of the new element.
disableAutoComplete(e: HTMLInputElement): void
Disables the autocomplete, autocorrect, autocapitalize, and spellcheck properties of an input element.
The input element.
enable(e: HTMLElement, value: boolean): void
Enables or disables an element.
Element to enable or disable.
Whether to enable or disable the element.
escapeHtml(text: string): string
Escapes a string by replacing HTML characters with text entities.
Strings entered by users should always be escaped before they are displayed in HTML pages. This helps ensure page integrity and prevent HTML/javascript injection attacks.
Text to escape.
escapeRegExp(text: string): string
Escapes a string by prefixing special regular expression characters with backslashes.
Text to escape.
evalTemplate(template: string, ctx?: any): string
Evaluates a string in template literal notation.
This function allows you to evaluate template literals on-demand, rather than when they are declared.
The template string uses the standard template literal syntax, except it is a regular string (enclosed in single or double quotes) rather than a template literal (enclosed in back-quotes).
The template string may contain references to variables provided in a context object passed as a parameter.
The template string may contain formatting information as used with the glbz tag function.
For example:
import { evalTemplate } from '@mescius/wijmo';
const msg = evalTemplate('hello ${user}, want some ${Math.PI}:n2?', { user: 'Chris' }));
console.log(msg);
> hello Chris, want some 3.14?
String in template literal notation.
Object with properties acessible to the template.
focusFirst(container: HTMLElement, focusableSelector?: string): boolean
Moves the focus to the first focusable element within a given container. Optionally, focuses the first element that matches a specific selector. The element would not be focused if it's disabled or it's tabIndex < 0
The DOM element.
Optional. A CSS selector specifying which elements to consider for focusing.
format(format: string, data: any, formatFunction?: Function): string
Replaces each format item in a specified string with the text equivalent of an object's value.
The function works by replacing parts of the formatString with the pattern '{name:format}' with properties of the data parameter. For example:
import { format } from '@mescius/wijmo';
let data = { name: 'Joe', amount: 123456 },
msg = format('Hello {name}, you won {amount:n2}!', data);
The format function supports pluralization. If the format string is a JSON-encoded object with 'count' and 'when' properties, the method uses the 'count' parameter of the data object to select the appropriate format from the 'when' property. For example:
import { format } from '@mescius/wijmo';
fmtObj fmt = {
count: 'count',
when: {
0: 'No items selected.',
1: 'One item is selected.',
2: 'A pair is selected.',
'other': '{count:n0} items are selected.'
}
};
let fmt = JSON.stringify(fmtObj);
console.log(format(fmt, { count: 0 })); // No items selected.
console.log(format(fmt, { count: 1 })); // One item is selected.
console.log(format(fmt, { count: 2 })); // A pair is selected.
console.log(format(fmt, { count: 12 })); // 12 items are selected.
The optional formatFunction allows you to customize the content by providing context-sensitive formatting. If provided, the format function gets called for each format element and gets passed the data object, the parameter name, the format, and the value; it should return an output string. For example:
import { format, isString, escapeHtml } from '@mescius/wijmo';
let data = { name: 'Joe', amount: 123456 },
msg = format('Hello {name}, you won {amount:n2}!', data,
(data, name, fmt, val) => {
if (isString(data[name])) {
val = escapeHtml(data[name]);
}
return val;
}
);
A composite format string.
The data object used to build the string.
An optional function used to format items in context.
getActiveElement(): HTMLElement
Gets a reference to the element that contains the focus, accounting for shadow document fragments.
getAggregate(aggType: Aggregate, items: any[], binding?: string, sheet?: any): void
Calculates an aggregate value from the values in an array.
Type of aggregate to calculate.
Array with the items to aggregate.
Name of the property to aggregate on (in case the items are not simple values).
getElement(selector: any): HTMLElement
Gets an element from a query selector.
An element, a query selector string, or a jQuery object.
getElementRect(e: Element): Rect
Gets the bounding rectangle of an element in page coordinates.
This is similar to the getBoundingClientRect function, except that uses viewport coordinates, which change when the document scrolls.
getType(value: any): DataType
Gets the type of a value.
Value to test.
getTypes(arr: any[], limit?: number): IBindingInfo[]
Gets an array containing the names and types of items in an array.
Array containing data items.
Number of the array items to scan (1000 by default). Zero or negative value causes the function to scan all items.
getUniqueId(baseId: string): string
Creates a new unique id for an element by adding sequential numbers to a given base id.
String to use as a basis for generating the unique id.
getVersion(): string
Gets the version of the Wijmo library that is currently loaded.
glbz(...args: any[]): string
Tag function for use with template literals.
The glbz tag function allows you to specify formatting for variables in template literal expressions.
To format a variable in a template literal using glbz, add a colon and the format string after the name of the variable you want to format.
For example:
import { glbz } from '@mescius/wijmo';
let num = 42,
dt = new Date(),
msg = glbz`the number is ${num}:n2, and the date is ${dt}:'MMM d, yyyy'!`;
hasClass(e: Element, className: string): boolean
Checks whether an element has a class.
hasItems(value: ICollectionView): boolean
Checks whether an ICollectionView is defined and not empty.
ICollectionView to check.
hidePopup(popup: HTMLElement, remove?: any, fadeOut?: boolean): any
Hides a popup element previously displayed with the showPopup method.
Popup element to hide.
Whether to remove the popup from the DOM or just to hide it. This parameter may be a boolean or a callback function that gets invoked after the popup has been removed from the DOM.
Whether to use a fade-out animation to make the popup disappear gradually.
httpRequest(url: string, options?: IHttpRequestOptions): XMLHttpRequest
Performs HTTP requests.
Use the success method to obtain the result of the request which is provided in the callback's XMLHttpRequest parameter. For example, the code below uses the httpRequest method to retrieve a list of customers from an OData service:
import { httpRequest } from '@mescius/wijmo';
httpRequest('https://services.odata.org/Northwind/Northwind.svc/Customers?$format=json', {
success: xhr => {
let response = JSON.parse(xhr.responseText),
customers = response.value;
// do something with the customers...
}
});
String containing the URL to which the request is sent.
An optional IHttpRequestOptions object used to configure the request.
isArray(value: any): value
Determines whether an object is an Array.
Value to test.
isBoolean(value: any): value
Determines whether an object is a Boolean.
Value to test.
isDate(value: any): value
Determines whether an object is a Date.
Value to test.
isEmpty(obj: any): boolean
Determines whether an object is empty (contains no enumerable properties).
Object to test.
isFunction(value: any): value
Determines whether an object is a function.
Value to test.
isInt(value: any): value
Determines whether an object is an integer.
Value to test.
isNullOrWhiteSpace(value: string): boolean
Determines whether a string is null, empty, or whitespace only.
Value to test.
isNumber(value: any): value
Determines whether an object is a number.
Value to test.
isObject(value: any): boolean
Determines whether a value is an object (as opposed to a value type, an array, or a Date).
Value to test.
isPrimitive(value: any): value
Determines whether an object is a primitive type (string, number, Boolean, or Date).
Value to test.
isString(value: any): value
Determines whether an object is a string.
Value to test.
isUndefined(value: any): value
Determines whether an object is undefined.
Value to test.
mouseToPage(e: any): Point
Converts mouse or touch event arguments into a Point in page coordinates.
moveFocus(parent: HTMLElement, offset: number): boolean
Moves the focus to the next/previous/first focusable child within a given parent element.
Parent element.
Offset to use when moving the focus (use zero to focus on the first focusable child).
removeChild(e: Node): Node
Safely removes an element from the DOM tree.
Element to remove from the DOM tree.
removeClass(e: Element, className: string): void
Removes a class from an element.
Element that will have the class removed.
Class (or space-separated list of classes) to remove from the element.
saveFile(content: string | Blob, fileName: string, type?: string): void
Saves content to a file.
A string or a Blob object to be saved to a file.
Name of the file to save, including extension.
Optional file MIME type, used if the **content** argument is a string.
The saveFile method can be used to create text files (txt, csv, html) as well as image files.
For example, this code saves the current selection of a FlexGrid to a CSV file:
import { saveFile } from '@mescius/wijmo';
const clipString = theGrid.getClipString(null, true, true, false);
saveFile(clipString, 'grid.csv', 'text/csv');
And this code saves the content of a canvas element to a JPG file:
import { saveFile } from '@mescius/wijmo';
canvas.toBlob(blob => {
saveFile(blob, 'image.jpg');
}, 'image/jpeg');
setAriaLabel(e: Element, value?: string): void
Sets or clears an element's aria-label attribute.
Element that will be updated.
Value of the aria label, or null to remove the label from the element.
setAttribute(e: Element, name: string, value?: any, keep?: boolean): void
Sets or clears an attribute on an element.
Element that will be updated.
Name of the attribute to add or remove.
Value of the attribute, or null to remove the attribute from the element.
Whether to keep original attribute if present.
setChecked(cb: HTMLInputElement, checked: boolean): void
Sets the checked and indeterminate properties of a checkbox input element.
Checkbox element.
True, false, or null for checked, unchecked, or indeterminate.
setCss(e: any, css: any): void
Modifies the style of an element by applying the properties specified in an object.
Element or array of elements whose style will be modified.
Object containing the style properties to apply to the element.
setLicenseKey(licenseKey: string): void
Sets the license key that identifies licensed Wijmo applications.
If you do not set the license key, Wijmo will run in evaluation mode, adding a watermark element to the page.
Licensed users may obtain keys at the My Account section of the Wijmo site.
Note that Wijmo does not send keys or any licensing information to any servers. It only checks the internal consistency of the key provided.
String containing the license key to use in this application.
setSelectionRange(e: any, start: number, end?: number, needFocus?: boolean): boolean
Sets the start and end positions of a selection in a text field.
This method is similar to the native setSelectionRange method in HTMLInputElement objects, except it checks for conditions that may cause exceptions (element not in the DOM, disabled, or hidden).
HTMLInputElement or HTMLTextAreaElement to select.
Offset into the text field for the start of the selection.
Offset into the text field for the end of the selection.
setText(e: HTMLElement, text: string): void
Sets the text content of an element.
Element that will have its content updated.
Plain text to be assigned to the element.
showPopup(popup: HTMLElement, ref?: any, position?: PopupPosition | Boolean, fadeIn?: boolean, copyStyles?: any, hideOnScroll?: Function): any
Shows an element as a popup.
The popup element becomes a child of the body element, and is positioned with respect to reference rectangle according to the given PopupPosition.
The reference rectangle may be specified as one of the following:
Call the hidePopup method to hide the popup.
Element to show as a popup.
Reference element or rectangle used to position the popup.
Position of the popup with respect to the reference element.
Use a fade-in animation to make the popup appear gradually.
Whether to copy font and color styles from the reference element, or an element to use as the style source.
An optional function called when the popup is hidden as a result of a parent element scrolling.
toFixed(value: number, prec: number, truncate: boolean): number
Rounds or truncates a number to a specified precision.
Value to round or truncate.
Number of decimal digits for the result.
Whether to truncate or round the original value.
toggleClass(e: Element, className: string, addOrRemove?: boolean): void
Adds or removes a class to or from an element.
Element that will have the class added.
Class to add or remove.
Whether to add or remove the class. If not provided, toggle the class.
toHeaderCase(text: string): string
Converts a camel-cased string into a header-type string by capitalizing the first letter and adding spaces before uppercase characters preceded by lower-case characters.
For example, 'somePropertyName' becomes 'Some Property Name'.
String to convert to header case.
toPlainText(html: string): string
Converts an HTML string into plain text.
HTML string to convert to plain text.
Gets or sets an object that contains all localizable strings in the Wijmo library.
The culture selector is a two-letter string that represents an ISO 639 culture.