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.
notify(message, type, displayTime)
jQuery
$(function() {
DevExpress.ui.notify("Warning message", "warning", 500);
})Angular
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
<template>
</template>
<script>
import notify from 'devextreme/ui/notify';
export default {
mounted: function() {
this.$nextTick(() => {
notify("Warning message", "warning", 500);
})
}
}
</script>React
import React from 'react';
import notify from 'devextreme/ui/notify';
class App extends React.Component {
componentDidMount() {
notify("Warning message", "warning", 500);
}
}
export default App;notify(options, type, displayTime)
jQuery
$(function() {
DevExpress.ui.notify({ message: "Error message", width: 300, shading: true }, "error", 500);
})Angular
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
<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
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.
Call this method to repaint the Floating Action Button after you change the globalConfig.floatingActionButtonConfig at runtime:
jQuery
$(function() {
// ...
DevExpress.config({
floatingActionButtonConfig: {
// ...
}
});
DevExpress.ui.repaintFloatingActionButton();
})Angular
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
<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
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)
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.
setTemplateEngine(options)
| Name | Type | Description |
|---|---|---|
| compile |
A function that parses the passed HTML or DOM element and returns a template. |
|
| render |
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.