This is a migrated thread and some comments may be shown as answers.

Kendo UI Custom widget Typescript returning null instance

2 Answers 171 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Hash
Top achievements
Rank 1
Hash asked on 01 Sep 2020, 12:21 PM

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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Aleksandar
Telerik team
answered on 03 Sep 2020, 09:11 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Hash
Top achievements
Rank 1
answered on 03 Sep 2020, 11:56 AM

Thanks. 

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

 

This line did the trick. 

Tags
General Discussions
Asked by
Hash
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Hash
Top achievements
Rank 1
Share this question
or