Event Reference (igDialog)

Topic Overview

Purpose

The topic that introduces the user to the igDialog™ control’s events.

In this topic

This topic contains the following sections:

Event Reference

The following table summarizes the purpose and functionality of the igDialog control’s featured events:

Event	Description	Cancelable
stateChanging	Event is raised before the state of dialog was changed.	True
stateChanged	Event is raised after the state of dialog was changed.	False
animationEnded	Event is raised after the end animation, when the dialog was closed or opened.	False
focus	Event is raised when the dialog or its content gets focus.	False
blur	Event is raised when the dialog or its content loses focus.	False

Attaching Event Handlers in jQuery and MVC

Attaching Event Handlers in jQuery

To attach to an event, just define a handler for it in the same way you define a property. Now if the event is triggered, the handler will be called.

In JavaScript:

$("#igDialog1").igDialog({
      stateChanging: function (e, args) {
           // Handle event  
      }
});

The following example shows how this is done and it also demonstrates the use of the jQuery's on method to attach an event handler to a selected element:

https://github.com/IgniteUI/help-samples/tree/master/22.1/EN/dialog-window/api-and-events

Attaching Event Handlers in MVC

When you attach a handler in MVC, use the jQuery User Interface (UI) pattern for attaching handlers to widget events. This means you should use jQuery’s on, bind or live functions and pass the event’s name to them. The event name should be a lowercase string that is a concatenation of the name of the control and the event. You can do the same with the jQuery widget as well, but this would not be necessary because you can attach the event handlers directly when initializing the control. For more information, see the jQuery widget factory. The code bellow demonstrates how to attach handlers to igDialog events when implementing a MVC solution.

In JavaScript:

$("#igDialog1").live({ igdialogstatechanging: function (e, args) {
     // Handle event  
}});

Note: The jQuery live function is used in case some DOM elements are added after attaching the event to the handler.

Ignite UI | Help Topics