[Solved] Mouse Hover over the Grid Items causes high CPU usage

[Avi]

Hi,

I have used RadGrid with custom skins.
The problem is  if i start hovering the mouse over the grid, the CPU usage drastically

Please help me out.

The custom skin i am using is :

/* r.a.d.menu Web 2.0 skin */

.RadMenu_Blue
{
    background: url(Menu/MenuItemBackground.gif);
    border-left: solid 1px #617fb5;
}

.RadMenu_Blue_Context
{
    background: none;
    border:0;
}

.RadMenu_Blue .rmLink
{
    text-decoration: none;
    color: #fff;
    border-left: solid 1px #c2cfe3;
    border-right: solid 1px #617fb5;
    background: transparent;
}

.RadMenu_Blue .rmLink:hover,
.RadMenu_Blue .rmFocused,
.RadMenu_Blue .rmExpanded
{
    color:Black;
    background: transparent url(Menu/MainItemBackgroundHover.gif) no-repeat center;
}

.RadMenu_Blue .rmText
{
    /*background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat right center;*/
    padding-left: 22px; /* should be adjusted to the size of the images, if they are larger than 16x16px */
    margin-right: 4px;
    font:10px "segoe ui",arial,sans-serif;
    line-height: 20px;
    padding-right: 24px;
    background-image:none;
}


.RadMenu_Blue .rmRootGroup .rmText .rmLeftImage
{
    margin: 3px 1px 0; /* should be adjusted to the size of the images, if they are larger than 16x16px */
}

.RadMenu_Blue .rmHorizontal .rmExpandBottom,
.RadMenu_Blue .rmHorizontal .rmExpandTop
{
  background: transparent url(Menu/RootGroupArrowDown.gif) no-repeat rightright center;
}

.RadMenu_Blue .rmVertical .rmExpandLeft,
.RadMenu_Blue .rmVertical .rmExpandRight
{
  background: transparent url(Menu/invertedGroupImage.gif) no-repeat rightright center;
}


.RadMenu_Blue .rmSlide
{
    margin-top:-1px;
}

.RadMenu_Blue .rmGroup
{
    border: solid 1px #6788be;
    background: white;
}

.RadMenu_Blue .rmGroup .rmLink
{
    background: white;
    border: 0px;
    border-bottom: solid 1px #f0f2f3;
    color: #333;
}

.RadMenu_Blue .rmGroup .rmText
{
    font-weight: normal !important;
    background: none;
    margin-right: 0 !important;
    padding-left: 30px;
    padding-right: 40px;
    font-size: 10px;
}

.RadMenu_Blue .rmGroup .rmLink:hover,
.RadMenu_Blue .rmGroup .rmFocused,
.RadMenu_Blue .rmGroup .rmExpanded
{
    background: #c7d9ef;
    border: 0;
    border-bottom: solid 1px #d8dde0;
}

.RadMenu_Blue .rmLeftArrow,
.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmTopArrow,
.RadMenu_Blue .rmBottomArrow,
.RadMenu_Blue .rmLeftArrowDisabled,
.RadMenu_Blue .rmRightArrowDisabled,
.RadMenu_Blue .rmTopArrowDisabled,
.RadMenu_Blue .rmBottomArrowDisabled
{
    background: #e7f1ff url(Menu/left.gif) center center no-repeat;
    width: 15px;
    text-decoration:none;
    color:#e7f1ff;
}

.RadMenu_Blue .rmTopArrow,
.RadMenu_Blue .rmTopArrowDisabled
{
    background-image: url(Menu/top.gif);
    width: 100%;
    height: 15px;
}

.RadMenu_Blue .rmBottomArrow,
.RadMenu_Blue .rmBottomArrowDisabled
{
    background-image:url(Menu/bottombottom.gif);
    width: 100%;
    height: 15px;
}

.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmLeftArrow
{
    height: 100%;
}

