ASP.NET Core MVC Controls | ComponentOne
In This Topic
    wijmo Module
    In This Topic
    File
    wijmo.js
    Module
    wijmo

    Classes

    Interfaces

    Enums

    Properties

    Methods

    Properties

    culture

    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.

    Type
    any

    Methods

    addClass

    addClass(e: Element, className: string): void
    

    Adds a class to an element.

    Parameters
    • e: Element

      Element that will have the class added.

    • className: string

      Class (or space-separated list of classes) to add to the element.

    Returns
    void

    animate

    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);
    

    Parameters
    • apply: IAnimateCallback

      Callback function that modifies the document. The function takes a single parameter that represents a percentage.

    • duration: number
    Optional

    The duration of the animation, in milliseconds.

    The interval between animation frames, in milliseconds.

    Returns
    any

    asArray

    asArray(value: any, nullOK?: boolean): any[]
    

    Asserts that a value is an array.

    Parameters
    • value: any

      Value supposed to be an array.

    • nullOK: boolean
    Optional

    Whether null values are acceptable.

    Returns
    any[]

    asBoolean

    asBoolean(value: boolean, nullOK?: boolean): boolean
    

    Asserts that a value is a Boolean.

    Parameters
    • value: boolean

      Value supposed to be Boolean.

    • nullOK: boolean Optional

      Whether null values are acceptable.

    Returns
    boolean

    asCollectionView

    asCollectionView(value: any, nullOK?: boolean): ICollectionView
    

    Asserts that a value is an ICollectionView or an Array.

    Parameters
    Returns
    ICollectionView

    asDate

    asDate(value: Date, nullOK?: boolean): Date
    

    Asserts that a value is a Date.

    Parameters
    • value: Date

      Value supposed to be a Date.

    • nullOK: boolean Optional

      Whether null values are acceptable.

    Returns
    Date

    asEnum

    asEnum(value: number, enumType: any, nullOK?: boolean): number
    

    Asserts that a value is a valid setting for an enumeration.

    Parameters
    • value: number

      Value supposed to be a member of the enumeration.

    • enumType: any

      Enumeration to test for.

    • nullOK: boolean Optional

      Whether null values are acceptable.

    Returns
    number

    asFunction

    asFunction(value: any, nullOK?: boolean): Function
    

    Asserts that a value is a function.

    Parameters
    • value: any

      Value supposed to be a function.

    • nullOK: boolean Optional

      Whether null values are acceptable.

    Returns
    Function

    asInt

    asInt(value: number, nullOK?: boolean, positive?: boolean): number
    

    Asserts that a value is an integer.

    Parameters
    • value: number

      Value supposed to be an integer.

    • nullOK: boolean Optional

      Whether null values are acceptable.

    • positive: boolean Optional

      Whether to accept only positive integers.

    Returns
    number

    asNumber

    asNumber(value: number, nullOK?: boolean, positive?: boolean): number
    

    Asserts that a value is a number.

    Parameters
    • value: number

      Value supposed to be numeric.

    • nullOK: boolean Optional

      Whether null values are acceptable.

    • positive: boolean Optional

      Whether to accept only positive numeric values.

    Returns
    number

    assert

    assert(condition: boolean, msg: string): void
    

    Throws an exception if a condition is false.

    Parameters
    • condition: boolean

      Condition expected to be true.

    • msg: string

      Message of the exception if the condition is not true.

    Returns
    void

    asString

    asString(value: string, nullOK?: boolean): string
    

    Asserts that a value is a string.

    Parameters
    • value: string

      Value supposed to be a string.

    • nullOK: boolean Optional

      Whether null values are acceptable.

    Returns
    string

    asType

    asType(value: any, type: any, nullOK?: boolean): any
    

    Asserts that a value is an instance of a given type.

    Parameters
    • value: any

      Value to be checked.

    • type: any

      Type of value expected.

    • nullOK: boolean Optional

      Whether null values are acceptable.

    Returns
    any

    changeType

    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.

    Parameters
    • value: any

      Value to convert.

    • type: DataType

      DataType to convert the value to.

    • format: string Optional

      Format to use when converting to or from strings.

    • refDate: Date Optional

      Reference date to use when parsing strings with missing information.

    Returns
    any

    clamp

    clamp(value: number, min: number, max: number): number
    

    Clamps a value between a minimum and a maximum.

    Parameters
    • value: number

      Original value.

    • min: number

      Minimum allowed value.

    • max: number

      Maximum allowed value.

    Returns
    number

    closest

    closest(e: any, selector: string): Element
    

    Finds the closest ancestor (including the original element) that satisfies a selector.

    Parameters
    • e: any

      Element where the search should start.

    • selector: string

      A string containing a selector expression to match elements against.

    Returns
    Element

    closestClass

    closestClass(e: any, className: string): Node
    

    Finds the closest ancestor (including the original element) that satisfies a class selector.

    Parameters
    • e: any

      Element where the search should start.

    • className: string

      A string containing the class name to match elements against.

    Returns
    Node

    contains

    contains(parent: any, child: any, popup?: boolean): boolean
    

    Checks whether an HTML element contains another.

    Parameters
    • parent: any

      Parent element.

    • child: any

      Child element.

    • popup: boolean Optional

      Whether to take Wijmo popups into account.

    Returns
    boolean

    copy

    copy(dst: any, src: any): 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.

    Parameters
    • dst: any

      The destination object.

    • src: any

      The source object.

    Returns
    any

    createElement

    createElement(html: string, appendTo?: HTMLElement, css?: any): HTMLElement
    

    Creates an element from an HTML string.

    Parameters
    • html: string

      HTML fragment to convert into an HTMLElement.

    • appendTo: HTMLElement Optional

      Optional HTMLElement to append the new element to.

    • css: any Optional

      Optional CSS attributes to apply to the root of the new element.

    Returns
    HTMLElement

    disableAutoComplete

    disableAutoComplete(e: HTMLInputElement): void
    

    Disables the autocomplete, autocorrect, autocapitalize, and spellcheck properties of an input element.

    Parameters
    Returns
    void

    enable

    enable(e: HTMLElement, value: boolean): void
    

    Enables or disables an element.

    Parameters
    • e: HTMLElement

      Element to enable or disable.

    • value: boolean

      Whether to enable or disable the element.

    Returns
    void

    escapeHtml

    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.

    Parameters
    • text: string

      Text to escape.

    Returns
    string

    escapeRegExp

    escapeRegExp(text: string): string
    

    Escapes a string by prefixing special regular expression characters with backslashes.

    Parameters
    • text: string

      Text to escape.

    Returns
    string

    evalTemplate

    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?
    
    

    Parameters
    • template: string

      String in template literal notation.

    • ctx: any Optional

      Object with properties acessible to the template.

    Returns
    string

    format

    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;
        }
    );
    
    

    Parameters
    • format: string

      A composite format string.

    • data: any

      The data object used to build the string.

    • formatFunction: Function Optional

      An optional function used to format items in context.

    Returns
    string

    getActiveElement

    getActiveElement(): HTMLElement
    

    Gets a reference to the element that contains the focus, accounting for shadow document fragments.

    Returns
    HTMLElement

    getAggregate

    getAggregate(aggType: Aggregate, items: any[], binding?: string, sheet?: any): void
    

    Calculates an aggregate value from the values in an array.

    Parameters
    • aggType: Aggregate

      Type of aggregate to calculate.

    • items: any[]

      Array with the items to aggregate.

    • binding: string Optional

      Name of the property to aggregate on (in case the items are not simple values).

    • sheet: any Optional
    Returns
    void

    getElement

    getElement(selector: any): HTMLElement
    

    Gets an element from a query selector.

    Parameters
    • selector: any

      An element, a query selector string, or a jQuery object.

    Returns
    HTMLElement

    getElementRect

    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.

    Parameters
    Returns
    Rect

    getType

    getType(value: any): DataType
    

    Gets the type of a value.

    Parameters
    • value: any

      Value to test.

    Returns
    DataType

    getTypes

    getTypes(arr: any[], limit?: number): IBindingInfo[]
    

    Gets an array containing the names and types of items in an array.

    Parameters
    • arr: any[]

      Array containing data items.

    • limit: number Optional

      Number of the array items to scan (1000 by default). Zero or negative value causes the function to scan all items.

    Returns
    IBindingInfo[]

    getUniqueId

    getUniqueId(baseId: string): string
    

    Creates a new unique id for an element by adding sequential numbers to a given base id.

    Parameters
    • baseId: string

      String to use as a basis for generating the unique id.

    Returns
    string

    getVersion

    getVersion(): string
    

    Gets the version of the Wijmo library that is currently loaded.

    Returns
    string

    glbz

    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'!`;
    
    

    Parameters
    • ...args: any[]
    Returns
    string

    hasClass

    hasClass(e: Element, className: string): boolean
    

    Checks whether an element has a class.

    Parameters
    • e: Element

      Element to check.

    • className: string

      Class to check for.

    Returns
    boolean

    hasItems

    hasItems(value: ICollectionView): boolean
    

    Checks whether an ICollectionView is defined and not empty.

    Parameters
    Returns
    boolean

    hidePopup

    hidePopup(popup: HTMLElement, remove?: any, fadeOut?: boolean): any
    

    Hides a popup element previously displayed with the showPopup method.

    Parameters
    • popup: HTMLElement

      Popup element to hide.

    • remove: any Optional

      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.

    • fadeOut: boolean Optional

      Whether to use a fade-out animation to make the popup disappear gradually.

    Returns
    any

    httpRequest

    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...
      }
    });
    
    

    Parameters
    Returns
    XMLHttpRequest

    isArray

    isArray(value: any): value
    

    Determines whether an object is an Array.

    Parameters
    • value: any

      Value to test.

    Returns
    value

    isBoolean

    isBoolean(value: any): value
    

    Determines whether an object is a Boolean.

    Parameters
    • value: any

      Value to test.

    Returns
    value

    isDate

    isDate(value: any): value
    

    Determines whether an object is a Date.

    Parameters
    • value: any

      Value to test.

    Returns
    value

    isEmpty

    isEmpty(obj: any): boolean
    

    Determines whether an object is empty (contains no enumerable properties).

    Parameters
    • obj: any

      Object to test.

    Returns
    boolean

    isFunction

    isFunction(value: any): value
    

    Determines whether an object is a function.

    Parameters
    • value: any

      Value to test.

    Returns
    value

    isInt

    isInt(value: any): value
    

    Determines whether an object is an integer.

    Parameters
    • value: any

      Value to test.

    Returns
    value

    isNullOrWhiteSpace

    isNullOrWhiteSpace(value: string): boolean
    

    Determines whether a string is null, empty, or whitespace only.

    Parameters
    • value: string

      Value to test.

    Returns
    boolean

    isNumber

    isNumber(value: any): value
    

    Determines whether an object is a number.

    Parameters
    • value: any

      Value to test.

    Returns
    value

    isObject

    isObject(value: any): boolean
    

    Determines whether a value is an object (as opposed to a value type, an array, or a Date).

    Parameters
    • value: any

      Value to test.

    Returns
    boolean

    isPrimitive

    isPrimitive(value: any): value
    

    Determines whether an object is a primitive type (string, number, Boolean, or Date).

    Parameters
    • value: any

      Value to test.

    Returns
    value

    isString

    isString(value: any): value
    

    Determines whether an object is a string.

    Parameters
    • value: any

      Value to test.

    Returns
    value

    isUndefined

    isUndefined(value: any): value
    

    Determines whether an object is undefined.

    Parameters
    • value: any

      Value to test.

    Returns
    value

    mouseToPage

    mouseToPage(e: any): Point
    

    Converts mouse or touch event arguments into a Point in page coordinates.

    Parameters
    • e: any
    Returns
    Point

    moveFocus

    moveFocus(parent: HTMLElement, offset: number): boolean
    

    Moves the focus to the next/previous/first focusable child within a given parent element.

    Parameters
    • parent: HTMLElement

      Parent element.

    • offset: number

      Offset to use when moving the focus (use zero to focus on the first focusable child).

    Returns
    boolean

    removeChild

    removeChild(e: Node): Node
    

    Safely removes an element from the DOM tree.

    Parameters
    • e: Node

      Element to remove from the DOM tree.

    Returns
    Node

    removeClass

    removeClass(e: Element, className: string): void
    

    Removes a class from an element.

    Parameters
    • e: Element

      Element that will have the class removed.

    • className: string

      Class (or space-separated list of classes) to remove from the element.

    Returns
    void

    saveFile

    saveFile(content: string | Blob, fileName: string, type?: string): void
    

    Saves content to a file.

    Parameters
    • content: string | Blob

      A string or a Blob object to be saved to a file.

    • fileName: string

      Name of the file to save, including extension.

    • type: string Optional

      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');

    Returns
    void

    setAriaLabel

    setAriaLabel(e: Element, value?: string): void
    

    Sets or clears an element's aria-label attribute.

    Parameters
    • e: Element

      Element that will be updated.

    • value: string Optional

      Value of the aria label, or null to remove the label from the element.

    Returns
    void

    setAttribute

    setAttribute(e: Element, name: string, value?: any, keep?: boolean): void
    

    Sets or clears an attribute on an element.

    Parameters
    • e: Element

      Element that will be updated.

    • name: string

      Name of the attribute to add or remove.

    • value: any Optional

      Value of the attribute, or null to remove the attribute from the element.

    • keep: boolean Optional

      Whether to keep original attribute if present.

    Returns
    void

    setChecked

    setChecked(cb: HTMLInputElement, checked: boolean): void
    

    Sets the checked and indeterminate properties of a checkbox input element.

    Parameters
    • cb: HTMLInputElement

      Checkbox element.

    • checked: boolean

      True, false, or null for checked, unchecked, or indeterminate.

    Returns
    void

    setCss

    setCss(e: any, css: any): void
    

    Modifies the style of an element by applying the properties specified in an object.

    Parameters
    • e: any

      Element or array of elements whose style will be modified.

    • css: any

      Object containing the style properties to apply to the element.

    Returns
    void

    setLicenseKey

    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.

    Parameters
    • licenseKey: string

      String containing the license key to use in this application.

    Returns
    void

    setSelectionRange

    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).

    Parameters
    • e: any

      HTMLInputElement or HTMLTextAreaElement to select.

    • start: number

      Offset into the text field for the start of the selection.

    • end: number Optional

      Offset into the text field for the end of the selection.

    • needFocus: boolean Optional
    Returns
    boolean

    setText

    setText(e: HTMLElement, text: string): void
    

    Sets the text content of an element.

    Parameters
    • e: HTMLElement

      Element that will have its content updated.

    • text: string

      Plain text to be assigned to the element.

    Returns
    void

    showPopup

    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:

    HTMLElement
    The bounding rectangle of the element.
    MouseEvent
    The bounding rectangle of the event's target element.
    Rect
    The given rectangle.
    null
    No reference rectangle; the popup is centered on the window.

    Call the hidePopup method to hide the popup.

    Parameters
    • popup: HTMLElement

      Element to show as a popup.

    • ref: any Optional

      Reference element or rectangle used to position the popup.

    • position: PopupPosition | Boolean Optional

      Position of the popup with respect to the reference element.

    • fadeIn: boolean Optional

      Use a fade-in animation to make the popup appear gradually.

    • copyStyles: any Optional

      Whether to copy font and color styles from the reference element, or an element to use as the style source.

    • hideOnScroll: Function Optional

      An optional function called when the popup is hidden as a result of a parent element scrolling.

    Returns
    any

    toFixed

    toFixed(value: number, prec: number, truncate: boolean): number
    

    Rounds or truncates a number to a specified precision.

    Parameters
    • value: number

      Value to round or truncate.

    • prec: number

      Number of decimal digits for the result.

    • truncate: boolean

      Whether to truncate or round the original value.

    Returns
    number

    toggleClass

    toggleClass(e: Element, className: string, addOrRemove?: boolean): void
    

    Adds or removes a class to or from an element.

    Parameters
    • e: Element

      Element that will have the class added.

    • className: string

      Class to add or remove.

    • addOrRemove: boolean Optional

      Whether to add or remove the class. If not provided, toggle the class.

    Returns
    void

    toHeaderCase

    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'.

    Parameters
    • text: string

      String to convert to header case.

    Returns
    string

    toPlainText

    toPlainText(html: string): string
    

    Converts an HTML string into plain text.

    Parameters
    • html: string

      HTML string to convert to plain text.

    Returns
    string

    tryCast

    tryCast(value: any, type: any): any
    

    Casts a value to a type if possible.

    Parameters
    • value: any

      Value to cast.

    • type: any

      Type or interface name to cast to.

    Returns
    any

    uidGenerator

    uidGenerator(): string
    

    Creates an unique id

    Returns
    string