RadListBox Client Side Data Binding with Custom CSS Classes

6 posts, 0 answers
  1. Sam Rossetti
    Sam Rossetti avatar
    15 posts
    Member since:
    Aug 2009

    Posted 15 Feb 2012 Link to this post

    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
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 16 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sam Rossetti
    Sam Rossetti avatar
    15 posts
    Member since:
    Aug 2009

    Posted 17 Feb 2012 Link to this post

    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?
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Sam Rossetti
    Sam Rossetti avatar
    15 posts
    Member since:
    Aug 2009

    Posted 21 Feb 2012 Link to this post

    Thanks for the help and thanks for forwarding the feature request.
  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 24 Feb 2012 Link to this post

    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
    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