Client-Side Events

• Mar 14, 2021
• 2 minutes to read

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

Use an extension’s ClientSideEvents property to list available client events and to assign JavaScript handler functions to them.

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.

settings.ClientSideEvents.EventName = "function(s, e){...}";

Razor

@Html.DevExpress().Button(settings => {
    settings.Name = "btnClear";
    settings.Text = "Clear Text";
    settings.ClientSideEvents.Click = "function(s, e){ textBox1.SetText(''); }";
}).GetHtml()

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 you should use the s object (instead of an extension’s Name property value) to access the source of an event handler.

Razor

    @Html.DevExpress().GridView(settings => {
        settings.Name = "myGrid";
        settings.ClientSideEvents.RowDblClick = "function(s, e){ 
            // myGrid.StartEditRow(e.visibleIndex);
            s.StartEditRow(e.visibleIndex);
        }";
        // ...
    }).Bind(Model).GetHtml()

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.

• Write an event handler implementation directly in code.

  Razor

  settings.ClientSideEvents.Click = "function(s, e){ 
      alert('The ' + s.name + ' button has been clicked'); 
  }";
  

• Assign an external function to the event handler.

  Razor

  settings.ClientSideEvents.Click = "OnMyButtonClick";
  

  JavaScript

  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.

  JavaScript

  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 ClientSideEventsBase.SetEventHandler server-side method to define a handler for the specified DevExpress client event.

  Razor

  settings.ClientSideEvents.SetEventHandler("Click", "function(s, e){ alert(s.name); }");
  settings.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.)

  Razor

  settings.ClientSideEvents.Init = "MyOnInit";
  

  JavaScript

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

Note

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