This topic demonstrates how to configure the igDialog so that it can be minimized and maximized, and explains how to perform these actions.
The following topics are prerequisites to understanding this topic:
igDialog Overview: This topic introduces the user to the igDialog control’s main features.
Adding igDialog: This topic demonstrates how to add the igDialog control to a web page.
This topic contains the following sections:
As you already know, the igDialog has four states – opened, closed, minimized and maximized. In the context of this topic, when we talk about maximizing and minimizing, let us call the opened state normal. This will be the state when the window is neither minimized nor maximized.
The following table summarizes all of the possible states of the control. Additional details are available in the sections below.
| State | Description |
|---|---|
| Normal | This is the state when the window is neither minimized nor maximized. |
| Minimized | In this state the igDialog is minimized. |
| Maximized | In this state the igDialog is maximized. |
The picture below demonstrates the igDialog in its normal state. You can resize and move the window while in this state.
The buttons in the picture above are:
The picture below demonstrates the part of the igDialog in the maximized state. In maximized state the igDialog takes the full area of its parent. You cannot resize and move the window while in this state.
The buttons at the picture above are:
The picture below demonstrates the igDialog in the minimized state. You cannot resize window while in this state.
The buttons at the picture above are:
The following table lists the configurable aspects of the igDialog control. Additional details are available after the table.
| Configurable aspects | Details | Properties and Methods |
|---|---|---|
| Configuring minimize and maximize icons | The properties that need to be configured to allow minimizing and maximizing of the igDialog using control UI. | |
| Maximize and minimize on double mouse click | The property that allows you to configure the igDialog so that it will maximize or minimize when its header is double clicked. | enableDblclick |
| Maximize igDialog | Method from igDialog API that allows maximization. | maximize() |
| Minimize igDialog | Method from igDialog API that allows minimization. | minimize() |
The table below demonstrates which properties need to be configured in order to be able to minimize and maximize the igDialog control. By setting these properties, maximize and minimize buttons will appear in the igDialog header.
The following table maps the desired functionality to property settings:
| In order to: | Use this property: | And set it to: |
|---|---|---|
| Show maximize button | showMaximizeButton | true |
| Show minimize button | showMinimizeButton | true |
The screenshot below demonstrates how the igDialog looks as a result of the settings above:
If igDialog is configured, it can react when it is double clicked in the header. It will minimize or maximize depending on its current state.
The following table describes the behavior of the igDialog depending on the value of the enableDblclick property:
| Value | Use this property: |
|---|---|
| true | If the window was minimized, it will change its state to normal. If the window was normal, it will change its state to maximized. If the window was in the maximized state, then it will be restored to normal. |
| false | The igDialog will no react on mouse double-click. |
| “auto” | If the showMaximizeButton property is set to true, which means igDialog window has a maximize button, the control will react the same way it would if the value of enableDblclick was set to true. If the showMaximizeButton property is set to false, which means the igDialog window does not have a maximize button, the control will not be affected by a mouse double click. |
As a result of the configuration from the previous paragraph, you will be able to minimize the dialog window using the button at the top right corner of the header. If you have the showMinimizeButton option disabled, then you can minimize the control using its API.
The following code demonstrates how to close the igDialog using its API:
In JavaScript:
$('#igDialog).igDialog("minimize");
The screenshot below shows you the position of the minimize button:
As a result of the configuration from the previous paragraph, you will be able to maximize the dialog window using the button at the top right corner of the header or by double clicking on the dialog header. If you have the showMaximizeButton option disabled, then you can maximize the control using its API.
The following code demonstrates how to show the igDialog using its API:
In JavaScript:
$('#igDialog).igDialog("maximize");
The screenshot below shows you the position of the maximize button:
The following topics provide additional information related to this topic:
igDialog Overview: The topic introduces the user to the igDialog control’s main features.
Adding igDialog: This topic demonstrates how to add the igDialog control to a web page.
The following samples provide additional information related to this topic:
igDialog icons.View on GitHub