Part 4 – Binding Events to Kendo UI Widgets

Each widget available in Kendo UI exposes different events depending on the features available for each one of them. For example the DatePicker widget exposes events like open, change, close etc. Like in widget configuration, Kendo UI provides the ability to bind the events during the initialization phase itself as well as after the widget creation too.

Binding Events

First, we will see how we can bind events during the initialization phase.

<div class="col-md-4"><input type="date" id="jQDatePicker" /></div>

<div class="col-md-8"><span id="spResult"></span></div>
<script type="text/javascript">

    $(document).ready(function () {
        $("#jQDatePicker").kendoDatePicker({
            start: "decade",
            format: "dd-MMM-yyyy",
            change: DatePickerOnChange

        });
    });
    function DatePickerOnChange() {
        var resSpan = $("#spResult");
        resSpan.append("Changed date<br>");
    }
    
</script>

In the above snippet I have initialized the widget using kendoDatePicker function and also set the values for options start and format respectively. In the next line I am attaching the change event by specifying the name of the function that needs to be executed every time when a change occurs in the widget. Instead of giving the name of the function for the change event we can make use of anonymous functions too.

change: function () {
        var resSpan = $("#spResult");
        resSpan.append("Changed date<br>");
    }

So the other alternative is to hook the event after the widget is initialized. The snippet for the same is given below.

var datePicker = $("#jQDatePicker").data("kendoDatePicker");
    datePicker.bind("close", function () {
        var resSpan = $("#spResult");
        resSpan.append("Closed DatePicker<br>");
    });

In this case we will be using the bind function to hook the event which accepts two parameters, one being the name of the event and another the function to be executed during a change in the DatePicker widget.

Event Object

So till now, we have seen the functions without parameters are being executed for the change event. Actually Kendo UI passes one argument to the handler called the event object which has one or more properties related to the event. Every event object will have a property called sender which holds the reference of the widget instance that fired the event.

    var datePicker = $("#jQDatePicker").data("kendoDatePicker");
    datePicker.bind("open", function (e) {
        var resSpan = $("#spResult");
        resSpan.append(e.sender.element[0].id + " opened<br>");
    });

In the above code snippet we are retrieving the Id of the element that triggered the event using argument passed to the function by Kendo UI.

Unbinding Event.

Kendo UI also provides options for unbinding the events too.

The unbind function which accepts a parameter, that being the name of the event that needs to be removed for the widget.

    var datePicker = $("#jQDatePicker").data("kendoDatePicker");
    datePicker.unbind("close");

That’s it for the time being and see you all very soon with my next post in the series. Till then Happy Coding !!!