focus() prevents dropdown from opening

[Jay]

Hello,  I am trying to implement the AutoComplete and DatePicker controls in an edit form I am making.  I do not want the edit controls visible all the time, so I have been working on some functions to reverse the effects of .kendoAutoComplete() and .kendoDatePicker().

The functions seem to be doing what I had hoped (if there is a better way, please let me know).  However, in the code that makes my input turn into a kendoDatePicker, if I add a .focus() to the end of the line it does add focus to the edit control, but the control will not drop down the date picker when the edit control has focus.

Here is a link to an example: http://jsfiddle.net/jkappel/MEKqs/ 

if you modify the line that reads:

            if (that.attr('ctl') == 'date') that.kendoDatePicker();
            else that.kendoAutoComplete().focus(); 

to read:

            if (that.attr('ctl') == 'date') that.kendoDatePicker().focus();
            else that.kendoAutoComplete().focus(); 

the date picker will not ever drop down.

I realize my scenario is a bit unique, but if anyone can help I would sure appreciate it!

[Georgi Krustev]

Hi Jay,

The issue is caused because the popup element related to the widget is not removed. Hence when you create new DatePicker/AutoComplete a new popup is created and the problem occurs. What I can suggest you is to hide the wrapper of the inputs, not to remove it. Check this jsFiddle demo.

All the best,
Georgi Krustev
the Telerik team

[Jay]

That's beautiful!  Thanks for re-working it for me.  I knew there had to be an elegant solution.  I much prefer your method of hiding things, it makes the code much simpler as well.  Thanks for the help!