DialogComponent

Represents the React Dialog Component

<Dialog></Dialog>

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.

import * as React from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { SampleBase } from '../common/sample-base';
import * as ReactDOM from 'react-dom';
export class Drag extends SampleBase<{}, {}> {
        public render(): JSX.Element {
        return (
            <DialogComponent id='defaultDialog' header='Diaog'  allowDragging={true} width='300px' >  Dialog Sample</DialogComponent>
        );
    }
}

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DialogComponent, AnimationSettingsModel } from '@syncfusion/ej2-react-popups';
import { SampleBase } from '../common/sample-base';

export class Animation extends SampleBase<{}, {}> {
    private animationSettings: AnimationSettingsModel;
    constructor(props: {}) {
        super(props);
        this.animationSettings = { effect: 'FadeZoom', duration: 400 };
    }
        public render(): JSX.Element {
        return (
            <DialogComponent  animationSettings={this.animationSettings}  width='300px' >  Dialog Sample</DialogComponent>
        );
    }
}

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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DialogComponent, ButtonPropsModel } from '@syncfusion/ej2-react-popups';
import { SampleBase } from '../common/sample-base';

export class Buttons extends SampleBase<{}, {}> {
        private buttons: ButtonPropsModel[];
    constructor(props: {}) {
        super(props);
        this.buttons = [{ buttonModel: { content: 'OK', isPrimary: true } }];
    }
        public render(): JSX.Element {
        return (
            <DialogComponent buttons={this.buttons} width='300px' >  Dialog Sample</DialogComponent>
        );
    }
}

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 | Function

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.

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 ”

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence

boolean

Enables or disables the persistence of the dialog’s dimensions and position state between page reloads.

Defaults to false

enableResize

boolean

Specifies the value whether the dialog component can be resized by the end-user. If enableResize is true, the dialog component creates grip to resize it diagonal direction.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

footerTemplate

HTMLElement | string | Function

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 ”

header

string | HTMLElement | Function

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 ”

minHeight

string | number

Specify the min-height of the dialog component.

Defaults to ”

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.

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DialogComponent, PositionDataModel } from '@syncfusion/ej2-react-popups';
import { SampleBase } from '../common/sample-base';

export class Position extends SampleBase<{}, {}> {
    private position: PositionDataModel;
    constructor(props: {}) {
        super(props);
        this.position = { X: 'center', Y: 'center' };
    }
        public render(): JSX.Element {
        return (
            <DialogComponent position={this.position} width='300px' >  Dialog Sample</DialogComponent>
        );
    }
}

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

resizeHandles

ResizeDirections[]

Specifies the resize handles direction in the dialog component that can be resized by the end-user.

Defaults to [‘South-East’]

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.

Defaults to 1000

Methods

destroy

To destroy the widget

Returns void

getButtons

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

Returns Button[] | Button

getDimension

Returns the current width and height of the Dialog

Returns DialogDimension

hide

Closes the dialog if it is in visible state.

Returns void

refreshPosition

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

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.

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.

beforeSanitizeHtml

EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value.

close

EmitType<Object>

Event triggers after the dialog has been closed.

created

EmitType<Object>

Event triggers when the dialog is created.

destroyed

EmitType<Event>

Event triggers when the dialog is destroyed.

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.

resizeStart

EmitType<Object>

Event triggers when the user begins to resize a dialog.

resizeStop

EmitType<Object>

Event triggers when the user stop to resize a dialog.

resizing

EmitType<Object>

Event triggers when the user resize the dialog.