Client-Side Events

• May 21, 2022
• 4 minutes to read

DevExpress ASP.NET controls include an advanced client-side API that improves web application efficiency with server-side and client-side processing. Client-side events apply web application logic on the client in response to end user operations.

Client-Side Events Editor

Use the Client-Side Events editor (located within the control’s Designer, as shown below) to write a client-side event handler. This editor displays a list of available client-side events, and allows you to add an event handler to an event. 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 context menu.

  

• Select the control, open its Properties window, and select Designer… below.

  

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

  

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

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

ASPX

<dx:ASPxButton ID="ASPxButton1" runat="server" Text="ASPxButton" AutoPostBack="False">
     <ClientSideEvents Click="function(s, e) {
          alert('The Click event has been invoked');
     }" />
</dx:ASPxButton>

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

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.

ASPX

<ClientSideEvents EventName="function(s, e) { ... }" />

An event handler function has two parameters:

• the s parameter returns the client object that raises the event;

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

Note that you should use the s object instead of the ClientInstanceName property to access the source of an event handler.

ASPX

<dx:ASPxGridView ClientInstanceName="grid" ... >
    <ClientSideEvents RowDblClick="function(s, e) {
        //grid.StartEditRow(e.visibleIndex);
        s.StartEditRow(e.visibleIndex);
    }" />
    ...
</dx:ASPxGridView>

How to Assign an Event Handler

For each client-side event that is handled, you must specify a JavaScript function to be executed when the event is triggered. You can assign functions in the following ways.

Note

Register Javascript functions at the top of the page to ensure that the browser executes these scripts before it renders DevExpress ASP.NET components.

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

  ASPX

  <ClientSideEvents Click="function(s, e) {
       alert('The button has been clicked');
  }" />
  

• Assign an external function to the event handler.

  ASPX

  <ClientSideEvents Click="OnMyButtonClick" />
  

  JS

  function OnMyButtonClick (s, e) {
       alert('The ' + s.name + ' button has been clicked');
  }
  

• Use our ASPxClientEvent.AddHandler, ASPxClientEvent.RemoveHandler and ASPxClientEvent.ClearHandlers client-side methods to manually assign an event handler to an event (or remove it from an event) on the client side.

  JS

  function AddKeyboardNavigationTo(grid) {
      grid.BeginCallback.AddHandler(function(s, e) { alert('A callback begins') });
      grid.EndCallback.AddHandler(function(s, e) { alert('A callback ends') });
  }
  

• Use the ClientSideEvents property, which lists available client control events and allows you to assign a JavaScript handler function to its corresponding client-side event.

  C#

  MyMenu.ClientSideEvents.ItemClick = "function(s, e) { alert(s.name); }";
  MyMenu.ClientSideEvents.Init = "MyFunction";
  

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

  C#

  MyMenu.ClientSideEvents.SetEventHandler("ItemClick", "function(s, e) { alert(s.name); }");
  MyMenu.ClientSideEvents.SetEventHandler("Init", "MyFunction");
  

• Use the ASPxClientUtils.AttachEventToElement client-side method to bind the specified function to a DOM element’s event. To unbind the function, use the ASPxClientUtils.DetachEventFromElement client-side method. (Note that this applies to DOM Events only.)

  Note that the event’s name does not contain the “on” prefix.

  ASPX

  <ClientSideEvents Init="MyOnInit" />
  

  JS

  function MyOnInit(s, e) {
       ASPxClientUtils.AttachEventToElement(s.GetMainElement(), "dblclick", function (event) {
            //code here
       });
  };