Use ES6 function inside a Dotnet Core cshtml file with KendoUI

Question

I'm building an Asp.Net core project with Kendo UI. I want to use ES6 classes. And I was able to use them as long as I declared my Kendo UI grid in the js file along with my other ES6 classes. Here's what worked

import transaction from './transactions';
import common from "../common";
import whenDomReady from "../document";

whenDomReady(function () {
    $("#transactions-grid").kendoGrid({
        dataSource: {
            transport : {
                read : {
                    url : "/Transactions/GetTransactions",
                    type : "POST",
                    dataType : "json",
                    data : transaction.searchFormData
                }
            },
            schema: {
                type: "json",
                data: "data",
                model: {
                    id:"TransactionId",
                    }
            },
            error : function (e){
                common.display_kendoui_grid_error(e);
                // Cancel the changes
                this.cancelChanges();
            },
            pageSize : 500,
            serverPaging : false,
            serverFiltering : false,
            serverSorting : false
        },
        dataBound: transaction.resizeSplitter,
        columns:
            [
                {
                    field: "TransactionDate",
                    width: 50,
                    title:"When"
                },
                {
                    title: "Brand",
                    width: 80
                },
                {
                    field: "Location",
                    title: "Location",
                    width: 150
                },
                {
                    field: "TransactionType",
                    title: "Type",
                    width: 80
                },
                {
                    field: "Individual",
                    title: "Individual",
                    width: 80
                },
                {
                    field: "Quantity",
                    title: "Qty",
                    width: 80
                },
                {
                    field: "Amount",
                    title: "Amount",
                    width: 80
                }
            ]
    });
});

While all this is fine. I wanted to know if there was some way I could still leverage ES6 class features while defining the grid in cshtml using TagHelpers. So something like this

<kendo-grid name="grid">
            <datasource>
                <transport>
                    <read type="POST" datatype="json" data="transaction.searchFormData" url="@Url.Action("GetTransactions","Transactions")"/>
                </transport>
            </datasource>
        </kendo-grid>

This doesn't work because the function transaction.searchFormData is defined inside a transpiled js file. How can I access a transpile function in my html?

Answer 1

I managed to resolve my problem using this medium post.

https://itnext.io/calling-a-es6-webpacked-class-from-outside-js-scope-f36dc77ea130