Search results

Dialog

Represents the dialog component that displays the information and get input from the user. Two types of dialog components are Modal and Modeless (non-modal) depending on its interaction with parent application.

<div id="dialog"></div>
<script>
  var dialogObj = new Dialog({ header: 'Dialog' });
  dialogObj.appendTo("#dialog");
</script>

Properties

allowDragging

boolean

Specifies the value whether the dialog component can be dragged by the end-user. The dialog allows to drag by selecting the header and dragging it for re-position the dialog.

More information on the draggable behavior can be found on this documentation section.

Defaults to false

animationSettings

AnimationSettingsModel

Specifies the animation settings of the dialog component. The animation effect can be applied on open and close the dialog with duration and delay.

More information on the animation settings in dialog can be found on this documentation section.

{% codeBlock src=“dialog/animation-api/index.ts” %}{% endcodeBlock %}

{% codeBlock src=“dialog/animation-api/index.html” %}{% endcodeBlock %}

Defaults to { effect: ‘Fade’, duration: 400, delay:0 }

buttons

ButtonPropsModel[]

Configures the action buttons that contains button properties with primary attributes and click events. One or more action buttons can be configured to the dialog.

More information on the button configuration can be found on this documentation section.

{% codeBlock src=“dialog/buttons-api/index.ts” %}{% endcodeBlock %}

{% codeBlock src=“dialog/buttons-api/index.html” %}{% endcodeBlock %}

Defaults to [{}]

closeOnEscape

boolean

Specifies the boolean value whether the dialog can be closed with the escape key that is used to control the dialog’s closing behavior.

Defaults to true

content

string | HTMLElement

Specifies the value that can be displayed in dialog’s content area. It can be information, list, or other HTML elements. The content of dialog can be loaded with dynamic data such as database, AJAX content, and more. {% codeBlock src=“dialog/content-api/index.ts” %}{% endcodeBlock %}

{% codeBlock src=“dialog/content-api/index.html” %}{% endcodeBlock %}

Defaults to

cssClass

string

Specifies the CSS class name that can be appended with root element of the dialog. One or more custom CSS classes can be added to a dialog.

Defaults to

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

footerTemplate

string

Specifies the template value that can be displayed with dialog’s footer area. This is optional property and can be used only when the footer is occupied with information or custom components. By default, the footer is configured with action buttons. If footer template is configured to dialog, the action buttons property will be disabled.

More information on the footer template configuration can be found on this documentation section.

Defaults to

Specifies the value that can be displayed in the dialog’s title area that can be configured with plain text or HTML elements. This is optional property and the dialog can be displayed without header, if the header property is null.

Defaults to

height

string | number

Specifies the height of the dialog component.

Defaults to ‘auto’

isModal

boolean

Specifies the Boolean value whether the dialog can be displayed as modal or non-modal.

  • Modal: It creates overlay that disable interaction with the parent application and user should respond with modal before continuing with other applications.
  • Modeless: It does not prevent user interaction with parent application.

Defaults to false

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to undefined

position

PositionDataModel

Specifies the value where the dialog can be positioned within the document or target. The position can be represented with pre-configured positions or specific X and Y values.

  • X value: left, center, right, or offset value.
  • Y value: top, center, bottom, or offset value.

Defaults to {X:‘center’, Y:‘center’}

showCloseIcon

boolean

Specifies the value that represents whether the close icon is shown in the dialog component.

Defaults to false

target

HTMLElement | string

Specifies the target element in which to display the dialog. The default value is null, which refers the document.body element.

Defaults to null

visible

boolean

Specifies the value that represents whether the dialog component is visible.

Defaults to true

width

string | number

Specifies the width of the dialog.

Defaults to ‘100%’

zIndex

number

Specifies the z-order for rendering that determines whether the dialog is displayed in front or behind of another component.

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

To destroy the widget

Returns void

getButtons

Returns the dialog button instances. Based on that, you can dynamically change the button states.

Parameter Type Description
index (optional) number Index of the button.

Returns Button[] | Button

hide

Closes the dialog if it is in visible state.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshPosition

Refreshes the dialog’s position when the user changes its header and footer height/width dynamically.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

show

Opens the dialog if it is in hidden state. To open the dialog with full screen width, set the parameter to true.

Parameter Type Description
isFullScreen (optional) boolean Enable the fullScreen Dialog.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

beforeClose

EmitType<BeforeCloseEventArgs>

Event triggers before the dialog is closed. If you cancel this event, the dialog remains opened. Set the cancel argument to true to cancel the closure of a dialog.

beforeOpen

EmitType<BeforeOpenEventArgs>

Event triggers when the dialog is being opened. If you cancel this event, the dialog remains closed. Set the cancel argument to true to cancel the open of a dialog.

close

EmitType<Object>

Event triggers after the dialog has been closed.

created

EmitType<Object>

Event triggers when the dialog is created.

drag

EmitType<Object>

Event triggers when the user drags the dialog.

dragStart

EmitType<Object>

Event triggers when the user begins dragging the dialog.

dragStop

EmitType<Object>

Event triggers when the user stop dragging the dialog.

open

EmitType<Object>

Event triggers when a dialog is opened.

overlayClick

EmitType<Object>

Event triggers when the overlay of dialog is clicked.