How to open Dropdownlist on hover

[Bhupendra]

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.

[Kiril Nikolov]

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

 

 

[Bhupendra]

Thanks a ton! That was easy.

[Kiril Nikolov]

Hi Bhupendra,

Glad I helped.

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

Regards,
Kiril Nikolov
Telerik

 

 

[Tayger]

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();
})

 

 

[Kiril Nikolov]

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

 

 

[Tayger]

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

[Kiril Nikolov]

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