Skip to main content

Handle Events and Define Callbacks

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

  • A short inline function.

    @(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.

    @(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.

    @(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).