Question

如何在kendo-ui中创建自定义控件？例如，kendo具有自动完成控制功能使用它我想创建自己的＆＃34; myAutoComplete＆＃34;与剑道提供的所有活动以及一些外部活动。

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

例如：

我的要求：

    $("#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控件创建自定义控件并向该控件添加新事件？

2 个答案: