Initialization of Widget more than once

2 posts, 0 answers
  1. Paul
    Paul avatar
    20 posts
    Member since:
    Apr 2015

    Posted 01 Feb Link to this post

    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

     

     

     

     

     

     

     

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    193 posts

    Posted 02 Feb Link to this post

    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 visualization (charts) and form elements.
Back to Top