Changing Only the Border of the Selected ListBox Item

6 posts, 0 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 02 Feb 2013 Link to this post

    I've configured a RadListBox such that it displays different RadListBoxItems with different background colors depending on various criteria.  That all works fine.

    When a RadListBoxItem is single-clicked upon then it currently changes to a blue background color; this is accomplished with the ".rlbSelected" CSS property.  However, users are finding this confusing and would prefer that the original color be preserved.  So instead I would like to change the Border of the SelectedItem to a thicker one.  This is easy to accomplish but unfortunately the background color changes to the default grey.

    Keeping in mind that I need to preserve the original background color, how would I accomplish this thickening of the border?

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

    Posted 04 Feb 2013 Link to this post

    Hi Robert

    Try the following CSS to change the border of the Selected Item
    CSS
    <style type="text/css">
     .RadListBox .rlbGroup .rlbActive
     {
         border:2px solid black !important;
     }
    </style>

    Thanks
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 04 Feb 2013 Link to this post

    Princy,

    Thank you for that idea but it doesn't really solve the problem.  With your suggestion the thick border only appears after the user single-clicks twice in succession on a listbox item.

    To accomplish the thick border outline I just need to add this to my styles.css file:

    .rlbSelected
    {
       border:2px solid black;
    }

    However, whether I try what's shown above or your suggestion, it doesn't solve the larger problem.  Let me demonstrate through three screenshots.  Notice in the 2nd & 3rd screenshots that the original colouring of the RadListBoxItem has turned to grey.  That's what I want to avoid but can't figure out how.

    Incidentally, I'm assigning the custom background colour in the RadListBox's "ItemCreated" event handler.  There are 3 possibilities:

    item.CssClass = "rlbItemFromBreak";            // Green gradient
     
    item.CssClass = "rlbItemFromStock_Equip";      // Pink gradient
     
    item.CssClass = "rlbItemFromPass";             // Orange gradient

    So, to be clear, what I'm trying to figure out how to do is to maintain these custom gradient backgrounds after a RadListBoxItem has been clicked upon.  Yes, I will thicken the border to indicate which is the current one but I don't want the original colourful gradient to turn grey.

    How do I do that?

    Robert

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Feb 2013 Link to this post

    Hi Robert,

    When you have the Default background skin of the RadListbox control you can use the following css class selectors for the diffrent states of the RadLisBoxItems:
    /*selected item*/
          div.RadListBox_Default .rlbGroup .rlbSelected {
              background: none repeat scroll 0 0 yellow;
          }
     
          div.RadListBox .rlbGroup .rlbActive {
              border: 2px solid green;
              padding: 1px 4px;
          }
          /*hovered item*/
          div.RadListBox_Default .rlbGroup .rlbHovered {
              background: none repeat scroll 0 0 yellow;
                border: 2px solid green;
              padding: 1px 4px;
          }

    Note that if you use any other skins you will simply need to change the name of the first css class selector with the name of the skin that you have(as explained here).

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 08 Feb 2013 Link to this post

    Dear Kate,

    As I wrote you privately, the approach you suggested does not work.  The problem lies in the fact that the Active style for the Selected RadListBoxItem varies depending on how the RadListBoxItem was originally coloured.

    It took awhile but I've finally found a solution.  As I mention in the comments, it's not elegant but it's the only way I've found to accomplish the task at hand:

    // Originally we had changed the selected RadListBoxItem to a gradient blue background via the
    // 'rlbSelected' style.  This was confusing to the user though so now we're going to maintain
    // the original gradient background.  This is actually a lot tricker than it sounds because
    // the Selected/Active state overrides the normal, unselected class.  The following approach is
    // not very elegant but will have to do for now until a better approach is found.
    string backImage = "../Images/Gradients/ListBox/";
    switch (radListBoxMuck.SelectedItem.CssClass)
    {
      case "rlbItemFromBreak":
        backImage += "greenGradient0.jpg";
        break;
     
      case "rlbItemFromStock_Equip":
        backImage += "pinkGradient0.jpg";
        break;
     
      case "rlbItemFromPass":
        backImage += "orangeGradient0.jpg";
        break;
     
      default:
        Bugs.LogError("Unknown RadListBoxItem CSS Class: " + radListBoxMuck.SelectedItem.CssClass, Constants.ErrorCode.MissingCaseItem);
        break;
    }
     
    radListBoxMuck.SelectedItem.Style.Add("background-image", backImage);

    Robert
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Feb 2013 Link to this post

    Hello Robert,

    In case anyone else is interested in getting the solution for this issue I will attach the runnable page with this post that I provided in the ticket. I will also answer shortly your other issue in the ticket that you have already opened.

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017