Textbox within DropDownList

6 posts, 0 answers
  1. Darren
    Darren avatar
    11 posts
    Member since:
    Sep 2014

    Posted 27 Mar 2015 Link to this post

    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
  2. Darren
    Darren avatar
    11 posts
    Member since:
    Sep 2014

    Posted 30 Mar 2015 in reply to Darren Link to this post

    Never mind, solved it 
  3. Rumeth
    Rumeth avatar
    3 posts
    Member since:
    Jul 2016

    Posted 20 Mar in reply to Darren Link to this post

    Darren,

    I am facing this problem currently.

    It would help if you posted your solution here.

    Regards,

    Rumeth

  4. Nencho
    Admin
    Nencho avatar
    1620 posts

    Posted 22 Mar Link to this post

    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.
  5. Rumeth
    Rumeth avatar
    3 posts
    Member since:
    Jul 2016

    Posted 22 Mar in reply to Nencho Link to this post

    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

  6. Nencho
    Admin
    Nencho avatar
    1620 posts

    Posted 23 Mar Link to this post

    Hello Rumeth,

    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 visualization (charts) and form elements.
Back to Top