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
Rank 1
Iron
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
Rank 1
Iron
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>
Rank 1
Iron
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);}
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
Rank 1
Iron
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 likesetWidgetValue(myDropDown, '4');