Kendo UI Custom widget Typescript returning null instance

[Hash]

I am trying to create a kendo custom widget in typescript, but the data function always returns null.

let emptyWidget = $('#emptyCriteria').kendoEmptyTemplate().data('kendoEmptyTemplate');

 console.log(emptyWidget) // getting always undefined

 

Widget Code:

interface JQuery {
    kendoEmptyTemplate(options?: KendoWidgets.IEmptyTemplateOptions): JQuery;
    data(key: "kendoEmptyTemplate"): KendoWidgets.EmptyTemplateOptions;
}

module KendoWidgets {

    export interface IEmptyTemplateOptions {
    }

    export class EmptyTemplateOptions implements IEmptyTemplateOptions{
        name: string = 'EmptyTemplate';
    }

    export class EmptyTemplate extends kendo.ui.Widget
    {
        options: EmptyTemplateOptions;
        constructor(element: Element, options: IEmptyTemplateOptions) {
            super(element, options);
        }
    }

    // Create an alias of the prototype (required by kendo.ui.plugin)
    EmptyTemplate.fn = EmptyTemplate.prototype;
    // Deep clone the widget default options
    EmptyTemplate.fn.options = new EmptyTemplateOptions();
    // Create a jQuery plugin.
    kendo.ui.plugin(EmptyTemplate);
}

 

Html:

<div id="emptyCriteria"></div>

 

 

Any of you have encountered this issue or am I missing any methods in widget?

[Aleksandar]

Hello,

I would suggest reviewing the second-to-last code snippet in the article linked below for details on creating a custom widget using TypeScript:

https://docs.telerik.com/kendo-ui/third-party/typescript

You can also review the forum thread below where Ralf has shared the full implementation of a custom widget using TypeScript:

https://www.telerik.com/forums/how-to-create-a-custom-widget-using-typescript

Regards,
Aleksandar
Progress Telerik

[Hash]

Thanks. 

EmptyTemplate.fn.options = $.extend(true, {}, kendo.ui.Widget.fn.options);

 

This line did the trick.