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

Question

如何在kendo-ui中创建自定义控件？例如 kendo 有自动完成控件。
使用它，我想用 kendo 提供的所有事件以及一些外部事件创建我自己的 "myAutoComplete"。

原因是kendo提供的活动非常有限。
对于自动完成 kendo 提供（更改、关闭、数据绑定、过滤、打开、select），但我想向其中添加一些事件（onKeyPress、onMouseOver 等）。

例如：

我的要求ui回复：

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

Kendo 提供:

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

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

Answer 1

与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);   
    });
});

看到这个JSFiddle

Answer 2

您可以使用 "Kendo Custom Widgets"，然后您可以使用模板和事件创建自己的小部件。

我做了一个例子，你可以根据你的需要使用它。

$(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();
});

你可以在这里看到更多：

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

希望对您有所帮助

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

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

javascript

jquery

kendo-ui

kendo-autocomplete