highlight a particular attendee with a red border in the dropdown list | Kendo Scheduler

[Pankaj]

Hi,

I have a requirement to highlight a particular attendee with a red border in the dropdown list. The idea is to indicate that this attendee is not available at that specific date and time when someone opens the appointment pop-up (refer to the attachment). I know color option is there but i want to add red border to particular attendee. there can be situation where red border can be added to more then one attendee. Please help me understand how I can achieve this.

Thanks!

[Pankaj]

Hello ,

Telerik support team request you to please provide a workaround for this. 

Regards

[Martin]

Hello, Pankaj,

A possible approach would be to use the edit event to find the DropDownList component in the edit popup. You can then bind to the DropDownList's open event, and use the API to search for the specific item on which you wish to apply custom styles:

 edit: function(){
            var ddl = $("[data-container-for='ownerId']").children().find("select").data("kendoDropDownList")
            ddl.bind("open", function(e){
              var items = e.sender.dataSource.data();
              for(let item of items){ 
                if(item.text === "Alex"){
                  $(`.k-list-item-text>span:contains(${item.text})`).parent().closest("li").css('background-color', 'yellow');
                }
              }
            })
          },

Here you will find a small example for reference.

Regards,
Martin
Progress Telerik