如何使用kendo控件创建自定义控件并向该控件添加新事件？

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.

如何在kendo-ui中创建自定义控件?例如,kendo具有自动完成控制功能。使用它我想用kendo提供的所有事件以及一些外部事件创建我自己的“myAutoComplete”。

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..).

原因是剑道提供的活动非常有限。对于AutoComplete kendo provids(更改,关闭,dataBound,过滤,打开,选择)但我想添加一些事件(onKeyPress,onMouseOver等...)。

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.

请任何人帮助我实现这一目标。

2 个解决方案

#1

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

与jQuery事件处理一样,我们也可以将事件(如onKeyPress,onMouseOver等)绑定到kendo-ui自动填充文本框。

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

看到这个JSFiddle

#2

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

您可以使用“Kendo Custom Widgets”,而不是使用模板和事件创建自己的小部件。

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:

hope this help

希望这个帮助

#1