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

Item highlighting not working onmouseover

1 Answer 171 Views

ComboBox

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

Adeel Syed asked on 16 Feb 2010, 07:27 PM

Hello,

Highlighting of Items is not working for me in IE8 when I hover over them.

From what I can tell, a RadComboBoxItem's css class is supposed to change from ComboBoxItem_Vista to ComboBoxItemHover_Vista when the user mouses over it. If I add a doctype declaration to my page, this behavior stops working in IE8. Only the first item that I mouse over gets the hover class. When I hover over other items, the highlight does not move. If I move the mouse away from the dropdown completely and return, the first item I hover over gets the hover class, but then when I move to other items, again, the highlight does not move.

Manually adding onmouseover and onmouseout attributes to each item when it is databound works, but slows the page down considerably because I have many items in each dropdown.

Here is a live sample: https://hertzequipus.rousesales.com/equipmentlisting.aspx

Here is the doctype declaration I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And I am using RadComboBox version 2.8.4.0.

Thank you for your help.

1 Answer, 1 is accepted

answered on 16 Feb 2010, 11:08 PM

I'm solving it with javascript event listeners for now. I wonder if that bogs down the client computer.

    
            <script type="text/javascript">  
        
                //make items in radcomboxes highlight when moused over  
        
                //once a doctype was added, this behavior stopped working by default in IE8  
        
                if (window.captureEvents) {  
        
                    window.captureEvents(Event.ONMOUSEOVER);  
        
                    window.onmouseover = hoverHandler;  
        
                    window.captureEvents(Event.ONMOUSEOUT);  
        
                    window.onmouseout = outHandler;  
        
                }  
        
                else {  
        
                    document.onmouseover = hoverHandler;  
        
                    document.onmouseout = outHandler;  
        
                }  
        
                function hoverHandler(e) {  
        
                    var element = (typeof event !== 'undefined') ? event.srcElement : e.target;  
        
                    if (element.className == "ComboBoxItem_Vista") {  
        
                        element.className = "ComboBoxItemHover_Vista";  
        
                    }  
        
                }  
        
                function outHandler(e) {  
        
                    var element = (typeof event !== 'undefined') ? event.srcElement : e.target;  
        
                    if (element.className == "ComboBoxItemHover_Vista")  
        
                        element.className = "ComboBoxItem_Vista";  
        
                }  
        
            </script>