Alternating color of list items has side effect on mouseover color

3 posts, 0 answers
  1. John
    John avatar
    33 posts
    Member since:
    Jun 2010

    Posted 17 Nov 2010 Link to this post

    For version 2010.2.826.40. I have set a radlistbox so it will alternate every other row background with a different color.  Doing that caused the side effect that the mouse over color doesn't change as would be the case in the list box's default behavior.

    protected void Load_ManualWithFoundContent(string SearchResult)
            {
                WebServiceProxy wsp = new WebServiceProxy();
                DataSet ManualsWithSearchResults = wsp.GetServicesHandle.Search_ManualTitlesResult(SearchResult);
                DataTable dt = ManualsWithSearchResults.Tables[0];
                DataRowCollection drc = dt.Rows;
     
                RadListBoxItemCollection rlbic = RadList_ManualsWithFoundContent.Items;
     
                int i = 0;
                foreach (DataRow dr in drc)
                {
                    RadListBoxItem rlbi = new RadListBoxItem(dr["ManualName"].ToString(), dr["pKey"].ToString());
                    rlbi.BackColor = i++ %2 ==0 ? Color.WhiteSmoke : Color.White;
                     
                    rlbic.Add(rlbi);
                }
            }

    My thought on this is I need to add a handler client side for mouse over?
    function RadList_ManualsWithFoundContent_OnClientMouseOver(sender, evenArgs) {
      ...???set item color???...   
    }
    Not sure how to do this (looking through client side api).

    Thanks in advance
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Nov 2010 Link to this post

    Hello John,

    Actually there is a simpler solution to this issue - instead setting BackColor property of the items, please set CssClass property:

    rlbi.CssClass = i % 2 == 0 ? "whiteSmoke" : "white";

    and add the following css styles to the page:

    <style type="text/css">
      .RadListBox  .whiteSmoke
      {
          background-color: WhiteSmoke;
      }
       
      .RadListBox  .white
      {
          background-color: White;
      }
    </style>

    this way the hover style will no be overwritten.
    I've attached my test page for a reference.

    Best regards,
    Yana
    the Telerik team
    Browse the vast support resources we have to jumpstart 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    33 posts
    Member since:
    Jun 2010

    Posted 24 Nov 2010 Link to this post

    Wow, that worked great!  Thanks for for the attachment that was Very helpful.

    Thanks, again.
Back to Top