igDialog Animations

Topic Overview

Purpose

This topic demonstrates how to animate the igDialog™ when it is either opened or closed.

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

The properties that need to be configured to animate igDialog upon closing and opening are:

Configuring igDialog Animation

For a better user interface experience you can create animations when the dialog is opening and closing. The value for any of the animation properties can be any parameter from the jQuery UI show()/hide() methods. For more information about the parameters, please review jQuery documents.

Property settings

The following table maps the desired animation features to property settings:

In order to:	Use this property:	And set it to:
Animate igDialog on opening	openAnimation	“slide”
Animate igDialog on closing	closeAnimation	“explode”

Example with jQuery

The code below demonstrates how set the igDialog animations in jQuery:

In JavaScript:

$("#dialog").igDialog({
    openAnimation: “slide”
    closeAnimation: "explode"
});

Example with MVC

The code below demonstrates how set the animations for the Ignite UI for MVC Dialog:

In C#:

<%= Html.Infragistics()
    .Dialog()
    .ContentID("dialog")
    .OpenAnimation("slide")
    .CloseAnimation("explode")
    .Render()
%>

Ignite UI | Help Topics