Property Reference (igDialog)

mainElement

object

null

DOM object

This property will allow the setting and getting of the jQuery HTML DIV object, which is used as main container for dialog. Note the following restrictions is necessary when you are using that property:

• The container is optional and it should not contain any children.
• The container should not have a parent.
• The container should not contain attributes, which might destroy layout or appearance of dialog.
• Change of this option is not supported.

container

object

null

DOM object

jQuery object

Gets or sets the HTML container element for igDialog. By default, the parent form of the original target element is used and if the parent is unavailable, then an HTML body object is used. Note that if the CSS container property “position” is not set with its value as "static", then the position value is set to "relative".

state

string

“opened”

“closed”

“minimized”

“maximized”

This property allows to you to set and get the state of the dialog.

pinned

boolean

true

false

Gets or sets the pinned state of the dialog.

position

object

null

[100, 200]

{ my: “left top”,

at: “left top”,

offset: “100 200” }

Gets or sets the initial position of the igDialog. That can be array of 2 numeric values which represent left/top coordinates. The other option is an object supported by jQuery position() method.

modal

boolean

true

false

Gets or sets the modal state of the igDialog. When the window is minimized or pinned, you cannot have this state.

draggable

boolean

true

false

Gets or sets the ability to drag the igDialog control.

resizable

boolean

true

false

Gets or sets the ability to resize the igDialog.

trackFocus

boolean

true

false

Sets or gets the ability to process the focus and blur events of the control itself as well as its child elements, located in the dialog.

enableHeaderFocus

boolean

true

false

Gets or sets the ability to adjust state of header to be in focused and not-focused state. This property works only if the trackFocus property is enabled.

tabIndex

number

0

Gets or sets the value for the tabIndex attribute applied to the igDialog main HTML element.

zIndex

number

1000

Gets or sets the value of the zIndex applied to the igDialog main HTML element.

temporaryUrl

string

null

“”

Gets or sets the temporary value for IFRAME “src” attribute. This property is used when changing the parent, if the parent of the base element is a HTML IFRAME element. This property is not obligatory, but may prevent exceptions.

enableDblclick

string / boolean

“auto”

true

false

Gets or sets the action that will happen if the igDialog header is double clicked.

If the value is “false” the window will not be affected by mouse double click. However, it will react if the value is “true”. Additionally, the “auto” state implies that the igDialog will be affected by double click only if there is a maximize icon in the header.

null

100

“100px”

“2em”

“100%”

Gets or sets initial height of the dialog in pixels for the normal state. Note that, if “%” is used than the size of the window browser object is used and it has effect only when the igDialog is opening

width

number

300

“300px”

“2em”

“100%”

Gets or sets the initial width of dialog in pixels for normal state. Note that, if “%” is used than the size of the window browser object is used and it has effect only when the igDialog is opening.

minHeight

number

100

“100px”

“2em”

“100%”

Gets or sets the minimal height of the dialog in the normal state.

minWidth

number

150

“150px”

“2em”

“100%”

Gets or sets the minimal width of the dialog in the normal state.

maxHeight

number

null

1500

“1500px”

“5em”

“100%”

Gets or sets the maximal height of the dialog in the normal state. Note that the value of that option takes effect only while resizing the igDialog.

maxWidth

number

null

1500

“1500px”

“5em”

“100%”

Gets or sets the maximal width of the dialog in the normal state. Note: that option takes effect only while resizing the dialog by end user.

closeOnEscape

boolean

true

false

Gets or sets the ability to close the dialog using the Esc key.

showCloseButton

boolean

true

false

Gets or sets the visibility of the close button in the igDialog header.

showMaximizeButton

boolean

true

false

Gets or sets the visibility of the maximize button in the igDialog header.

showPinButton

boolean

true

false

Gets or sets the visibility of the pin button in the header.

pinOnMinimized

boolean

true

false

Gets or sets the ability to automatically pin the igDialog when the dialog was minimized.

