How to create a custom widget using TypeScript

2 posts, 0 answers
  1. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 17 Mar Link to this post

    Hello,

    I'm trying to implement a custom widget using TypeScript. I will not inherit from another Widget.

    Is there any sample or documentation? 

    This is my code:

    module mycompany.MyWidgets {
      "use strict";
     
      export class SampleWidget extends kendo.ui.Widget {
        constructor(element: Element, options?: MyInterfaces.ISampleOptions) {
          super(element, options);
        }
      }
       
      SampleWidget.fn = Sample.prototype;
      $.extend(true, {}, SampleWidget.options);
      (<ISampleOptions>SampleWidget.options).name = "SampleWidget";
      kendo.ui.plugin(SampleWidget);
    }
    interface JQuery {
      kendoSampleWidget(options?: ISampleOptions): JQuery
    }

     

    But the widget will not be used. Not using data-role nor jQuery selector $("#mydiv").kendoMyWidget();

    Samples:

    <div id='widgetcontainer' data-role='samplewidget'></div>

    The widget constructor not will be called.

    And:

    <div id='widgetcontainer'></div>

    window.onload = () => {
        $('#eidgetcontainer').kendoSampleWidget();
    };

    A script error will be shown (kendoSampleWidget is not a function)

    What's the correct way?

    Regards

    Ralf

     

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 21 Mar Link to this post

    Hello,

    We have a sample as part of the documentation.

    I didn't run your code snippet, but the $.extend call doesn't seem right. The return value is not assigned anywhere.
    See the snippet in the documentation for reference.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top