Different background color for each Dropdownlist items

[Jose]

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

[Hetali]

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

[Jose]

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]

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