Kendo UI Custom widget Typescript returning null instance

3 posts, 1 answers
  1. Hash
    Hash avatar
    6 posts
    Member since:
    Oct 2015

    Posted 01 Sep Link to this post

    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. Answer
    Aleksandar
    Admin
    Aleksandar avatar
    168 posts

    Posted 03 Sep Link to this post

    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).

  3. Hash
    Hash avatar
    6 posts
    Member since:
    Oct 2015

    Posted 03 Sep in reply to Aleksandar Link to this post

    Thanks. 

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

     

    This line did the trick. 

Back to Top