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

HoverStyle High Processor Usage

5 Answers 108 Views

Grid

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

digitall asked on 23 Dec 2008, 04:53 PM

I am mimicking the grid style as demoed here. In Firefox this works great, is extremely responsive and behaves as I would expect. In IE8 though (and probably the others although I haven't been able to test them yet), running over the items in the list is very slow and I noticed my processor usage jumps to around 70% whenever I do this. My grid is very basic and looks like this:

    
                <telerik:RadGrid runat="server" ID="grdResults" AutoGenerateColumns="false" Width="100%" HorizontalAlign="Center" Skin="Gray" GridLines="None"> 
        
                    <MasterTableView Width="100%" GridLines="None" CommandItemDisplay="None" DataKeyNames="ParcelNUmber"> 
        
                        <Columns> 
        
                            <telerik:GridBoundColumn DataField="ParcelNumber" HeaderText="Property #" UniqueName="ParcelNumber" /> 
        
                            <telerik:GridBoundColumn DataField="Owner" HeaderText="Owner" /> 
        
                            <telerik:GridBoundColumn DataField="Location" HeaderText="Location" /> 
        
                            <telerik:GridBoundColumn DataField="Legal" HeaderText="Legal" /> 
        
                            <telerik:GridBoundColumn DataField="Acres" HeaderText="Acres" /> 
        
                        </Columns> 
        
                    </MasterTableView> 
        
                    <ClientSettings EnableRowHoverStyle="true"> 
        
                        <ClientEvents OnRowDblClick="viewParcel" />             
        
                        <Selecting AllowRowSelect="true" /> 
        
                    </ClientSettings> 
        
                </telerik:RadGrid>

Do you have any suggestions as to what I can do to make the performance of hovering in IE the same as it is FF?

5 Answers, 1 is accepted

answered on 29 Dec 2008, 01:59 PM

Hi digitall,

Please feel perfectly welcome to share your Javascript code, which works well in both Firefox and Internet Explorer. We will gladly examine it.

I can assure you that Internet Explorer is the slowest browser, when it comes to Javascript execution, DOM operations, hover style application, whatever.

Here is a very simple web page, which demonstrates this. Please increase the number of table rows to any value above 30 and try to move the mouse cursor over the rows a little faster. You will notice that in IE7 the hover style is not being applied at all on most of the rows and the CPU load is kept around 100%.

    
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>IE hover speed</title> 
        
            <style type="text/css"> 
        
            .myTable th, 
        
            .myTable td 
        
            { 
        
                border:1px solid #ccc; 
        
                padding:3px 5px; 
        
            } 
        
            .myTable tr:hover 
        
            { 
        
                background:#eee;     
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <table class="myTable" cellspacing="0"> 
        
            <thead> 
        
            <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th></tr> 
        
            </thead> 
        
            <tbody> 
        
            <tr><td>Column 1 value</td><td>Column 2 value</td><td>Column 3 value</td><td>Column 4 value</td><td>Column 5 value</td></tr> 
        
            <tr><td>Column 1 value</td><td>Column 2 value</td><td>Column 3 value</td><td>Column 4 value</td><td>Column 5 value</td></tr> 
        
            <tr><td>Column 1 value</td><td>Column 2 value</td><td>Column 3 value</td><td>Column 4 value</td><td>Column 5 value</td></tr> 
        
            </tbody> 
        
            </table> 
        
            </body> 
        
            </html>

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 29 Dec 2008, 02:10 PM

It's actually as basic as it comes and was the only way to get the hover to work properly across all browsers. Here is a snippet:

    
            <tr class="tableAlternateRow" onmouseover="javascript:this.className='tableRowHover';" onmouseout="javascript:this.className='tableAlternateRow';"> 
        
            <td>content</td> 
        
            </tr>

I definitely recalled having hit this issue with some of the methods that I think you guys are employing now (and your sample does exactly what I expected with IE), but it turns out that in this case the most basic option actually resolved it. Is this something you all could possibly work into a new release (maybe as a property so it is optional)?