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.



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



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

  2. Answer
    Aleksandar avatar
    168 posts

    Posted 03 Sep Link to this post


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

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

    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on , 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


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


    This line did the trick. 

Back to Top