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
App.vue
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';

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

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

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
App.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
App.js
import React from 'react';
import notify from 'devextreme/ui/notify';

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

repaintFloatingActionButton()

Repaints the Floating Action Button.

import speedDialAction from "devextreme/ui/speed_dial_action/repaint_floating_action_button"

Call this method to repaint the Floating Action Button after you change the globalConfig.floatingActionButtonConfig at runtime:

jQuery
JavaScript
$(function() {
    // ...
    DevExpress.config({
        floatingActionButtonConfig: {
            // ...
        }
    });
    DevExpress.ui.repaintFloatingActionButton();
})
Angular
app.component.ts
import { Component } from '@angular/core';
import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    changeFabConfig() {
        config({
            floatingActionButtonConfig: {
                // ...
            }
        });
        repaintFloatingActionButton();
    }
}
Vue
App.vue
<template>
    <!-- ... -->
</template>
<script>
import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

export default {
    methods: {
        changeFabConfig() {
            config({
                floatingActionButtonConfig: {
                    // ...
                }
            });
            repaintFloatingActionButton();
        }
    }
}
</script>
React
App.js
import React from 'react';

import config from 'devextreme/core/config';
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';

class App extends React.Component {
    changeFabConfig() {
        config({
            floatingActionButtonConfig: {
                // ...
            }
        });
        repaintFloatingActionButton();
    }
}
export default App;
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 ui.themes from "devextreme/ui/themes"