Version

Handling Events (igTileManager)

Topic Overview

Purpose

This topic explains, with code examples, how to attach event handlers to the igTileManager™ control.

Required background

The following topics are prerequisites to understanding this topic:

  • Using Events in Ignite UI for jQuery: This topic demonstrates how to handle events raised by Ignite UI for jQuery® controls. Also included is an explanation of the differences between binding events on initialization and after initialization.

  • igTileManager Overview: This topic provides conceptual information about the igTileManager control including its main features, minimum requirements, and user functionality.

  • Adding igTileManager: This topic provides conceptual information about the igTileManager control including its main features, minimum requirements, and user functionality.

In this topic

This topic contains the following sections:

Handling Events – Conceptual Overview

Event handling summary

Attaching event handler functions to the igTileManager control is commonly done upon the initialization of the control. When the event occurs, the handling function is called.

When using the Ignite UI for MVC, it is necessary to assign event handlers at run-time because you cannot define event handlers within the HTML helper.

jQuery supports the following methods for assigning event handlers:

The following table discusses the details of each function:

Function Purpose
bind Attaches an event handler to existing DOM elements that match a given selector.
live Attaches an event handler to existing and any new DOM elements that match a given selector. Event handlers do not propagate up the DOM tree.
delegate Attaches an event handler to existing and any new DOM elements that match a given selector. Event handlers do propagate up the DOM tree.
on Attaches an event handler to existing and any new DOM elements that match a given selector. (The delegate function is obsolete in jQuery version 1.7, making on the preferred approach for establishing event handlers.)

When using bind(), keep in mind that it attaches the specified handler only on the currently available elements, which means dynamically added items (after the DOM is loaded) aren't included in the event handler assignments.

From these, the delegate() method is the recommended one because it offers the best performance and allows the event handler to be automatically re-attached if the control instance is destroyed and then re-created.

Event handling cases summary chart

The following table explains briefly the event handling cases related the igTileManager. Further details are available after the table.

Event handling case Details
Handling events upon initialization in jQuery When binding to events on widget initialization, you subscribe to the event using an option which in the following format: eventName: <handler> The valid settings for the eventName option are:
  • dataBinding
  • dataBound
  • rendered
  • rendering
  • tileMaximized
  • tileMaximizing
  • tileMinimized
  • tileMinimizing
  • tileRendered
  • tileRendering
Handling events at run-time in jQuery and ASP.NET MVC You can assign the event handler to the name of a function in order to implement the handler outside control initialization.

Event Reference

Event reference chart

The following table summarizes the purpose and functionality of the events supported by the igTileManager control.

Event Description
dataBinding Fired prior to data binding.
dataBound Fired after data binding is complete but rendering has not yet started.
rendered Fired after the widget has built and attached all the DOM it is rendering.
rendering Fired prior to starting the rendering of the widget, item descriptions should be present at this point if they are not explicitly provided but generated internally.
tileMaximized Fired after the maximizing animation has completed.
tileMaximizing Fired prior to a tile moving from minimized to maximized state.
tileMinimized Fired after the minimizing animation has completed.
tileMinimizing Fired prior to a tile moving from maximized to minimized state.
tileRendered Fired after a tile is rendered.
tileRendering Fired prior to starting the rendering of a tile.

Code Examples Summary

Code examples summary chart

The following table lists the code examples included in this topic.

Example Description
Handling the Rendered Event Upon Initialization in jQuery This example assigns an event handling function to the rendered event at initialization.
Handling the Rendered Event at Run-Time in ASP.NET MVC This example assigns an event hander to the rendered event at run-time.

Code Example: Handling the Rendered Event Upon Initialization in jQuery

Description

This example assigns an event handling function to the rendered event at initialization.

Code

In JavaScript:

$(".selector").igTileManager({
    rendered: function(evt, ui) { 
          // Handle event
    }
});

Code Example: Handling the Rendered Event at Run-Time in ASP.NET MVC

Description

This example assigns an event handler for the rendered event at run-time.

Code

In JavaScript:

$(document).delegate(".selector", "igtilemanagerrendered", function(evt, ui) { 
   // Handle event
});

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following samples provide additional information related to this topic.

View on GitHub