jQuery/JS Common - Utils - ui
An object that serves as a namespace for DevExtreme UI components 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 UI components.
notify(message, type, displayTime)
Creates a toast message.
import notify from "devextreme/ui/notify"
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;notify(options, type, displayTime)
Creates a toast message.
import notify from "devextreme/ui/notify"
Parameters:
options:
The Toast configuration.
type:
| undefined
The message's type: "info", "warning", "error" or "success".
displayTime:
| 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
themes
An object that serves as a namespace for the methods that work with DevExtreme CSS Themes.
import ui.themes from "devextreme/ui/themes"
Feedback