Handle Events and Define Callbacks

• Aug 08, 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>)
      )
  )
  

  Note

  In Visual Studio 2019, if you use the < character in the @<text> block, an IntelliSense error may occur: End of file or an unexpected character was reached before the “” tag could be parsed.

  You can avoid this error if you:

  • Invert your condition, for example, b > a instead of a < b.
  • Use an external function to handle an event (see above).