Alternate row coloring disables hover/selected coloring

3 posts, 0 answers
  1. Ken
    Ken avatar
    4 posts
    Member since:
    Mar 2011

    Posted 24 May 2013 Link to this post

    I have a RadListBox that allows reordering and requires alternate row coloring.

    OnClientLoad and OnClientReordered events call a function in javascript that applies alternate row coloring.

    var x = document.getElementsByTagName("li");
    for (i = 0; i < x.length; i++) {
        if (i % 2 == 0) {
            x[i].style.backgroundColor = "#EFF3FB";
        }
        else {
            x[i].style.backgroundColor = "white";
        }
    }

    This had to be done on client side since we can't enable autopostback for performance reasons.

    This works, however it disables the hover and selected background color default behavior.

    Also, is there a way I can change the CssClass of each item of the RadListBox through the sender object of the OnClientLoad and OnClientReordered events?

    Thank you for your assistance.

  2. Ken
    Ken avatar
    4 posts
    Member since:
    Mar 2011

    Posted 28 May 2013 Link to this post

    Update:

    Switched from doing

    Javascript:
    x[i].style.backgroundColor = "#EFF3FB";

    to

    CSS:
    .evenColor {
        background-color: #EFF3FB;
    }

    .oddColor {
        background-color: white;
    }


    Javascript:
    x[i].className = "evenColor";

    This allows the default onhover and onselected background colors to still work.
    However doing this small change introduced what seems to be a bug... only the first item the mouse hovers over gets the onhover background color change. You have to fiddle with the mouse, moving it on/off the RadListBox control before it highlights another row, and there is significant delay between interactions now.

    I also tried working with the sender object passed to the event handler instead:

    var items = sender.getItems();
    for (i = 0 < items.length; i++) {

    var listItem = items.getItem(i)
        if (i % 2 ==0) {
            listItem.set_cssClass = "evenColor";
        } else {
            listItem.set_cssClass = "oddColor";
        }
    }

    This does not work, none of the rows in the RadListBox have their background colors change.
    If I could at least get this code to work, that should avoid the bug introduced above, while allowing the alternate row coloring to work.

    Any help would be greatly appreciated!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 29 May 2013 Link to this post

    Hello Ken,

    I noticed that you sent us a support ticket, regarding the same issue. Therefore, I would like to ask you to continue our conversation in the other ticket, in order to keep the correspondence consistent.


    Regards,
    Nencho
    Telerik
    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