openAnimation

string/number

null

“slide”

“explode”

500

Gets or sets the animation applied to the dialog when it is opened. That can be any object supported by the jQuery show() method.

closeAnimation

string/number

null

“slide”

“explode”

500

Gets or sets the animation applied to the dialog when it is closed. That can be any object supported by the jQuery hide() method.

dialogClass

string

null

“container-class”

Gets or sets the name of the CSS class, which is applied to the main DIV element of the igDialog.

imageClass

string

null

“img-class”

Gets or sets name of the CSS class, which is applied to the SPAN element, located on the left side of igDialog header.

headerText

string

null

“HEADER”

Gets or sets the text which appears in the igDialog header.

showHeader

boolean

true

false

Gets or set the visibility of the igDialog header.

showFooter

boolean

true

false

Gets or sets the visibility of the igDialog footer.

footerText

string

null

“FOOTER”

Gets or sets text,which appears in the igDialog footer.

closeButtonTitle

string

null

“X”

Gets or sets the tooltip for close button in the igDialog.

minimizeButtonTitle

string

null

“MIN”

Gets or sets the tooltip for minimize button in the igDialog.

maximizeButtonTitle

string

null

“MAX”

Gets or sets the tooltip for maximize button in the igDialog.

pinButtonTitle

string

null

“PIN”

Gets or sets the tooltip for pin button in the igDialog.

unpinButtonTitle

string

null

“UNPIN”

Gets or sets the tooltip for unpin button in the igDialog.

restoreButtonTitle

string

null

“RESTORE”

Gets or sets the tooltip for restore button in the igDialog.

ContentJquerySelector

string

“#igDialog1”

This property defines the selector for the Ignite UI for MVC Dialog. This selector should be the same as the selector when the jQuery-only widget is created. For example, if your HTML placeholder has the id “igDialog1”, then the value of ContentJquerySelector should be “#igDialog”. Then, the Ignite UI for MVC will render following code:

