Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

In my TypeScript file for class A, I am encountering an issue with the Kendo TreeList code. I am trying to call a function from the Kendo template.

export class A{
    drillDownDataSource: any;
    
    constructor() {
        this.GetStatutoryIncomeGridViewData();
    }
    
    GetStatutoryIncomeGridViewData() {
        $.ajax({
            type: 'POST',
            url: 'Controller/Action/',
            data: stfilterData,
            success: function (data) {
                $("#grid").kendoTreeList({
                    dataSource: data,
                    columns: [
                        { field: "Transaction1", template: kendo.template("#=FormatNumberToEn(Transaction1)#").bind(this) }
                    ]
                });
            });
        }

    public FormatNumberToEn(value) { }
}

An error is occurring where it states "

function FormatNumberToEn is undefined
"

Answer №1

To incorporate functions in KendoUI templates, it is necessary to declare them within the global JavaScript scope. (Source)

One option is to extract the FormatNumberToEn function from the A class.

export class A { 
    /* class definition */ 
}
function FormatNumberToEn(value) { /* function logic */ }

Another approach could be to define your function as static and reference it using A.FormatNumberToEn() within the template. (I cannot verify this currently as I am using a mobile device.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent the function from being triggered repeatedly while scrolling

When a user scrolls to the bottom of the page, the following code is meant to load the next page. However, there are instances where it repeats itself due to rapid scrolling or while the AJAX content is still loading. Is there a way to prevent this code f ...

Close the menu when clicking anywhere on the page body

I have successfully implemented a dropdown menu that opens when the navigation button is clicked. However, I am struggling to find a way to close the dropdown menu when the mouse clicks on any part of the page's body. If you have a solution for this ...

What is the process of converting a string to XML in jQuery versions 1.3 and earlier? Additionally, how can you append a node to an

Currently, I am extracting an XML string from a hidden field and the task at hand is to append a new node to this XML. The first step involves converting the XML string into an XML object. However, since I am limited to using jQuery version 1.3, the pars ...

Protecting website pages on both the admin and user side in Next.js 14 to ensure maximum security

I'm currently using nextjs 14 and I am working on developing a website similar to a property app. It will have an admin dashboard and a user side. How can I ensure the security of both the admin and user sides, and what should my folder structure look ...

How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code: <script ...

What is the method in Angular 6 that allows Observable to retrieve data from an Array?

What is the method to retrieve data of an Array using Observable in Angular 6? ob: Observable<any> array = ['a','b','c'] this.ob.subscribe(data => console.log(data)); ...

Customize the MUISelect style within a universal theme

I need to override a specific style for numerous components, but it is currently only working for all components except the Select. Here is what I am attempting: MuiSelect: { styleOverrides: { select: { ...

Find the name of the region in the user's query

I've implemented the weather-js npm module (weather-js) to retrieve weather information for a specific region. While everything is functioning correctly, I'm looking to customize it based on user input. The module currently only accepts region ...

What is the best way to skip certain steps within a Promise using Bluebird?

Here is an example of some code: Queues.findOne({_id: id}) .then(function(q) { var status = q.status; //... }).then(function(q) { // A }).then(function(q) { // B }).then(function(q) { // C }).then(function(q) { // D }).then(function(q) { // E }).then ...

Ways to extract dropdown selection into a .php script

I am trying to capture the selected dropdown value in my .php file, which is used for sending emails. When a user selects one of the 6 options from the dropdown menu, I want that selected option to be included as the email subject. Below is the HTML code ...

WebStorm disregards tsconfig compiler directives when working with Angular applications

My project structure was created using angular-cli, which includes a root tsconfig.json, src/tsconfig.app.json, and src/tsconfig.spec.json. Despite having the noImplicitAny and strict options enabled in the root configuration, I do not receive error notifi ...

Is there a way to show text as symbols in Primeng components?

Check out this helpful example that demonstrates what I am attempting to achieve. I have implemented p-menu from primeng. Is there a method to convert text into symbols like &trade to ™ and &#8482 to ®? ...

What could be causing the event listener to not be triggered?

I'm having an issue with a simple code that is supposed to display an alert box when a hyperlink is clicked, but it's not working. I believe the script is not being called. Can someone help me figure out what's wrong? Here is the HTML code: ...

Rename multiple files in bulk

With 10000 files consisting of php, html, css, and png formats that are interconnected to operate the website's engine, I am looking for a way to perform bulk renaming in order to ensure proper functionality. Not only do I need to rename the actual fi ...

Creating a bespoke XML layout utilizing the .Net framework

Can I create an XML file in .Net with custom tags like the following structure? <ABC version="1" xmlns="http://anySchemaAddress"> <Date>20140922</Date> <Contract> <Type>1</Type> < ...

Guide to delivering a PDF document from a controller

In my pursuit to send a PDF file from a Controller Endpoint using NestJs, I encountered an interesting issue. Without setting the Content-type header, the data returned by getDocumentFile function is successfully delivered to the user. However, when I do ...

When I click, I expect to retrieve the tr element, but instead, I am receiving the td element

When I have a table and click on a tr element, the function returns a td element instead. Can someone explain why this is happening? let func = function () { $("tr").on("click", (event) => { event.preventDefault(); event.stopPropaga ...

Creative Solution for Nested Forms

I am currently facing a challenge with nested forms in my PHP project. I need to include a form for AJAX image upload within another form so that I can pass the file path to the main form. The example code snippet is provided below; <form> <f ...

Can a single page be used to send email?

My PHP form is currently sending data to another page, and the layout does not look good. I want to keep the form on the same page so that when a user fills it out, the information is submitted without redirecting. If any of the inputs are empty, I would l ...

Creating a custom CSS overlay for a jQueryUI widget

Having some trouble darkening the widget overlay provided by jQueryUI's "dialog". Despite trying to override the CSS used by jQuery, specifically the class ui/widget-overlay, I can't seem to apply my own styles successfully in my stylesheet. I a ...