Как создать пользовательские элементы управления и добавить новые события к этому элементу управления с помощью элементов управления кендо?

Question

Как создать пользовательские элементы управления в kendo-ui? Например, у kendo есть автозаполнение.
Используя это, я хочу создать свой собственный «myAutoComplete» со всеми событиями, предоставляемыми kendo, а также с некоторыми внешними событиями.

Причина в кендо дает очень ограниченные события.
Для автозавершения kendo предоставляет (изменение, закрытие, dataBound, фильтрация, откройте, выберите), но я хочу добавить некоторые события к подобным (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 
      } 
     }); 

Пожалуйста, кто поможет мне достичь этого.

Answer 1

Как обработка событий jQuery, мы также можем связывать события (например, onKeyPress, onMouseOver и т. Д.) С текстовым полем kendo-ui autocomple.

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

Вы можете использовать "Кендо пользовательских виджетов", чем вы можете создать YOUT собственный виджет с вы шаблоны и события.

Я сделал пример, вы можете использовать его в соответствии с вашими потребностями.

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

надеюсь, что это поможет