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

Setting value after form[0].reset()

5 Answers 1150 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Iron
Alex asked on 01 Apr 2016, 03:41 PM

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

5 Answers, 1 is accepted

Sort by
0
Alex
Top achievements
Rank 1
Iron
answered on 02 Apr 2016, 03:50 PM

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

0
Alex
Top achievements
Rank 1
Iron
answered on 03 Apr 2016, 12:01 PM

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>

0
Alex
Top achievements
Rank 1
Iron
answered on 04 Apr 2016, 02:54 PM

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);
}

0
Accepted
Georgi Krustev
Telerik team
answered on 05 Apr 2016, 10:27 AM
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!
 
0
Alex
Top achievements
Rank 1
Iron
answered on 05 Apr 2016, 10:50 AM

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');

Tags
DropDownList
Asked by
Alex
Top achievements
Rank 1
Iron
Answers by
Alex
Top achievements
Rank 1
Iron
Georgi Krustev
Telerik team
Share this question
or