A newer version of this page is available. Switch to the current version.

jQuery/JS Common - utils - ui

An object that serves as a namespace for DevExtreme UI widgets as well as for methods implementing UI logic in DevExtreme sites/applications.

dialog

An object that serves as a namespace for methods displaying a message in an application/site.

dxOverlay

An object that serves as a namespace for static methods that affect overlay widgets.

notify(message, type, displayTime)

Creates a toast message.

import notify from "devextreme/ui/notify"
Parameters:
message:

String

The message's text.

type:

String

| undefined

The message's type: "info", "warning", "error" or "success".

displayTime:

Number

| undefined

The time interval in milliseconds for which the message is displayed.

jQuery
JavaScript
$(function() {
    DevExpress.ui.notify("Warning message", "warning", 500);
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        notify("Warning message", "warning", 500);
    }
}
Vue
DxComponent.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

export default {
    mounted: function() {
        this.$nextTick(() => {
            notify("Warning message", "warning", 500);
        })
    }
}
</script>
React
DxComponent.js
import React from 'react';
import notify from 'devextreme/ui/notify';

class DxComponent extends React.Component {
    componentDidMount() { 
        notify("Warning message", "warning", 500);
    }
}
export default DxComponent;

View Demo

notify(options, type, displayTime)

Creates a toast message.

import notify from "devextreme/ui/notify"
Parameters:
options:

Object

The Toast configuration.

type:

String

| undefined

The message's type: "info", "warning", "error" or "success".

displayTime:

Number

| undefined

The time interval in milliseconds for which the message is displayed.

jQuery
JavaScript
$(function() {
    DevExpress.ui.notify({ message: "Error message", width: 300, shading: true }, "error", 500);
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() { 
        notify({ message: "Error message", width: 300, shading: true }, "error", 500);
    }
}
Vue
DxComponent.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

export default {
    mounted: function() {
        this.$nextTick(() => {
            notify({ message: "Error message", width: 300, shading: true }, "error", 500);
        })
    }
}
</script>
React
DxComponent.js
import React from 'react';
import notify from 'devextreme/ui/notify';

class DxComponent extends React.Component {
    componentDidMount() { 
        notify({ message: "Error message", width: 300, shading: true }, "error", 500);
    }
}
export default DxComponent;
See Also

setTemplateEngine(name)

Sets a template engine.

import setTemplateEngine from "devextreme/ui/set_template_engine"
Parameters:
templateEngineName:

String

The template engine's name: "jquery-tmpl", "jsrender", "mustache", "hogan", "underscore", "handlebars" and "doT".

If you use the jQuery approach, you can register a custom template engine to define custom templates for widget elements. For this purpose, call the DevExpress.ui.setTemplateEngine(name) method passing the name of the required template engine as a parameter.

If there is no required template engine within the supported engines, use the DevExpress.ui.setTemplateEngine(options) method passing an object that provides functions for template parsing and rendering.

NOTE
This method does not apply if Knockout or AngularJS libraries are attached to your application. In this case, the Knockout or AngularJS built-in template engine is used.

setTemplateEngine(options)

Sets a custom template engine defined via custom compile and render functions.

import setTemplateEngine from "devextreme/ui/set_template_engine"
Parameters:
templateEngineOptions:

Object

An object providing functions for parsing and rendering templates.

Object structure:
Name Type Description
compile

Function

A function that parses the passed HTML or DOM element and returns a template.

render

Function

A function that inserts data into the template returned by the "compile" function and returns the HTML element to be rendered. The template, data and item index are passed as the function's parameters. Note that the item index is defined only for collection widgets, for example, List, SelectBox, Scheduler.

If you need to define a custom template for widget items, you can use a custom template engine, which is different from Knockout and AngularJS engines. To use this engine, call the DevExpress.ui.setTemplateEngine(name) method passing the name of one of the supported template engines. If your template engine is not supported, call the DevExpress.ui.setTemplateEngine(options) method passing an object with the compile and render fields that are set to functions preparing a template and inserting data, respectively.

themes

An object that serves as a namespace for the methods that work with DevExtreme CSS Themes.

import themes from "devextreme/ui/themes"