This topic explains, with a code examples, how to attach event handlers to the igLayoutManager™ control.
The following topics are prerequisites to understanding this topic:
Using Events in Ignite UI for jQuery: This topic explains how to manage the required resources to work with Ignite UI for jQuery® within a Web application.
igLayoutManager Overview: This topic explains the igLayoutManager control conceptually and provides information on the supported layouts and their uses.
Adding igLayoutManager: This topic demonstrates, with code examples, how to add the igLayoutManager control to an HTML page using either pure HTML, JavaScript, or ASP.MVC implementations.
This topic contains the following sections:
Attaching event handler functions to the igLayoutManager control is commonly done upon the initialization of the control.
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 igLayoutManager supports the following events:
itemRendering –fired after an item has been rendered in the container the itemsitemRendered –fired after all items are renderedrendered –fired before an item is going to accommodate 100% of the container's width or heightFor details on how to handle events, refer to the Using Events in Ignite UI for jQuery topic.
The following table explains briefly the event handling cases related the igLayoutManager. 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 <eventName> 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 lists the code examples included in this topic.
| Example | Description |
|---|---|
| Handling the itemRendered Event Upon Initialization in jQuery | This example assigns an event handling function to the itemRendered event upon initialization in jQuery. |
| Handling the itemRendered Event Upon Initialization in ASP.NET MVC | This example assigns an event handling function to the itemRendered event upon initialization using the Ignite UI for MVC. |
| Handling the itemRendered Event at Run-Time in jQuery | This example assigns an event handling function to the itemRendered event at run-time in jQuery. |
| Handling the itemRendered Event at Run-Time in ASP.NET MVC | This example assigns an event handling function to the itemRendered event at run-time using the Ignite UI for MVC. |
This example assigns an event handling function to the itemRendered event upon initialization in jQuery.
In JavaScript:
$(".selector").igLayoutManager({
itemRendered: function(evt, ui) {
// Handle event
}
});
This example assigns an event handling function to the itemRendered event upon initialization using the Ignite UI for MVC.
In ASPX (MVC):
@(Html.Infragistics().LayoutManager()
.AddClientEvent("iglayoutmanageritemrendered", "itemRenderedHandler")
.Render());
This example assigns an event handling function to the itemRendered event at run-time in jQuery.
In JavaScript:
$(document).delegate(".selector", "iglayoutmanageritemrendered", function(evt, ui) {
// Handle event
});
This example assigns an event handling function to the itemRendered event at run-time using the Ignite UI for MVC.
In JavaScript:
$(document).delegate(".selector", "iglayoutmanageritemrendered", function(evt, ui) {
// Handle event
});
The following topics provide additional information related to this topic.
igLayoutManager control. This includes the title area width the start position of the text and the title/subtitle text itself.The following samples provide additional information related to this topic.
ASP.NET MVC Basic Usage: This sample demonstrates using the Ignite UI for MVC Layout Manager control.
Border Layout from HTML Markup: This sample demonstrates initializing the igLayoutManager control’s Border layout from the HTML markup by assigning "center"/"left"/"right"/"header"/"footer" CSS classes.
Border Layout – Initializing with JavaScript: This sample demonstrates initializing the igLayoutManager control’s Border layout from JavaScript, by handling itemRendered events and assigning content to the created regions.
Responsive Column Layout: This sample demonstrates how the igLayoutManager control’s Column layout can be used by assigning classes to items thus specifying the area their content will span over. This sample does not use JavaScript initialization code: it is done with CSS and HTML only.
Responsive Flow Layout: This sample demonstrates the responsiveness of the igLayoutManager control’s Flow layout with various item sizes set either in pixels or percentages and setting the number of items in the igLayoutManager's options without the need for any initial markup.
Grid Layout with colspan and rowspan Support: This sample demonstrates the ability of the igLayoutManager control’s Grid layout to allow items to have arbitrary position in a grid with a predefined size including for items with different rowspan and colspan settings.
Grid Layout with Custom Size: This sample demonstrates the igLayoutManager control’s Grid layout having specific width and height for each column.
Responsive Vertical Layout" This sample s demonstrates the responsiveness of the igLayoutManager control’s Vertical layout with various item sizes set either in pixels or percentages and setting the number of items in the igLayoutManager's options without the need for any initial markup.
View on GitHub