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

Listbox - Alternate Row Colors

2 Answers 334 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Jeffrey
Top achievements
Rank 1
Veteran
Iron
Iron
Jeffrey asked on 14 May 2020, 03:25 PM

Hello

Is there a way to have the listbox alternate row colors?  An type of slight row shading would work. 

 

Thank you

Jeff

2 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 18 May 2020, 08:36 AM

Hello Jeffrey,

Alternating rows in the ListBox is not a built-in functionality, however, it can be easily achieved. The ListBox renders as an unordered list, thus the items list can be traversed and a custom CSS class appended applying the desired color. For example:

$('ul li').each(function(index, element) {
    if( index % 2) {
        var li = $(element).addClass("alternatingColor");
     }
});
...
<style>
      .alternatingColor {
        background-color: aliceblue;
      }
 </style>

This can be examined live in the following Dojo demo:

Let me know if you have any questions.

Regards,


Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Morten
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 18 Apr 2024, 11:27 AM

I do this:

        .k-listbox ul li:nth-child(even) {
            background-color: #ebebeb;
        }
Tags
ListBox
Asked by
Jeffrey
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Nikolay
Telerik team
Morten
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or