Version

igDialog Maximize and Minimize

Topic Overview

Purpose

This topic demonstrates how to configure the igDialog so that it can be minimized and maximized, and explains how to perform these actions.

Required background

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.

In this topic

This topic contains the following sections:

Control states

States

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.

Preview in Normal State

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:

  1. Minimize button
  2. Maximize button

Preview in Maximized State

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:

  1. Minimize button
  2. Restore button

Preview in Minimized State

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:

  1. Restore button
  2. Maximize button

Control Configuration Summary

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()

Configuring Minimize and Maximize Icons

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.

Property Settings

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

Example

The screenshot below demonstrates how the igDialog looks as a result of the settings above:

Maximize and Minimize on Double Mouse Click

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.

Property Settings

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.

Minimize igDialog

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.

Code

The following code demonstrates how to close the igDialog using its API:

In JavaScript:

$('#igDialog).igDialog("minimize");

Example

The screenshot below shows you the position of the minimize button:

Maximize igDialog

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.

Code

The following code demonstrates how to show the igDialog using its API:

In JavaScript:

$('#igDialog).igDialog("maximize");

Example

The screenshot below shows you the position of the maximize button:

Related Content

Topics

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.

Samples

The following samples provide additional information related to this topic:

  • Icons: The sample that shows you how to show igDialog icons.

View on GitHub