This topic demonstrates how to define a client event handler using Ignite UI for MVC. While the provided example uses the igCombo™ selectionChanged event, the same approach is used for all Ignite UI for MVC components that support it (all Line of Business Ignite UI for MVC components).
The following topics are prerequisites to understanding this topic:
Adding Controls to an MVC Project: This topic explains how to get started with Ignite UI for MVC® components.
Using Events in Ignite UI for MVC: This topic demonstrates how to handle events raised by Ignite UI for MVC controls. Also included is an explanation of the differences between binding events on initialization and after initialization.
Step 1 is optional and provides a basic ASP.NET MVC View to use when getting started. You can also use an existing ASP.NET MVC helper implementation and follow the procedure starting with step 2. Once you configured the initial ASP.NET MVC helper, you must define a function, known as an event handler, for handling the event logic. Next use the AddClientEvent method to attach the event. The first method argument accepts the string name of the event’s option and the second accepts the string name of the event handler function.
While this approach serves the majority of use cases, the second argument of the AddClientEvent method also accepts a string of JavaScript code to execute as well as a string representing the full JavaScript function as demonstrated in step 2 without the script element tags.
The requirement for completing this procedure is an ASP.NET MVC application configured with the Infragistics assemblies.
Following are the general conceptual steps for defining an event handler with Ignite UI for MVC.
Instantiating Ignite UI for MVC control.
Defining a JavaScript function to handle the event.
Configuring Ignite UI for MVC events.
This procedure explains how to configure a JavaScript function as an event handler using the ASP.NET MVC helper. The example shows how to handle the igCombo selectionChanged event to display an alert with the selected text.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
Following is a conceptual overview of the process:
Instantiating Ignite UI for MVC control.
Defining a JavaScript function to handle the event.
Configuring Ignite UI for MVC events.
The following steps demonstrate how to configure the Ignite UI for MVC igCombo to handle the selectionChanged event on the client.
Instantiate Ignite UI for MVC control.
If adding an event to an existing Ignite UI for MVC implementation, see step 2. If starting without an existing Ignite UI for MVC implementation, copy the below code into your project containing Ignite UI for MVC igCombo.
In ASPX:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ShipMethod>>" %>
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="<%= Url.Content("~/infragistics/css/themes/infragistics/infragistics.theme.css") %>" rel="stylesheet" />
<link href="<%= Url.Content("~/infragistics/css/structure/infragistics.css") %>" rel="stylesheet" />
<script src="<%= Url.Content("~/js/jquery.js") %>"></script>
<script src="<%= Url.Content("~/js/jquery-ui.js") %>"></script>
<script src="<%= Url.Content("~/js/modernizr.js") %>"></script>
<script src="<%= Url.Content("~/infragistics/js/infragistics.core.js") %>"></script>
<script src="<%= Url.Content("~/infragistics/js/infragistics.lob.js") %>"></script>
</head>
<body>
<%= Html.Infragistics().Combo()
.DataSource(Model)
.TextKey("DisplayText")
.ValueKey("Value")
.AddClientEvent("selectionChanged", "comboSelectionChanged")
.Render()
%>
</body>
</html>
In C#:
using System.Collections.Generic;
using System.Web.Mvc;
public class HomeController : Controller
{
public ActionResult Index()
{
List<ShipMethod> shipMethods = new List<ShipMethod>
{
new ShipMethod{DisplayText="Standard", Value=0},
new ShipMethod{DisplayText="3 Business Days", Value=1},
new ShipMethod{DisplayText="2 Business Days", Value=2},
new ShipMethod{DisplayText="Next Business Day", Value=3},
new ShipMethod{DisplayText="International", Value=4},
};
return View(shipMethods);
}
}
Define a JavaScript function to handle the event.
Define a JavaScript function to handle the event and supply it with standard jQuery UI event arguments.
In ASPX:
<script>
function comboSelectionChanged(e, ui) {
alert("Shipping Method: " + ui.items[0].text);
}
</script>
Configure Ignite UI for MVC event.
Configure Ignite UI for MVC to call the JavaScript function when the event is fired.
In ASPX:
<%= Html.Infragistics().Combo()
.DataSource(Model)
.TextKey("DisplayText")
.ValueKey("Value")
.AddClientEvent("selectionChanged", "comboSelectionChanged")
.Render()
%>
Note: For the first parameter of the AddClientEvent method, do not confuse the option name of the event for the string used when binding with the jQuery event API, e.g.
on,delegate, andlive. The string that should be entered as the argument for theAddClientEventmethod is the name of the option used to configure the event when instantiating with the jQuery UI widget in JavaScript.
The following topic provides additional information related to this topic.
View on GitHub