New to KendoReact? Start a free 30-day trial

WindowProps

Interface

Represents the props of the KendoReact Window component.

Definition

Package:@progress/kendo-react-dialogs

Properties

appendTo?

null | HTMLElement

Defines the container to which the Window will be appended. If set to null, the Window will be rendered without React Portal.

Default:

parent element

Example:

jsx

<Window appendTo={document.body} />

autoFocus?

boolean

Focus the Window container automatically when mounted.

Default:

true

Example:

jsx

<Window autoFocus={false} />

className?

string

Sets a class of the Window DOM element.

Example:

jsx

<Window className="custom-class" />

closeButton?

ComponentType<any>

Specifies if the Window will render the close button.

Example:

jsx

<Window closeButton={CustomCloseButton} />

doubleClickStageChange?

boolean

Specifies if the Window stage will change on title double click.

Default:

true

Example:

jsx

<Window doubleClickStageChange={false} />

draggable?

boolean

Specifies if the Window will be draggable (see example).

Default:

true

Example:

jsx

<Window draggable={true} />

height?

null | number

Specifies the height of the Window (see example). When set to null, the window is automatically sized to fit its content.

Example:

jsx

<Window height={500} />

id?

string

Sets the id attribute value of the wrapper element of the Window.

Example:

jsx

<Window id="my-window" />

initialHeight?

null | number

Specifies the initial height of the Window (see example). The component will be in an uncontrolled mode.

Example:

jsx

<Window initialHeight={200} />

initialLeft?

number

Specifies the initial left value (see example). The Window will be in an uncontrolled mode.

Example:

jsx

<Window initialLeft={100} />

initialTop?

number

Specifies the initial top value (see example). The component will be in an uncontrolled mode.

Example:

jsx

<Window initialTop={50} />

initialWidth?

number

Specifies the initial width of the Window (see example). The component will be in an uncontrolled mode.

Example:

jsx

<Window initialWidth={300} />

left?

number

Specifies the left coordinates of the Window.

Example:

jsx

<Window left={150} />

maximizeButton?

ComponentType<any>

Specifies if the Window will render the maximize button.

Example:

jsx

<Window maximizeButton={CustomMaximizeButton} />

minHeight?

number

Specifies the minimum height of the Window (see example).

Default:

100

Example:

jsx

<Window minHeight={100} />

minimizeButton?

ComponentType<any>

Specifies if the Window will render the minimize button.

Example:

jsx

<Window minimizeButton={CustomMinimizeButton} />

minWidth?

number

Specifies the minimum width of the Window (see example).

Default:

120

Example:

jsx

<Window minWidth={100} />

boolean

Specifies if the Window will be modal by rendering an overlay under the component.

Default:

false

Example:

jsx

<Window modal={true} />

onClose?

(event: WindowActionsEvent) => void

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

Parameters:eventWindowActionsEvent

Example:

jsx

<Window onClose={(event) => console.log('Window closed', event)} />

onMove?

(event: WindowMoveEvent) => void

Fires when the Window is dragged.

Parameters:eventWindowMoveEvent

Example:

jsx

<Window onMove={(event) => console.log('Window moved', event)} />

onResize?

(event: WindowMoveEvent) => void

Fires when the Window resizes.

Parameters:eventWindowMoveEvent

Example:

jsx

<Window onResize={(event) => console.log('Window resized', event)} />

onStageChange?

(event: WindowActionsEvent) => void

Fires when the DEFAULT, FULLSCREEN, or MINIMIZED state of the Window is changed.

Parameters:eventWindowActionsEvent

Example:

jsx

<Window onStageChange={(event) => console.log('Stage changed', event)} />

overlayStyle?

CSSProperties

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

Example:

jsx

<Window overlayStyle={{ opacity: 0.5 }} />

resizable?

boolean

Specifies if the Window will be resizable (see example).

Default:

true

Example:

jsx

<Window resizable={true} />

restoreButton?

ComponentType<any>

Specifies if the Window will render the restore button.

Example:

jsx

<Window restoreButton={CustomRestoreButton} />

shouldUpdateOnDrag?

boolean

Specifies if the Window content will update during resizing.

Example:

jsx

<Window shouldUpdateOnDrag={true} />

stage?

string

Controls the state of the Window (see example).

The supported values are:

DEFAULT
MINIMIZED
FULLSCREEN

Example:

jsx

<Window stage="DEFAULT" />

style?

CSSProperties

Set styles to the Window element.

Example:

jsx

<Window style={{ backgroundColor: 'red' }} />

title?

ReactNode

Specifies the title of the Window (see example).

Example:

jsx

<Window title="My Window" />

top?

number

Specifies the top coordinates of the Window.

Example:

jsx

<Window top={100} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration so AI agents can interact with this Window. Set to true to use the provider-level dataName, or pass a config object to override.

Requires a WebMcpProvider ancestor from @progress/kendo-react-webmcp.

width?

number

Specifies the width of the Window.

Example:

jsx

<Window width={400} />