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

Question

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.

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

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.

score 1 · Accepted Answer · answered Feb 01 '16 at 11:53

1

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

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

answered Feb 01 '16 at 11:53

111

1,779
1
12
15

Thank you for your answer. In my case everything dynamic. Which means i am creating autocomplete dynamically and i am passing granular values to that. for eg..jQuery(autoCompleteBlockElement).find("input").kendoAutoComplete(objectAttribute.granularObject); In this case how can i bind like jQuery. If i will find directly then it will execute for all the autocomplete control. but i need give some of the control only. objectAttribute.granularObject contains "dataSource: data, filter: "startswith", placeholder: "Select country...", separator: ", "" – bagya Feb 01 '16 at 12:14

score 1 · Answer 2 · answered Feb 01 '16 at 11:58

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

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:

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

hope this help

@Macro Palma - Thanks for your answer. But I need to build controls API without widget. If any examples please give me. — bagya, Feb 02 '16 at 10:20
if you said "I want to create my own myAutoComplete" , When you do this `$("#autocomplete").myKendoAutoComplete({` this mean that you dont want an jquery function to do your requests, makes objective questions. — 우두머리, Feb 02 '16 at 10:30
In my case everything dynamic. Which means i am creating autocomplete dynamically and i am passing granular values to that. for eg..jQuery(autoCompleteBlockElement).find("input").kendoAutoComplete(objectAttri‌bute.granularObject); In this case how can i bind like jQuery. If i will find directly then it will execute for all the autocomplete control. but i need to give some of the control only. objectAttribute.granularObject contains "dataSource: data, filter: "startswith", placeholder: "Select country...", separator: ", "" — bagya, Feb 02 '16 at 10:47

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

2 Answers2