This topic explains, with code examples, how to attach event handlers to the igTileManager
™ control.
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.
This topic contains the following sections:
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.
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:
|
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. |
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. |
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. |
This example assigns an event handling function to the rendered event at initialization.
In JavaScript:
$(".selector").igTileManager({
rendered: function(evt, ui) {
// Handle event
}
});
This example assigns an event handler for the rendered event at run-time.
In JavaScript:
$(document).delegate(".selector", "igtilemanagerrendered", function(evt, ui) {
// Handle event
});
The following topics provide additional information related to this topic.
Binding igTileManager to Data: This topic explains how to bind the igTileManager
control to the supported data sources.
Configuring igTileManager: This topic explains how to configure the features and behavior of the igTileManager
control.
Accessibility Compliance (igTileManager): This topic explains the accessibility features of the igTileManager
control and provides information on how to achieve accessibility compliance for pages containing this control.
Known Issues and Limitations (igTileManager): This topic provides information about the known issues and limitations of the igTileManager
control and the available workarounds for them.
jQuery and MVC API Links (igTileManager): This topic provides links to the API reference documentation for the jQuery and its ASP.NET MVC helper class for the igTileManager
control.
The following samples provide additional information related to this topic.
Tile Manager Binding to JSON: This sample demonstrates how to data bind the Tile Manager control to JSON data source.
Tile Manager Item Configurations: This sample demonstrates how to configure each item tile in terms of each position and size inside the igTileManager
.
View on GitHub