This is a migrated thread and some comments may be shown as answers.

Initialization of Widget more than once

1 Answer 248 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 01 Feb 2017, 09:03 AM

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

 

 

 

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 02 Feb 2017, 04:29 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Date/Time Pickers
Asked by
Paul
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or