Skip to main content

Message properties

Message box

Usage

dhx.message({
text?: string,
icon?: string,
css?: string,
html?: string,
node?: HTMLElement | string,
position?: "top-left" | "top-right" | "bottom-left" | "bottom-right", // "top-right" by default
expire?: number,
});

Description

The configuration object of a message box may take the following parameters:

text(optional) the text of a message box
icon(optional) an an icon from the used icon font
css(optional) the style of a message box
html(optional) the HTML content to be displayed in a message box

Related Sample: Message. Message with HTML content
node(optional) the container for a message box or its id
position(optional) the position of a message box: "top-left" | "top-right"| "bottom-left" | "bottom-right"; "top-right" by default

Related Sample: Message. Message positioning and container
expire(optional) the time period of displaying a message box before it disappears, in ms

Example

dhx.message({
text:"Message text",
icon:"dxi-clock",
css:"expire",
expire:1000
});

Related samples:

Alert box

Usage

dhx.alert({
text: string,
header?: string,
css?: string,
buttons?: string[],
buttonsAlignment?: "left" | "center" | "right", // "left" by default
blockerCss?: string,
htmlEnable?: boolean, // true by default
});

Description

The configuration object of an alert box may take the following parameters:

text(required) the text of an alert box
header(optional) the text of an alert box header
css(optional) the style of an alert box
buttons(optional) an array with the name of the alert button. By default, the button's name is "Apply"
buttonsAlignment(optional) the position of buttons: "left" | "center" | "right"; "left" by default
blockerCss(optional) the style of blocking the window when an alert box appears
htmlEnable(optional) enables/disables the HTML content to be displayed in an alert box; true by default

Related Sample: Message. Disable HTML content

Example

dhx.alert({
header:"Alert Header",
text:"Alert text",
buttonsAlignment:"center",
htmlEnable: false
});

Related samples:

Confirm box

Usage

dhx.confirm({
text: string,
header?: string,
css?: string,
buttons?: string[],
buttonsAlignment?: "left" | "center" | "right", // "right" by default
blockerCss?: string,
htmlEnable?: boolean, // true by default
});

Description

The configuration object of a confirm box may take the following parameters:

text(required) the text of a confirm box
header(optional) the text of a confirm box header
css(optional) the style of a confirm box
buttons(optional) an array with the names of the confirm buttons. By default, the buttons' names are "Reject" and "Apply"
buttonsAlignment(optional) the position of the button: "left" | "center" | "right"; "right" by default
blockerCss(optional) the style of blocking the window when a confirm box appears
htmlEnable(optional) enables/disables the HTML content to be displayed in a confirm box; true by default

Related Sample: Message. Disable HTML content

Example

dhx.confirm({
header:"Confirm Header",
text:"Confirm text",
buttons:["cancel", "apply"],
buttonsAlignment:"center",
htmlEnable: false
});

Related samples:

Tooltip

Usage

dhx.tooltip( text: string, {
node: HTMLElement | string,
margin?: number, // 8 by default
position?: "right" | "bottom" |"center" | "left" | "top", // "bottom" by default
css?: string,
force?: boolean, // false by default
showDelay?: number,
hideDelay?: number,
htmlEnable?: boolean, // false by default
});

Description

The dhx.tooltip() function takes two parameters:

  • text - the text of a tooltip
  • config - the configuration object of a tooltip

The configuration object of a tooltip may take the following parameters:

node(required) the target of tooltip or its id
margin(optional) margin between the node and tooltip, 8px by default
position(optional) the position of a tooltip: "right", "bottom", "center", "left", "top"; "bottom" by default
css(optional) the style of a tooltip box
force(optional) forces opening of a tooltip; if set to true, the showDelay and hideDelay settings are ignored, false by default
showDelay(optional) the time period that should pass before showing a tooltip, in ms
hideDelay(optional) the time period that should pass before hiding a tooltip, in ms
htmlEnable(optional) enables/disables the HTML content to be displayed in a tooltip; false by default

Example

dhx.tooltip("Tooltip from the right", {
node: "fourth",
position: "right",
margin: 2,
htmlEnable: true
});

Related Samples:

Change log:

  • The margin property of Tooltip was added in v8.0
  • The position property of Tooltip was extended by the "left" and "top" values in v8.0