HoverStyle High Processor Usage

6 posts, 0 answers
  1. digitall
    digitall avatar
    169 posts
    Member since:
    Jun 2006

    Posted 23 Dec 2008 Link to this post

    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?


  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Dec 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. digitall
    digitall avatar
    169 posts
    Member since:
    Jun 2006

    Posted 24 Dec 2008 Link to this post

    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?
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 Dec 2008 Link to this post

    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.
  6. digitall
    digitall avatar
    169 posts
    Member since:
    Jun 2006

    Posted 29 Dec 2008 Link to this post

    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)?
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 29 Dec 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017