How to open Dropdownlist on hover

8 posts, 1 answers
  1. Bhupendra
    Bhupendra avatar
    21 posts
    Member since:
    Jul 2012

    Posted 28 Jun 2014 Link to this post

    Hi,

     Is it possible that Kendo Dropdownlist opens its items on hover? I know default is to click it, but we want it to open on mouse hover.

    Thanks a lot.
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 30 Jun 2014 Link to this post

    Hi Bhupendra,

    You can achieve this using the jQuery mouseover event. Please check the following example:

    http://jsbin.com/xeluwole/1/edit

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Bhupendra
    Bhupendra avatar
    21 posts
    Member since:
    Jul 2012

    Posted 02 Jul 2014 in reply to Kiril Nikolov Link to this post

    Thanks a ton! That was easy.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 02 Jul 2014 Link to this post

    Hi Bhupendra,

    Glad I helped.

    In case you have any further questions, please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 08 May in reply to Kiril Nikolov Link to this post

    By looking for a solution to my problem I came to this forum post. I also want to open a dropdownlist on mouseover (or hover). That works fine. Now I want to close the dropdownlist on moving out of the dropdownlist in case the user wont change the current dropdownlist entry. But that way the user as to click somewhere outside the dropdownlist to get the dropdownlist closed.

    First I realized that the onmouseover wont work putting the event directly onto the input element on which I attach the kendouidropdown. Thats ok, so I created a div around the input element and put a onmouseover onto the DIV:

    $("#playerlistdiv").mouseover(function() {
        var dropdownlist = $("#playerlist").data("kendoDropDownList");
        dropdownlist.open();
    });

    That works fine. Now I used the same code for a mouseout event to dropdownlist.close(). This trigger fires immediately when I leave the dropdown main area. So trying to get a value from the dropdownlist is not possible since it doesn't "belong" to the dropdown area. Is there a way to use dropdownlist.close() that will be executed after leaving opened dropdownlist as well?

    I also made a test with your example but also with the same effect:

    $(".k-dropdown").on('mouseover', function(){
        $('#playerlist').data("kendoDropDownList").open();
    })
     
    $(".k-dropdown").on('mouseout', function(){
        $('#playerlist').data("kendoDropDownList").close();
    })

     

     

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 May Link to this post

    Hi,

    In order to get the value you need to call:

    $('#playerlist').data("kendoDropDownList").value();

    And it should work no matter where the mouse is located on the page

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 10 May in reply to Kiril Nikolov Link to this post

    Hi Kiril

    I think you misunderstood me. I don't have any problem reading data out of a dropdownlist. I have problem with the close() trigger on a dropdownlist. To make this clearer please open the attached image. The part inside the green area represents the closed dropdown list. The part inside the blue area. So imagine there is now a a mouseover event on the dropdownlist to open it and a mouseouse event to close the dropdownlist. See the code for this in my previous message. 

    You now move your mouse over the closed dropdownlist (inside the green area in attached image). It opens as it should. Now you want to move over the opened dropdownlist area (blue area in attached image). But as soon as you move the mouse outside the green area into the blue area the mouseout event triggers and closes the dropdownlist. Thats not what I want. The dropdownlist should STAY OPENED as long as the mouse pointer is moving inside the green OR the blue area.

    The "problem" doesn't exist if there is only a mouseover event to open the dropdownlist. But imagine the user hovers over the dropdownlist and opens it. Then the user realises he doesn't want to choose anyhting else than the chosen one. The user has now three options to keep the current state:
    1. click on the dropdownlist itself (green area)
    2. click on the already chosen item from the list (blue area)
    3. Move out of the dropdownlist (outside green and blue area) and click anywhere there

    At this stage I want to make it easier to the user and close the dropdownlist automatically when the mouse leaves the green and the blue area. 

    So my question is: How can I make the opened dropdownlist (blue area) stay open when the the mouse hovers over it and close automatically when the mouse pointer is leaving the green and blue area?

    Regards

  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 12 May Link to this post

    Hi,

    Thanks for the clarification. 

    I think that I should explain how the dropdownlist is constructed. The list with the available options is a separate DOM component that is detached from the widget (its called popup), so handling the mouseout for the widget will not handle the popup events. The only solution that I can think of is implementing mouseout event with a timeout that will check the currently hovered elements - if its the widget/popup or the rest of the page, so you can choose whether you want to close the dropdownlist or not. 

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready