How to create custom controls and adding new events to that control using kendo controls?

Question

How to create custom controls in kendo-ui? For example kendo has AutoComplete Control.
Using that I want to create my own "myAutoComplete" with all the events provided by kendo as well as some external events.

The reason is kendo provides very limited events.
For AutoComplete kendo provids (change, close, dataBound, filtering, open,select) but I want to add some events to that like (onKeyPress, onMouseOver etc..).

eg:

My requirement:

    $("#autocomplete").myKendoAutoComplete({
      change: function(e) {
        var value = this.value();
        // Use the value of the widget
      },
     onMouseOver: function() {},
     onKeyPress: function() {}
  });

Kendo Providing:

 $("#autocomplete").kendoAutoComplete({
          change: function(e) {
            var value = this.value();
            // Use the value of the widget
          }
        });

Please anyone help me to achieve this.

Answer 1

As like jQuery event handling,we can also bind events (like onKeyPress, onMouseOver etc..) to kendo-ui autocomple text-box.

HTML:

 <input id="countries" />

JavaScript:

$(document).ready(function () {
     var data = ["Paris","Barcelona","Tokyo","New-York","Berck"];

    $("#countries").kendoAutoComplete({
        dataSource: data,
        filter: "startswith",
        placeholder: "Select country...",
        separator: ", "
    })
    .keypress(function(e) {
        console.log(e);
        console.log(e.keyCode);
    })
    .mouseover(function(e) {   
        console.log(this.value);   
    });
});

See this JSFiddle

Answer 2

You can use "Kendo Custom Widgets", than you can create yout own widget with you templates and events.

I did an example , you can use it regarding your needs.

$(function() {
  (function($) { 
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,

    var MyKendoAutoComplete = Widget.extend({
      init: function(element, options) {
        var that = this;
        Widget.fn.init.call(that, element, options);      
        that._create();
      },
      options: {
        name: "MyKendoAutoComplete",


        onMouseOver: function(e) {
          alert(e.sender.value());
        },
        onKeyPress: function(e) {
          alert(e.sender.value());
        }
      },
      _create: function() {
        var that = this;

         // here you will bind your events 

        kendo.bind(that.element, that.options);
      },
      _templates: {
        //you can create your own templates 

      }
    });

    ui.plugin(MyKendoAutoComplete);
  })(jQuery);

  $('#autocomplete').kendoMyKendoAutoComplete();
});

you can see more here:

http://docs.telerik.com/KENDO-UI/intro/widget-basics/create-custom-kendo-widget

hope this help