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

How to open Dropdownlist on hover

7 Answers 1526 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Bhupendra
Top achievements
Rank 1
Bhupendra asked on 28 Jun 2014, 11:36 AM
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.

7 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 30 Jun 2014, 10:13 AM
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!
 
0
Bhupendra
Top achievements
Rank 1
answered on 02 Jul 2014, 09:18 AM
Thanks a ton! That was easy.
0
Kiril Nikolov
Telerik team
answered on 02 Jul 2014, 10:08 AM
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!
 
0
Tayger
Top achievements
Rank 1
Iron
answered on 08 May 2016, 05:48 PM

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

 

 

0
Kiril Nikolov
Telerik team
answered on 10 May 2016, 06:55 AM
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!
 
0
Tayger
Top achievements
Rank 1
Iron
answered on 10 May 2016, 07:13 PM

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

0
Kiril Nikolov
Telerik team
answered on 12 May 2016, 08:03 AM
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!
 
Tags
DropDownList
Asked by
Bhupendra
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Bhupendra
Top achievements
Rank 1
Tayger
Top achievements
Rank 1
Iron
Share this question
or