[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Collapse]Common Concepts
  [Expand]Web.config Modifications
  [Expand]Callback Exception Handling
  [Collapse]Client-Side Functionality
    Client-Side Functionality Overview
    Client-Side API Availability for a Web Control
    Client-Side Events
   [Expand]Passing Values Between Client and Server Sides
    How to Register JavaScript on DevExpress Callbacks
    IntelliSense for Client API
  [Expand]Cookies Support
  [Expand]Appearance Customization - Theming
   Icon Collection
  [Expand]Performance Optimization
  [Expand]CSS Image Sprites
   Data Annotation Attributes
   Supported Document Types
  [Expand]Accessibility Support
   Right to Left Support
   HTML Encoding
  [Expand]SharePoint Support
   Mobile Support
  [Expand]Office Document Management
   Cloud Storage Account Management
  [Expand]Web Farm and Web Garden Support
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Client-Side Events

DevExpress ASP.NET controls provide an advanced client-side API that increases web application efficiency via a combination of server-side and client-side processing. Client-side events allow you to perform web application logic on the client in response to end-user manipulations of a control.

Expanded Client-Side Events Editor (for WebForms only)

Use the Client-Side Events editor (available in the control’s Designer, as shown below) to write a client-side event handler. The editor displays a list of available client-side events, and allows you to write an event handler implementation within it. The editor automatically adds the code to the markup.

A control’s Designer can be launched in the following ways.

  • Click the control's Smart Tag and select Designer... from the invoked drop down list.

  • Right-click the control and choose Designer... in the invoked context menu.

  • Select the control, open its Properties window, and select Designer... within the Command Panel.

  • Select the control, open its Properties window, and click the ClientSideEvents property's ellipsis button (shown below) or a client-side event’s ellipsis.

To create an event handler, choose the required event on the left, and write the event handler implementation on the right. Note that the Designer automatically generates a default event handler signature within the Event Handler Body pane.

Click OK to automatically add the corresponding aspx code to the markup.

Note that you can also write similar code to create an event handler directly in an aspx file.

Expanded Client-side event handler signature

A client-side event handler signature is similar to the standard server-side version. The default signature is illustrated below.

An event handler function has two parameters:

- the s parameter represents the client object that raises the event;

- the e parameter represents the event argument, which typically contains event-specific information.

Note that using the s object to access an event source within an event handler is preferable to using the ClientInstanceName property.

Expanded Ways of assigning an event handler

For each client-side event that you handle, you must specify a JavaScript function to be executed when the event is triggered. Functions can be assigned in the following ways.

Note

Register Javascript functions at the top of the page. In this case, the browser executes these scripts before it renders DevExpress ASP.NET components.

  • Write an event handler implementation via the Client-Side Events Editor or directly in the markup.

  • Assign an external function to the event handler.

  • Use the ASPxClientEvent.AddHandler, ASPxClientEvent.RemoveHandler and ASPxClientEvent.ClearHandlers client-side methods to manually manipulate event handlers (assign or remove them) on the client-side.

  • Use the ClientSideEvents property, which lists the names of available client control events and provides the ability to assign an appropriate JavaScript handler function to the corresponding client-side event.

  • Use the ClientSideEventsBase.SetEventHandler server-side method to define a handler for the specified DevExpress client event.

  • Use the ASPxClientUtils.AttachEventToElement / ASPxClientUtils.DetachEventFromElement client-side method to bind / unbind the specified function to or from a specific DOM element's event. (For DOM Events only.)

    Note that the event's name does not contain the "on" prefix.

Expanded See Also

Is this topic helpful?​​​​​​​