WindowProps

Represents the props of the KendoReact Window component.

Name	Type	Default	Description
appendTo?	"null" | HTMLElement		Defines the container to which the Window will be appended. Defaults to its parent element. If set to null, the Window will be rendered without React Portal. jsx <Window appendTo={document.body} />
autoFocus?	boolean		Focus the Window container automatically when mounted. By default, the autoFocus is true. jsx <Window autoFocus={false} />
className?	string		Sets a class of the Window DOM element. jsx <Window className="custom-class" />
closeButton?	React.ComponentType<any>		Specifies if the Window will render the close button. jsx <Window closeButton={CustomCloseButton} />
doubleClickStageChange?	boolean		Specifies if the Window stage will change on title double click. This is on by default. jsx <Window doubleClickStageChange={false} />
draggable?	boolean		Specifies if the Window will be draggable (see example). jsx <Window draggable={true} />
height?	number		Specifies the height of the Window (see example). jsx <Window height={500} />
id?	string		Sets the id attribute value of the wrapper element of the Window. jsx <Window id="my-window" />
initialHeight?	number		Specifies the initial height of the Window (see example). The component will be in an uncontrolled mode. jsx <Window initialHeight={200} />
initialLeft?	number		Specifies the initial left value (see example). The Window will be in an uncontrolled mode. jsx <Window initialLeft={100} />
initialTop?	number		Specifies the initial top value (see example). The component will be in an uncontrolled mode. jsx <Window initialTop={50} />
initialWidth?	number		Specifies the initial width of the Window (see example). The component will be in an uncontrolled mode. jsx <Window initialWidth={300} />
left?	number		Specifies the left coordinates of the Window. jsx <Window left={150} />
maximizeButton?	React.ComponentType<any>		Specifies if the Window will render the maximize button. jsx <Window maximizeButton={CustomMaximizeButton} />
minHeight?	number		Specifies the minimum height of the Window (see example). jsx <Window minHeight={100} />
minimizeButton?	React.ComponentType<any>		Specifies if the Window will render the minimize button. jsx <Window minimizeButton={CustomMinimizeButton} />
minWidth?	number		Specifies the minimum width of the Window (see example). jsx <Window minWidth={100} />
modal?	boolean		Specifies if the Window will be modal by rendering an overlay under the component. 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. jsx <Window onClose={(event) => console.log('Window closed', event)} />
onMove?	(event: WindowMoveEvent) => void		Fires when the Window is dragged. jsx <Window onMove={(event) => console.log('Window moved', event)} />
onResize?	(event: WindowMoveEvent) => void		Fires when the Window resizes. 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. jsx <Window onStageChange={(event) => console.log('Stage changed', event)} />
overlayStyle?	React.CSSProperties		Set styles to the Window overlay element rendered when the modal prop is enabled. jsx <Window overlayStyle={{ opacity: 0.5 }} />
resizable?	boolean		Specifies if the Window will be resizable (see example). jsx <Window resizable={true} />
restoreButton?	React.ComponentType<any>		Specifies if the Window will render the restore button. jsx <Window restoreButton={CustomRestoreButton} />
shouldUpdateOnDrag?	boolean		Specifies if the Window content will update during resizing. jsx <Window shouldUpdateOnDrag={true} />
stage?	string		Controls the state of the Window (see example). The supported values are: DEFAULT MINIMIZED FULLSCREEN jsx <Window stage="DEFAULT" />
style?	React.CSSProperties		Set styles to the Window element. jsx <Window style={{ backgroundColor: 'red' }} />
themeColor?	"primary" | "dark" | "light"		Configures the themeColor of the Window. The available options are: primary dark light jsx <Window themeColor="dark" />
title?	React.ReactNode		Specifies the title of the Window (see example). jsx <Window title="My Window" />
top?	number		Specifies the top coordinates of the Window. jsx <Window top={100} />
width?	number		Specifies the width of the Window. jsx <Window width={400} />