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

ComboBox CheckBox=True .css

1 Answer 101 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Rae
Top achievements
Rank 1
Rae asked on 31 Jan 2020, 10:17 PM

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!

1 Answer, 1 is accepted

Sort by
0
Accepted
Rae
Top achievements
Rank 1
answered on 03 Feb 2020, 04:21 PM

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;
}
Tags
ComboBox
Asked by
Rae
Top achievements
Rank 1
Answers by
Rae
Top achievements
Rank 1
Share this question
or