$(“#igDialog”).igDialog();

ContentID

string

“igDialog1”

This property defines the selector for the Ignite UI for MVC Dialog. In contrast to the ContentJquerySelector property, you only need to pass the id of the HTML placeholder, without the #, and the Ignite UI for MVC will render it automatically. If your value in the ContentID is “igDialog”, then the result will be the same as in the previous property:

$(“#igDialog”).igDialog();

ID

string

“igDialog1”

This property defines the selector for the Ignite UI for MVC Dialog. It’s absolutely equivalent to the ContentID property – it accepts the same format for the parameter and renders the same code.

ContentHTML

string

“<div id="igDialog1”> igDialog Content </div>”

This property allows you to define the HTML placeholder of the Ignite UI for MVC Dialog. This HTML code will then become the content of the igDialog.

Container

string

“#idContainer”

“.classContainer”

Gets or sets the HTML container element for the igDialog. By default the parent form of the original target element is used and if that parent is unavailable, then the HTML body object is used. Note that if the CSS container property “position” is not set, its value is "static", then the position value is set to "relative".

State

string

DialogState.Opened

DialogState.Closed

DialogState.Minimized

DialogState.Maximized

This property allows you to set and get the state of the dialog.

Pinned

bool?

true

false

Gets or sets the pinned state of the dialog.

Position

int

Position(100, 200)

Gets or sets the initial position of the igDialog. The left and top positions are passed as arguments.

Modal

bool?

true

false

Gets or sets the modal state of the igDialog. When the window is minimized or pinned you cannot have this state.

Draggable

bool?

true

false

Gets or sets the ability to drag the igDialog control.

Resizable

bool?

true

false

Gets or sets the ability to resize the igDialog.

TrackFocus

bool?

true

false

Gets or sets the ability to process focus and blur events of child elements, located in the igDialog, in order to maintain the focused state. If that option is enabled, then the focus and blur event handlers are added to all the child elements of dialog. If dialog is modal or it can be maximized, then disabling this option is not recommended.

EnableHeaderFocus

bool?

true

false

Gets or sets the ability to adjust the state of the header to be in focused or not-focused state. This property works only if the trackFocus property is enabled.

TabIndex

int?

0

Gets or sets the value for the tabIndex attribute applied to the igDialog main HTML element.

ZIndex

int?

1000

Gets or sets the value of the zIndex applied to the igDialog main HTML element.

EnableDblclick

bool?

true

false

Gets or sets the action that will occur if the igDialog header is double clicked.

If the value is “false,” the window will not be affected by mouse double click. Contrastingly, it will react if the value is “true”. The “auto” state means that the igDialog will only be affected by double click if there is maximize icon in the header.

“Auto” is the default state, but you cannot change it dynamically through the Ignite UI for MVC.

Height

string

100

“100px”

“2em”

“100%”

Gets or sets the initial height of the dialog in pixels for the normal state. Note that if “%” is used, then the size of the window browser object is used and it only takes effect when the igDialog is opening.

Width

string

300

“300px”

“2em”

“100%”

Gets or sets the initial width of the dialog in pixels for the normal state. Note that if “%” is used, then the size of the window browser object is used and it only takes effect when the igDialog is opening.

MinHeight

string

100

“100px”

“2em”

“100%”

Gets or sets the minimal height of the dialog in the normal state.

MinWidth

string

150

“150px”

“2em”

“100%”

Gets or sets the minimal width of the dialog in the normal state.

MaxHeight

string

1500

“1500px”

“5em”

“100%”

Gets or sets the maximal height of the dialog in the normal state. Note that the value of that option has effect only while resizing igDialog.

MaxWidth

string

1500

“1500px”

“5em”

“100%”

Gets or sets the maximal width of the dialog in the normal state. Note: that option only takes effect while resizing dialog by end user.

CloseOnEscape

bool?

true

false

Gets or sets the ability to close the dialog using the Esc key.

ShowCloseButton

bool?

true

false

Gets or sets the visibility of the close button in the igDialog header.

ShowMaximizeButton

bool?

true

false

Gets or sets the visibility of the maximize button in the igDialog header.

ShowPinButton

bool?

true

false

Gets or sets the visibility of the pin button in the header.

PinOnMinimized

bool?

true

false

Gets or sets the ability to automatically pin the igDialog when the dialog was minimized.

OpenAnimation

string/int

“slide”

“explode”

500

Gets or sets animation applied to dialog when it is opened. That can be any object supported by jQuery show() method.

CloseAnimation

string/int

“slide”

“explode”

500

Gets or sets the animation applied to the dialog when it is closed. This can be any object supported by jQuery hide() method.

DialogClass

string

“container-class”

Gets or sets the name of the CSS class, which is applied to the main DIV element of the igDialog.

ImageClass

string

“img-class”

Gets or sets name of CSS class, which is applied to the SPAN element, located on the left side of the igDialog header.

HeaderText

string

“HEADER”

Gets or sets the text which appears in the igDialog header.

ShowHeader

bool?

true

false

Gets or sets the visibility of the igDialog header.

ShowFooter

bool?

true

false

Gets or sets the visibility of the igDialog footer.

FooterText

string

“FOOTER”

Gets or sets the text, which appears in the igDialog footer.

CloseButtonTitle

string

“X”

Gets or sets the tooltip for the close button in the igDialog.

MinimizeButtonTitle

string

“MIN”

Gets or sets the tooltip for the minimize button in the igDialog.

MaximizeButtonTitle

string

“MAX”

Gets or sets the tooltip for the maximize button in the igDialog.

PinButtonTitle

string

“PIN”

Gets or sets the tooltip for the pin button in the igDialog.

UnpinButtonTitle

string

“UNPIN”

Gets or sets the tooltip for the unpin button in the igDialog.

RestoreButtonTitle

string

“RESTORE”

Gets or sets the tooltip for the restore button in the igDialog.