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

OnMouseOver Backgroung color in listview items

1 Answer 296 Views
ListView
This is a migrated thread and some comments may be shown as answers.
shahin4u
Top achievements
Rank 1
shahin4u asked on 12 Apr 2011, 10:58 AM
I am using a RadListView. now I would like to single item background color on MouseOver and on Mouse Out.now i use a  a CSS on mouseover,
<style type="text/css">
.normal { background-color: #000000 }
.normalActive { background-color: #999999 }
</style>

 it change colored all item. but i need single item. any solution???

1 Answer, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 14 Apr 2011, 07:31 AM
Hello Shahin,

To do this you need to add a special CSS class to wrapper in your ItemTemplate. For example if you have a field "country" in your database and want to add this class to all from Mexico:
<ItemTemplate>                           
     <fieldset runat="server" class='<%# Eval("Country").Equals("Mexico") ? "fieldMexico":null %>' >
     .....
     </fieldset>
</ItemTemplate>                           

And add the following CSS:
.fieldMexico
{
    background-color: #000;
    color: #ddd;
}
 
.fieldMexico_active, /*For IE6*/
.fieldMexico:hover
{
    background-color: #999;
    color: #333;
}

Also use this javascript for fixing the IE 6 hover bug:
if($telerik.isIE6) {
    Sys.Application.add_load(function(){
        $telerik.$('.fieldMexico').each(function(){
            $telerik.$(this).bind('mouseover', function(){$telerik.$(this).addClass('fieldMexico_active')}).bind('mouseout', function(){$telerik.$(this).removeClass('fieldMexico_active')});
        });
    });
}

Please find in attached file a runable project with the upper example.


All the best,
Galin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Tags
ListView
Asked by
shahin4u
Top achievements
Rank 1
Answers by
Galin
Telerik team
Share this question
or