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 2016 Link to this post


    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";
    interface JQuery {
      kendoSampleWidget(options?: ISampleOptions): JQuery


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


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

    The widget constructor not will be called.


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

    window.onload = () => {

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

    What's the correct way?




  2. T. Tsonev
    T. Tsonev avatar
    2817 posts

    Posted 21 Mar 2016 Link to this post


    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.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top