New to KendoReactLearn about KendoReact Free.

DialogProps

Represents the props of the KendoReact Dialog component.

NameTypeDefaultDescription

appendTo?

any

Defines the container to which the Dialog will be appended. Defaults to body.

  • If set to null the Dialog will be rendered without React Portal.
jsx
<Dialog appendTo={document.getElementById('container')} />

autoFocus?

boolean

Set the focus the Dialog container automatically when mounted. By default, the autoFocus is false.

jsx
<Dialog autoFocus={true} />

autoFocusedElement?

string

Specifies the query selector used to set the initial focus (see examples).

jsx
<Dialog autoFocusedElement="#input-id" />

className?

string

Sets a class of the Dialog DOM element.

jsx
<Dialog className="custom-class" />

closeIcon?

boolean

Specifies whether a close button should be rendered at the top corner of the dialog.

jsx
<Dialog closeIcon={true} />

contentStyle?

React.CSSProperties

The styles that are applied to the content of the Dialog.

jsx
<Dialog contentStyle={{ padding: '20px' }} />

dir?

string

Represents the dir HTML attribute.

jsx
<Dialog dir="rtl" />

height?

string | number

Specifies the height of the Dialog (see example).

jsx
<Dialog height="300px" />

id?

string

Sets the aria-labelledby value.

jsx
<Dialog id="dialog-id" />

minWidth?

string | number

Specifies the minimum width of the Dialog.

jsx
<Dialog minWidth="200px" />

boolean

Specifies if the Dialog will be modal by rendering an overlay under the component. Defaults to true.

jsx
<Dialog modal={false} />

onClose?

(event: DialogCloseEvent) => void

Fires when the Close button in the title is clicked or when the Esc button is pressed.

jsx
<Dialog onClose={(event) => console.log(event)} />

overlayStyle?

React.CSSProperties

Set styles to the Dialog overlay element rendered when the modal prop is enabled.

jsx
<Dialog overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />

style?

React.CSSProperties

The styles that are applied to the Dialog.

jsx
<Dialog style={{ border: '1px solid black' }} />

themeColor?

"primary" | "dark" | "light"

Configures the themeColor of the Dialog.

The available options are:

  • primary
  • dark
  • light
jsx
<Dialog themeColor="dark" />

title?

string | ReactElement<any>

Sets the title of the Dialog (see example). If title is not specified, the Dialog does not render a Close button.

jsx
<Dialog title="Dialog Title" />

width?

string | number

Specifies the width of the Dialog (see example).

jsx
<Dialog width="400px" />
Not finding the help you need?
Contact Support