0

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

原因是剑道提供的活动非常有限。
对于 AutoComplete 剑道提供（更改、关闭、数据绑定、过滤、打开、选择），但我想添加一些事件，例如（onKeyPress、onMouseOver 等）。

例如：

我的要求：

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

剑道提供：

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

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

4

2 回答 2

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

于 2016-02-01T11:53:50.593 回答
1

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

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

$(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

希望这有帮助

于 2016-02-01T11:58:38.850 回答