igDialog Position

Topic Overview

Purpose

This topic demonstrates how to position igDialog™.

Required background

The following topics are prerequisites to understanding 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.

In this topic

This topic contains the following sections:

• Control Configuration Summary
• Configuring igDialog Position
  • Property Formats
  • Example with Object
  • Example with jQuery UI Object
• Configure igDialog Stack Order
• Related Content
  • Topics
  • Samples

Control Configuration Summary

The following table lists the configurable aspects of the igDialog control. Additional details are available after the table.

Configuring igDialog Position

The igDialog can be positioned according to its parent. The control API has a property called position that can be configured and modified dynamically. The following table will show you how to use this property and what values it accepts.

Property Formats

The table below demonstrates what type of format property position accepts:

Example with Object

The code below demonstrates how the igDialog can be positioned using object:

In JavaScript:

$("#dialog").igDialog({
    position: { left: 100, top: 200 }
});

In C#:

<%= Html.Infragistics()
    .Dialog()
    .Position(100,200)
    .Render()
%>

Example with jQuery UI Position Object

The code below demonstrates how the igDialog can be positioned using specially defined objects supported by jQuery UI .position():

In JavaScript:

var dialogPosition = {
    my: “left top”,
    at: “left top”,
    of: window,
    offset: “100 200”
}
$("#dialog").igDialog({
    position: dialogPosition
});

Configure igDialog Stack Order

By default, the igDialog window appears at the top of the page stack. Its default zIndex value is 1000, which means if you don’t modify any other DOM elements with value higher than 1000, the dialog will appear at the top of the page. If you want to change this default value because you want to show the element over or underneath another element, you can do this by changing the zIndex value.

Example

The code below demonstrates how to change the zIndex:

In JavaScript:

$("#dialog").igDialog({
    zIndex: 1001
});

In C#:

<%= Html.Infragistics()
    .Dialog()
    .ZIndex(1001)
    .Render()
%>

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:

• API and Events: This sample demonstrates how to handle events in the Dialog Window control and API usage.