Different background color for each Dropdownlist items

1 Answer 18 Views
DropDownList Styling
Jose
Top achievements
Rank 1
Jose asked on 11 May 2022, 09:20 AM

Hi there,

I have a dropdownlist with some item and I am trying to put different background colors. I achieved to change the color of all the list elements adding this on the css:

  .k-popup .k-list .k-item {
      background-color: aqua;
  }

 

So, is there any way to apply a different background-color for each item in the dropdown?

Regards,

Jose

1 Answer, 1 is accepted

Sort by
1
Accepted
Hetali
Telerik team
answered on 16 May 2022, 12:23 AM | edited on 24 May 2022, 08:29 PM

Hello Jose,

In order to apply different background color to each item of the Kendo UI DropDownList, use the ItemTemplateDirective and the opened event as seen below:

<kendo-dropdownlist
  [data]="listItems"
  (opened)="openedDropdown($event)"
>
  <ng-template kendoDropDownListItemTemplate let-dataItem>
    <span [style.background]="dataItem.color" class="dropdownItem">
      {{ dataItem.text }} 
    </span>
  </ng-template>
</kendo-dropdownlist>
public openedDropdown(e) {
  var items = document.querySelectorAll(".dropdownItem");
  items.forEach((item) => {
    item.parentElement['style'].backgroundColor = item['style'].backgroundColor;
  });
}

In this StackBlitz example, the items in the DropDownList have the assigned background color.


To apply the background color after the filterChange event or the selectionChange event, use the setTimeout method to run the above custom function after the change takes place.

For example:

public selectionChange() {
  this.applyBackground();
}

public handleFilter() {
  this.applyBackground();
} 

public applyBackground() {
  setTimeout(() => {
    var items = document.querySelectorAll('.dropdownItem');
    items.forEach((item) => {
      item.parentElement['style'].backgroundColor = item['style'].backgroundColor;
    });
  });
}


To show the items and value of the DropDownList in the center, use the following CSS:

.k-dropdownlist .k-input-value-text,
.k-list-item {
  text-align: center;
  display: block;
}


In this updated StackBlitz example, I have addressed the background color issue after the events and the center alignment of the list items and value.

I hope this custom implementation helps.

Regards,
Hetali
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jose
Top achievements
Rank 1
commented on 23 May 2022, 06:53 AM

Hi again,

Thanks for the example above, was really helpful. Now, I am trying different things to achieve some characteristics but I did not get a good result.

Following the StackBlitz example you gave me above, I was trying to get this functionalities:

  • When an element is changed, the background color changes but only the span item. The background color of the dropdown is not changing until you open the dropdown. I tried calling selectionChange and 
  • When I use the filter only the span background maintains as the first point in the item list when I put a letter that is not in that string (for example 'ñ'). 
  • "Text-align: center" for listItemTemplate and ListValueTemplate. I added a style in template but did not work.

I add the new code in a .txt file. I hope you can help me solving this problems.

Regards,

Jose

 

Hetali
Telerik team
commented on 24 May 2022, 08:31 PM

Hi Jose,

Please take a look at the updated answer where I have addressed the issue mentioned. Please give it a try and let me know if it helps.

Thanks,
Hetali

Tags
DropDownList Styling
Asked by
Jose
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or