.RadMenu_Blue .rmRightArrow,
.RadMenu_Blue .rmRightArrowDisabled
{
    background-image: url(Menu/rightright.gif);
}

.RadMenu_Blue .rmVertical .rmSeparator
{
    padding-top: 2px;
    background: #6788be;
    font-size: 1px;
    line-height: 1px;
}

.RadMenu_Blue .rmSeparator .rmText
{
    display: none;
}

.RadMenu_Blue .rmExpandLeft,
.RadMenu_Blue .rmExpandRight,
.RadMenu_Blue .rmFocused .rmExpandLeft,
.RadMenu_Blue .rmFocused .rmExpandRight,
.RadMenu_Blue .rmExpanded .rmExpandLeft,
.RadMenu_Blue .rmExpanded .rmExpandRight
{
    background: transparent url(Menu/invertedGroupImage.gif) rightright center no-repeat;
}

.RadMenu_Blue .rmGroup .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmExpandRight,
.RadMenu_Blue .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Blue .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Blue .rmGroup .rmExpanded .rmExpandRight
{
    background: transparent url(Menu/groupImage.gif) rightright center no-repeat;
}

/*right-to-left support*/

.RadMenu_Blue_rtl,
.RadMenu_Blue_rtl *
{
    text-align:rightright;
}

.RadMenu_Blue_rtl .rmRootGroup .rmText
{
    padding-left: 24px;
    padding-right: 8px;
    margin-right: 0;
    margin-left: 4px;
}

.RadMenu_Blue_rtl .rmGroup .rmText
{
    margin-left: 0 !important;
    padding-left: 40px;
    padding-right: 30px;
}

.RadMenu_Blue .rmLeftImage
{
    margin: 5px 2px 0;
}

.RadMenu_Blue_rtl .rmHorizontal .rmExpandBottom,
.RadMenu_Blue_rtl .rmHorizontal .rmExpandTop
{
  background-position:left center;
}

.RadMenu_Blue_rtl .rmVertical .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmExpandRight
{
  background: transparent url(Menu/invertedGroupImageRTL.gif) no-repeat left center;
}

.RadMenu_Blue_rtl .rmGroup .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmExpandRight
{
  background: transparent url(Menu/groupImageRTL.gif) no-repeat 5px center;
}

.RadMenu_Blue_rtl .rmVertical .rmLink:hover .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmLink:hover .rmExpandRight,
.RadMenu_Blue_rtl .rmVertical .rmFocused .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmFocused .rmExpandRight,
.RadMenu_Blue_rtl .rmVertical .rmExpanded .rmExpandLeft,
.RadMenu_Blue_rtl .rmVertical .rmExpanded .rmExpandRight
{
    background: transparent url(Menu/invertedGroupImageRTL.gif) left center no-repeat;
}

.RadMenu_Blue_rtl .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Blue_rtl .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Blue_rtl .rmGroup .rmExpanded .rmExpandLeft,
.RadMenu_Blue_rtl .rmGroup .rmExpanded .rmExpandRight
{
    background: transparent url(Menu/groupImageRTL.gif) 5px center no-repeat;
}

.RadMenu_Blue .rmRootGroup .rmItem .rmDisabled,
.RadMenu_Blue .rmRootGroup .rmItem .rmDisabled:hover
{
    -moz-opacity: 0.8;
    opacity: 0.8;
    color: #ccc;
    background: none;
    border-bottom-color: #f3f5f5;
}

[Schlurk]

Does this occur for every item in the Grid or is it only specific items? I noticed that you are using .RadMenu_Blue - are you using any other skins for  the RadGrid? I wasn't able to see the behavior on my side, so just making sure there's no details missing.
You could also try to see what happens (in terms of CPU usage) if you take out all hovering references in your custom skin.

[Avi]

Hi, Schlurk

Yes, this occurs every time.

I have used the exact css that i have posted here.


Thanks,
Avi