ComboBox CheckBox=True .css

[Rae]

I have a RadComboBox where Checkboxes-True.

<telerik:RadComboBox ID="omboBox" runat="server"
                                                        CheckBoxes="True"
                                                        Skin="Metro"
                                                        Width="350px" 
                                                        RenderMode="Lightweight"></telerik:RadComboBox>

 

I bind to a list of items, then I check some of those items (server side):

comboBox.DataSource = tblList
comboBox.DataBind()

Then, for each item (as RadComboBoxItem) in combobox, that's in tblOtherList, item.Checked = True

I would like the items where checked=true to be font-weight: bold; when the dropdown list shows, and the rest of the items to be font-weight: normal.

I tried adding item.CssClss = "boldFont", (and in .css added .boldfont{font-weight:bold;}) however when the item is unchecked, it remains bold.  So then I tried to capture the ItemChecked event,and using "AutoPostBack=True", and then checking to see if the item had been unchecked, setting the item.CssClass = "".  

2 problems happened with this: 

1. this list closes every time an item is checked/unchecked, even when in an RadAjaxManager
2. I ended up with some weird extra text on the page once the list closed....so my guess was that wasn't going to work

I also tried to target the item through .css, but I can't seem to get the right .css that is dependent on the state of the check box.

Here is the html that I'm trying to target, to make the label bold:

<li class="rcbItem">
<label>
<input type="checkbox" class="rcbCheckBox" checked="checked">Item 2
</label>::after</li>

Everything that I'm seeing on the web says that IF the entire label element was after the input element,I could use something like this:

input[type=checkbox]:checked + label {          
          font-weight: bold;
        }

But since the <input> is a child of <label> it's not working.

Any ideas on how to to achieve this?

I'm using version 2019.1.215.40 

Thanks!

[Rae]

I figured it out.

Server side, when I set item.Checked = true, I also keep the item.CssClass = "boldText"

Then, rather than doing a post-back, I trigger the "OnClientItemChecked="OnClientComboBoxItemChecked" to call javascript

the javascript:

function OnClientComboBoxItemChecked(sender, eventArgs) {

       var item = eventArgs.get_item();

                 

       var element = item.get_element();

       if (item.get_checked()) {

           element.classList.add("boldtext")

       }

       else {

            element.classList.remove("boldtext")

       }

}

 

.css:

li.rcbItem.boldtext>label{
      font-weight: bold;
}

li.rcbHovered.boldtext>label{
      font-weight: bold;
}