Initialization of Widget more than once

[Paul]

I have extended the Date Widget into my own implementation by following the online examples.  All is working nicely pretty much.

The issue I have is when the Widget is initialized twice.  We get this in production with some Anthem based controls which handle the postback and update (not Ajax). 

But I can recreate this issue simply by having the date picker on a html page with a button that calls the initialize twice.  I have created the following dojo example:

http://dojo.telerik.com/@andez2000/eHEZA/31

If you click the "Init Date Picker" button after you run the example, the width of the widget changes to 100% - not what I asked for...  You can see this getting fired inside of kendo. 

Is there a nice way not to reinitialize the date picker under these circumstances.  Ideally if I could handle this inside of kendoExtendedDatePicker.init would be good.

Thanks

 

 

 

 

 

 

 

 

[Alex Hajigeorgieva]

Hello Paul,

Duplicate widget initialization is not recommended, and it is best to avoid it where possible. If you are not able to avoid it,  "reset" the DOM with the following steps which should prevent unexpected behaviour:

- destroy the existing Kendo UI widget instance:
http://docs.telerik.com/kendo-ui/intro/widget-basics/destroy#destroying-widgets

- remove the value of the input element

- the Kendo UI DatePicker generates some wrapping HTML elements as well as one <span> as a sibling. Remove them from the DOM

- remove any classes from the input

- restore the width

if ($element.data("kendoExtendedDatePicker") !== undefined) {
  $element.data("kendoExtendedDatePicker").destroy();
  $element.val("");
  $element.unwrap().unwrap().width("180px").removeClass();
  $element.next("span").remove();
}

For your convenience, I have updated the provided snippet at:

http://dojo.telerik.com/AQOpu 

I hope you find this advice useful.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress