Setting value after form[0].reset()

6 posts, 1 answers
  1. Alex
    Alex avatar
    21 posts
    Member since:
    May 2013

    Posted 01 Apr Link to this post

    Hi

    I often set some default values or values from the database in my form widgets. Now this works very well but if I clear the form beforehand using

    $('#myform')[0].reset();

    the widgets don't seem to accept the values anymore, e.g. myKendoDropDown.select(1) stopps working. This is true for other widgets as well.

    What am I missing here ?

    Kind regards

    Alex

  2. Alex
    Alex avatar
    21 posts
    Member since:
    May 2013

    Posted 02 Apr Link to this post

    Let me add some additional code:

    specimenTypesDropDown = $("#specimen_type_id").kendoDropDownList({
        dataTextField: 'specimen_type',
        dataValueField: 'id',
        dataSource: specimenTypesDataSource,
        autoBind:true,
        index: 1
    }).data("kendoDropDownList");

    That's the definition of my drop-down.

    Just opening the form, the drop-down shows the concerning item correctly.
    If I add:

    $('#specimens-form')[0].reset();

    The drop-down shows a blank item although there is no blank item i the data.
    Adding a select like:

    specimenTypesDropDown.select(2);

    Select the correct item but only if I comment the 'reset' line. If a reset the form, nothing is selected in the drop down.
    -> selection works in this case below

    // $('#specimens-form')[0].reset();
    specimenTypesDropDown.select(2);

    -> selection doesn't work in that case below

    $('#specimens-form')[0].reset();
    specimenTypesDropDown.select(2);

    Although logging the datasource data etc. gives meaningful results.

    Regards

    Alex

  3. Kendo UI is VS 2017 Ready
  4. Alex
    Alex avatar
    21 posts
    Member since:
    May 2013

    Posted 03 Apr in reply to Alex Link to this post

    And here is a snippet, just paste it into kendo dojo to see, that after form.reset neither select() nor value() affect the dropDownList

    <script>
        var resetForm;
        var myDropDown;
         
        $(document).ready(function() {
             
          var data = [
              { text: "Black", value: "1" },
              { text: "Orange", value: "2" },
              { text: "Grey", value: "3" }
            ];
     
            // create DropDownList from input HTML element
            myDropDown = $("#myDropDown").kendoDropDownList({
              dataTextField: "text",
              dataValueField: "value",
              dataSource: data,
              index:2
            }).data('kendoDropDownList');
           
          resetForm = function(){
            $("#myForm")[0].reset();
            myDropDown.select("2");
            myDropDown.value("2");
          }
           
        });
         
      </script>
    <body>
      <form id="myForm">
        <input type="text" name="myText" value="1"/>
        <input id="myDropDown" />
      </form>
      <input type="button" onclick="resetForm()" value="reset"/>
    </body>

  5. Alex
    Alex avatar
    21 posts
    Member since:
    May 2013

    Posted 04 Apr in reply to Alex Link to this post

    OK, the problem seems to be that the kendo widget internally resets within a setTimeout call if I get it right.
    I can overcome the problem using a hack like below buts its a bit disappointing to lose the standard behaviour of the form items:

    resetForm = function(){
        $("#myForm")[0].reset();
        setTimeout(setWidgetValue, 50, myDropDown,1);
    }
          
    setWidgetValue = function(widget, val){
        widget.value(val);
    }

  6. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 05 Apr Link to this post

    Hello Alex,

    Indeed, the DropDownList widget (and others Kendo UI input widgets) use setTimeout browser method to wait until the FORM element is reset in order to retrieve the correct default values. Unfortunately, there is no other way to do that on our side.

    If you would like to reset the form and then set new values, then you will need to wait for the internal setTimeout initiated by the widget to finish.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Alex
    Alex avatar
    21 posts
    Member since:
    May 2013

    Posted 05 Apr in reply to Georgi Krustev Link to this post

    Hi Georgi
    thank you very much for your reply. That's what I suspected. I came up with a simple helper method as solution. It would be cleaner if we could call the value() and select() methods within a 'reset' event, which doesn't exist yet.

    // after form.reset we cannot set kendo widget values directly
     setWidgetValue = function (widget, val) {
           if (null === widget || undefined === widget) {
                       return;
           }
           setTimeout(setWidgetValueDelayed, 50, widget, val);
     };
     
     setWidgetValueDelayed = function (widget, val) {
            widget.value(val);
     };
     
    // usage like
    setWidgetValue(myDropDown, '4');

Back to Top
Kendo UI is VS 2017 Ready