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

HoverStyle High Processor Usage

5 Answers 73 Views
Grid
This is a migrated thread and some comments may be shown as answers.
digitall
Top achievements
Rank 1
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

Sort by
0
Princy
Top achievements
Rank 2
answered on 24 Dec 2008, 05:58 AM
Hi,

I have found the following forum link which discusses a similar scenario. Go through it and see if it helps to some extent.
Grid Hover Style Latency

Princy.
0
digitall
Top achievements
Rank 1
answered on 24 Dec 2008, 01:27 PM
Based on what I am seeing we are essentially being told to deal with it which would definitely not be ideal. I know before I had access to the Telerik controls I would write a repeater control with an embedded table that used a simple Javascript script on each row that would swap the CSS classes and it performed flawlessly on IE6/7 and FF2/3. Is there nothing like this available with the Grid?
0
Dimo
Telerik team
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.
0
digitall
Top achievements
Rank 1
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)?
0
Dimo
Telerik team
answered on 29 Dec 2008, 03:25 PM
Hi digitall,

As far as I can see, the difference in performance when using onmouseover and onmouseout is negligible, compared to the CSS-only solution. And the CPU load is still at 100%.

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
digitall
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
digitall
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or