This is a critical piece of information regarding the creation of Custom widgets!
Without this, the widget doesnt work in a grid!
This was real handy!
10x Lance for insisting on a proper reply!
10x Alexander for the reply!
With this information I was able to extend the kendo date/dateTime picker to include a mask.
(function($) { varkendo = window.kendo, ui = kendo.ui, Widget = ui.Widget; CHANGE = "change", BLUR = "blur", [ { type: 'DateTime', defaultMask: '00/00/0000 00:00', container: '.k-datetimepicker'}, { type: 'Date', defaultMask: '00/00/0000', container: '.k-datepicker' }] .forEach(function(x) { varbaseName = 'kendo'+ x.type + 'Picker'; varnewName = "Masked"+ x.type + "Picker"; var_basePlugin = $.fn[baseName]; varmaskedPicker = Widget.extend({ init: function(element, options) { varthat = this; Widget.fn.init.call(this, element, options); $(element).kendoMaskedTextBox({ mask: options.mask || x.defaultMask }); _basePlugin.call($(element), options) .closest(x.container) .add(element) .removeClass("k-textbox"); that.element.on("blur", function() { that.trigger("change"); }); }, options: { name: newName, dateOptions: {} }, destroy: function() { varthat = this; Widget.fn.destroy.call(that); kendo.destroy(that.element); }, value: function(value) { vardatepicker = this.element.data(baseName); if(value === undefined) { returndatepicker.value(); } datepicker.value(value); }, //Export the events the control can fire events: [CHANGE] }); ui.plugin(maskedPicker); $.fn[baseName] = $.fn['kendo'+ newName]; });})(jQuery);Enjoy !
![Vladimir Aćimović – Draeseke: Piano Works (2026) [FLAC 24bit/96kHz]](http://imghd.xyz/images/2026/06/27/jz9s92jaavhy5_600.jpg)
