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

Textbox within DropDownList

5 Answers 605 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Darren
Top achievements
Rank 1
Darren asked on 27 Mar 2015, 04:30 PM
Hello!

I have a kendo dropdownlist and a template in it that contains a textbox, but I find the existing dropdownlist events interfere with the textbox.

A pretty rough, yet fully functional, fiddle here: http://dojo.telerik.com/AripU

If you click on the "edit" image, you get a textbox but you are unable to click into it. I have managed to focus but the click is still being ignored.

I was told that b cannot be solved because the widget handles the "mousedown" event in order to keep the focus in the wrapper. Specifically "the widget controls the focus of the wrapper and popup element very restrictively in order to ensure the correct "change" event order when widget is blurred. That is why placing an input element inside the item is not supported. "I wonder if there is a way to override the mousedownn event?

I am keen to somehow work around this, rather than re-doing the whole thing using a grid so any creative solutions that can help me focus the textbox are very welcome.

Thanks

5 Answers, 1 is accepted

Sort by
0
Darren
Top achievements
Rank 1
answered on 30 Mar 2015, 03:08 PM
Never mind, solved it 
0
Rumeth
Top achievements
Rank 1
answered on 20 Mar 2017, 06:46 AM

Darren,

I am facing this problem currently.

It would help if you posted your solution here.

Regards,

Rumeth

0
Nencho
Telerik team
answered on 22 Mar 2017, 07:31 AM
Hello Rumeth,

I had revised the implementation that Darren had demonstrated, however it contains a lot of custom business logic, along with custom styling. This is why, I would like to ask you to demonstrate us the setup that you have at your end and describe the experienced issue.

Please keep in mind that indeed we handle the mousedown event, in order to persist the focus on the wrapper (the DropDownElement) of such textboxes, as Darren mentioned.

Regards,
Nencho
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.
0
Rumeth
Top achievements
Rank 1
answered on 22 Mar 2017, 09:18 AM

Nencho,

The dropdown is currently being placed inside the grid cell.

The list for the dropdown is an array of objects.

We wanted to add an object to the list in case it wasn't available in the dropdown.

The object would require two text inputs from the user.

The inputs were defined in the 'noDataTemplate' field.

But the inputs could not be focused and no entry could be made.

Regards,

Rumeth

0
Nencho
Telerik team
answered on 23 Mar 2017, 02:26 PM
Hello ,

I am afraid that, as previously mentioned - the widgets is designed to work that way because it should get closed when the wrapper loses focus.

I can suggest you to workaround this case, but opening a small window, containing two inputs, for new item insertion. The logic for adding the new item should be the same as the one implemented in our online demo below:

https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem

Regards,
Nencho
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 (charts) and form elements.
Tags
DropDownList
Asked by
Darren
Top achievements
Rank 1
Answers by
Darren
Top achievements
Rank 1
Rumeth
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or