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.

Included in: dx.mobile.js, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js

dialog

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

Module: ui/dialog

notify(message, type, displayTime)

Creates a toast message.

Module: ui/notify
Parameters:
message: String
A string value specifying the message text.
type: String
A string value specifying the message type.
displayTime: Number
A numeric value specifying the time span during which the message is shown.

The type parameter can take on one of the following values: 'info'|'warning'|'error'|'success'.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{text: 'Show notification', onClick: showNotification}"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">Type</div>
            <div class="dx-field-value" ng-model="currentType" dx-lookup="{ dataSource: notificationTypes }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.notificationTypes = ['info', 'warning', 'error', 'success'];
    $scope.currentType = $scope.notificationTypes[0];
    $scope.showNotification = function () {
        DevExpress.ui.notify('Notification message', $scope.currentType, 3000);
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
<div data-bind="dxButton: {text: 'Show notification', onClick: showNotification}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Type</div>
        <div class="dx-field-value" data-bind="dxLookup: { dataSource: notificationTypes, value: currentType }"></div>
    </div>
</div>
var types = ['info', 'warning', 'error', 'success'];
var viewModel = {
    notificationTypes: types,
    currentType: ko.observable(types[0]),
    showNotification: function () {
        DevExpress.ui.notify('Notification message', this.currentType, 3000);
    }
};
ko.applyBindings(viewModel);
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
<div id="button"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Type</div>
        <div class="dx-field-value" id="lookup"></div>
    </div>
</div>
$(function () {
    $("#button").dxButton({
        text: 'Show notification',
        onClick: function () {
            DevExpress.ui.notify('Notification message', $("#lookup").dxLookup("instance").option("value"), 3000);
        }
    });
    $("#lookup").dxLookup({
        dataSource: ['info', 'warning', 'error', 'success'],
        value: 'info'
    });
});
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}

notify(options)

Creates a toast message.

Module: ui/notify
Parameters:
options: Object
The configuration object of the **Toast** widget.

Pass the configuration object of the Toast widget as a parameter. Alternatively, use the notify(message, type, displayTime) method overload.

setTemplateEngine(name)

Sets a specified template engine.

Parameters:
templateEngineName: String
The name of the template engine to be set. The following values are acceptable: "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 function 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.

Parameters:
templateEngineOptions: Object
An object providing functions for parsing and rendering templates.
Object structure:
compile: function(html, $element)
A function that parses the passed HTML or DOM element and returns a template.
render: function(template, data)
A function that inserts data into the template returned by the "compile" function and returns the HTML element to be rendered. The data and template are passed as the function's parameters.

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.

Module: ui/themes