Handle Events and Define Callbacks

• Sep 13, 2024

To handle an event or define a callback, implement a JavaScript function as follows:

• A short inline function.

  Razor C#

  @(Html.DevExtreme().Button()
      .OnClick("function () { alert('The button was clicked'); }")
  )
  
  @(Html.DevExtreme().VectorMap()
      .Tooltip(t => t
          .CustomizeTooltip("function (arg) { return { text: arg.attribute('text') } }")
      )
  )
  

• An external function.

  Razor C#

  @(Html.DevExtreme().Button()
      .OnClick("myButton_click")
  )
  
  @(Html.DevExtreme().VectorMap()
      .Tooltip(t => t
          .CustomizeTooltip("vectorMap_tooltip_customizeTooltip")
      )
  )
  
  <script>
      function myButton_click() {
          alert("The button was clicked");
      }
      function vectorMap_tooltip_customizeTooltip (arg) {
          return { text: arg.attribute("text") };
      }
  </script>
  

• A function wrapped into the Razor @<text> block.

  Razor C#

  @(Html.DevExtreme().Button()
      .OnClick(@<text>
          function () {
              alert("The button was clicked");
          }
      </text>)
  )
  
  @(Html.DevExtreme().VectorMap()
      .Tooltip(t => t
          .CustomizeTooltip(@<text>
              function (arg) {
                  return { text: arg.attribute("text") };
              }
          </text>)
      )
  )