Use JavaScript with Tag Helpers (Event Handlers, Templates, etc)

Inner <script> Tag

To handle client-side events, specify DOM templates, customize widget configuration, and add any custom code, use the inner <script> tag:

<dx-widget>

    <script>
        // Declare necessary functions here
        // Use the `options` variable to extend the widget configuration

    </script>

</dx-widget>

The content of this script is rendered into the jQuery Ready scope and doesn't pollute the global namespace.

Here are some examples:

Adding Event Handlers

<dx-data-grid on-cell-click="handleCellClick">
    <script>
        function handleCellClick(e) {
            alert(e.displayValue);
        }
    </script>
</dx-data-grid>

Using Templates

Currently, DevExtreme ASP.NET Core Tag Helpers cannot be used to define nested widgets. To use templates, fallback to the JavaScript API:

<dx-data-grid>
    <master-detail enabled="true" template="detailTemplate" />

    <script>
        function detailTemplate(container, options) {
            $("<div>").dxDataGrid({ . . . }).appendTo(container);
        }
    </script>

</dx-data-grid>

Customize Widget Configuration

The options variable holding the widget configuration is available within each inner script block:

<dx-widget>
    <script>
        // Use a custom data source
        options.dataSource = . . .
    </script>
</dx-widget>