Changing Only the Border of the Selected ListBox Item

[Robert]

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

[Princy]

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

[Robert]

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

[Kate]

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

[Robert]

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

[Kate]

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