New to Kendo UI for AngularStart a free 30-day trial

WindowComponent

Represents the Kendo UI Window component for Angular.

html
<kendo-window title="My Window" [width]="400" [height]="300">
</kendo-window>

Selector

kendo-window

Export Name

Accessible in templates as #kendoWindowInstance="kendoWindow"

Inputs

NameTypeDefaultDescription

autoFocusedElement

string

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

draggable

boolean

true

Specifies if the user can drag the component.

height

number

Sets the height in pixels.

keepContent

boolean

false

Specifies if the content stays in the DOM when minimized.

left

number

Sets the initial left offset in pixels.

minHeight

number

100

Sets the minimum height in pixels.

minWidth

number

120

Sets the minimum width in pixels.

resizable

boolean

true

Specifies if the user can resize the component.

state

WindowState

Sets the initial state of the Window.

themeColor

WindowThemeColor

Sets the predefined theme color for the Window. The color applies to the title bar background and border, and updates the text color.

title

string

Sets the text in the title bar.

top

number

Sets the initial top offset in pixels.

width

number

Sets the width in pixels.

Events

NameTypeDescription

close

EventEmitter<any>

Fires when the user closes the Window.

dragEnd

EventEmitter<any>

Fires after the Window has been moved by the user.

dragStart

EventEmitter<any>

Fires when the user starts to move the Window.

heightChange

EventEmitter<number>

Fires when the height property is updated after resizing. The event data contains the new height. Allows two-way binding of the height property.

leftChange

EventEmitter<number>

Fires when the left property is updated after dragging or resizing. The event data contains the new left offset. Allows two-way binding of the left property.

resizeEnd

EventEmitter<any>

Fires after the Window has been resized by the user.

resizeStart

EventEmitter<any>

Fires when the user starts to resize the Window.

stateChange

EventEmitter<WindowState>

Fires when the state property is updated. The event data contains the new state. Allows two-way binding of the state property.

topChange

EventEmitter<number>

Fires when the top property is updated after dragging or resizing. The event data contains the new top offset. Allows two-way binding of the top property.

widthChange

EventEmitter<number>

Fires when the width property is updated after resizing. The event data contains the new width. Allows two-way binding of the width property.

Methods

bringToFront

Brings the current Window component on top of other Window components on the page.

focus

Focuses the wrapper of the Window component.

setDimension

Manually updates the width or height option of the Window. The required style will be applied to the Window wrapper element and the corresponding property of the component instance will be updated. This method is intended to be used for sizing dynamically created components using the WindowService

Parameters

dimension

WindowDimensionSetting

The option to update.

value

number

The value in pixels.

setOffset

Manually updates the top or left offset of the Window. The required style will be applied to the Window wrapper element and the corresponding property of the component instance will be updated. This method is intended to be used for positioning dynamically created components using the WindowService

Parameters

offset

WindowOffsetSetting

The option to update.

value

number

The value in pixels.

In this article
SelectorExport NameInputsEventsMethods
Not finding the help you need?
Contact Support