Dispose method for widgets

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
supplier: <input id="suppliers" value="2"/> <button id="dispose">Dispose</button><br/>
datepicker: <input id="datepicker" /> <button id="disposeDatePicker">Dispose</button><button id="initDatePicker">Init</button>

JavaScript

$("#suppliers").kendoComboBox({
    dataTextField: "CompanyName",
    dataValueField: "SupplierID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://services.odata.org/Northwind/Northwind.svc/Suppliers"
        }
    }
});

function comboboxDispose() {
    var combobox = $("#suppliers").data("kendoComboBox"),
        popup = combobox.popup,                    
        element = popup.wrapper[0] ? popup.wrapper : popup.element;
    
    //remove popup element;
    element.remove();
    
    //unwrap element
    combobox.element.show().insertBefore(combobox.wrapper);
    combobox.wrapper.remove();
    
    combobox.element.removeData("kendoComboBox");
}

$("#dispose").click(comboboxDispose);

//Dispose DatePicker
$("#datepicker").kendoDatePicker();

function disposeDatePicker() {
    var datepicker = $("#datepicker").data("kendoDatePicker"),
    popup = datepicker.dateView.popup,                    
    element = popup.wrapper[0] ? popup.wrapper : popup.element;
    
    //Move the shared calendar to the body
    kendo.ui.DatePicker.sharedCalendar.element.hide().appendTo(document.body);
    
    //remove popup element;
    element.remove();
    //unwrap element
    var input = datepicker.element.show();
    
    input.removeClass("k-input").css("width", "auto");
    input.insertBefore(datepicker.wrapper);
    
    datepicker.wrapper.remove();
    
    //remove DatePicker object
    input.removeData("kendoDatePicker");
}

$("#disposeDatePicker").click(disposeDatePicker);
$("#initDatePicker").click(function() {
     $("#datepicker").kendoDatePicker();
});