RadListBox Client Side Data Binding with Custom CSS Classes

[Sam Rossetti]

I'm adding items to a RadListBox on the client side and would like to know if there was an easy way to conditionally set a CSS class. 

Currently I must insert each item and then call the get_element method on the RadListBoxItem. 

Ideally I would like to be able to set the CSS class on the RadListBoxItem, add it to a collection, and then use the ListBox's insertItems method to do a batch insert. 

Heres an idea of what I'm doing now.

function employeePickerOnSuccessCallBack(employeeInfo) {
    var listbox = $find(<%= RadListBox1.ClientId %>);
    listbox.trackChanges();
    var item = new window.Telerik.Web.UI.RadListBoxItem();
    item.set_text(employeeInfo.name);
    item.set_value(employeeInfo.value);
    listbox.get_items().add(item);
    if (!employeeInfo.IsActive) {
        var liElement = item.get_element();
        $(liElement).addClass("inactive");
    }
    listbox.commitChanges();
}

Edit: Added some code

[Kate]

Hi Sam,

Currently the one way I could think of is to apply a css class to a ListBoxItem is by using jQuery. You can try  the code below for instance: 

var $ = $telerik.$(".rlbItem").attr("class", "NewCssClass");

Greetings,
Kate
the Telerik team

[Sam Rossetti]

I ended up just using an image to denote inactive records. 

I went back and tried the suggested fix and it applied the class to every node. It also replaced the rlbItem class which caused some weirdness with the mouse over effects.

I'm a little surprised that the client side RadListBoxItem doesn't have a set_class or add_class method. Could that become a feature request?

[Kate]

Hello Sam,

Indeed the approach that I suggested add a css class to all of the listbox items that currently have the rlbItem css class applied. This is why you get this appearance to all of the items. It is also true that currently the RadListBox control does not have a client side property that will set a css class to a particular item and the only way now is to use jQuery. I will, however, forward your request to our development team so they could consider it for future implementation.  

Regards,
Kate
the Telerik team

[Sam Rossetti]

Thanks for the help and thanks for forwarding the feature request.

[Genady Sergeev]

Hi Sam,

We will add such property for the next internal build, meanwhile you can use the following JavaScript if you want to append class name to all items in the listbox:

var listBox = $find('<%= RadListBox1 %>')
$telerik.$(".rlbItem", listBox).addClass("foo")

Regards,
Genady Sergeev
the Telerik team