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