Version

Handling Events

Topic Overview

Purpose

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

Required background

The following topics are prerequisites to understanding this topic:

  • igSplitter Overview: This topic provides conceptual information about the igSplitter control including its features and user functionality.

  • Adding igSplitter: This topic demonstrates, with code examples, how to add the igSplitter control to an HTML page in either JavaScript and ASP.NET MVC.

In this topic

This topic contains the following sections:

Handling Events – Conceptual Overview

Handling events summary

Attaching event handler functions to the igSplitter 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:

  • bind()
  • delegate()
  • live()
  • on()

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 igSplitter supports the following events:

  • collapsed – handled when panel collapsing has finished. It indicates which panel has been collapsed.
  • expanded –handled when panel expanding has finished. It indicates which panel has been expanded.
  • resizeStarted - fired at panels resizing when the splitter bar begins to move
  • resizing –fired continually while the splitter bar is moving within container. It is used for canceling the moving of the splitter bar
  • resizeEnded – fired at resizing panels when the splitter bar stops moving
  • layoutRefreshed – fired after the panels are refreshed because of browser's resizing.
  • layoutRefreshing – fired before the panels are refreshed because of browser's resizing.

Event handling cases summary chart

The following table explains briefly the event handling cases related the igSplitter. 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: The valid settings for the eventName option are:
  • collapsed
  • expanded
  • resizeStarted
  • resizing
  • resizeEnded
  • layoutRefreshed
  • layoutRefreshing
Handling events at run-time in jQuery and ASP.NET MVC You can assing the event handler to the name of a function in order to implement the handler outside control initialization.

Code Examples

Code examples summary

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

Example Description
Handling the resizeStarted Event Upon Initialization in jQuery An example of assigning event handling function to the resizeStarted event at initialization.
Handling the resizeStarted Event at Run-Time in ASP.NET MVC The code in this example assigns an event handler at run-time.

Code Example: Handling the resizeStarted Event Upon Initialization in jQuery

Description

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

Code

In JavaScript:

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

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

Description

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

Code

In JavaScript:

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

Splitter API and Events Demo

Sample below demonstrates how to handle events in the Splitter control and API usage.

https://github.com/IgniteUI/help-samples/tree/master/22.2/EN/splitter/api-events-splitter

Related Content

Samples

The following samples provide additional information related to this topic.

  • Basic Vertical Splitter: This sample demonstrates how to use the Splitter control to manage a page's vertical layout. The first container contains a Tree control with continents and countries. The left vertical panel has maximum and minimum ranges that a user can resize the panel. When a node is clicked, the description for the selected item is in the right panel.

  • Basic Horizontal Splitter: This sample demonstrates how to use the Splitter control to manage master/detail grid with horizontal layout. The first container contains a master grid with customers. After a row is clicked in master grid, in the second container is shown grid with orders that are made by this customer.

  • Nested Spitters: This sample demonstrates how to manage layout with nested splitters. The panel contains a Tree with continents, countries and cities. When you click on a node the map in the second splitter is centered according node's coordinates. If a country is selected, then a grid is displayed under the map with cities in that country. Panels are not resizable by default.

  • ASP.NET MVC Basic Usage: This example demonstrates how you can utilize the ASP.NET MVC helper for the igSplitter.

  • Splitter API and Events: This sample demonstrates how to handle events in the igSplitter control and API usage.

View on GitHub