Is there a HighlightFirst option for DropDownList?

1 Answer 34 Views
ComboBox DropDownList
Steve
Top achievements
Rank 1
Steve asked on 04 Nov 2021, 03:04 AM

The ComboBox control appears to have a configuration called HighlightFirst which supresses the automatic highlighting of the first list item as the user types.

Is there any way of implementing this same logic on the DropDownList control? By default, it appears to highlight / focus on the first option in the list when the user begins to type.

@(Html.Kendo().DropDownList()
        .Name("Sku")
        .DataValueField("Value")
        .DataTextField("Text")
        .//HighlightFirst(false)
        .Filter("contains")
        .AutoBind(false)
        .BindTo(new List<SelectListItem>()
                {
                    new SelectListItem(){ Value = "ZIP100", Text = "ZIP100 - Zip Active Stool | Stock | 400H-550H | Purple Moon	" },
                    new SelectListItem(){ Value = "ZIP101", Text = "ZIP101 - Zip Active Stool | Stock | 400H-550H | Juice Green" },
                    new SelectListItem(){ Value = "ZIP102", Text = "ZIP102 - Zip Active Stool | Stock | 400H-550H | Capri Mid Blue" },
                    new SelectListItem(){ Value = "ZIP103", Text = "ZIP103 - Zip Active Stool | Clearance | 400H-550H | Opal Light Blue" },
                    new SelectListItem(){ Value = "ZIP104", Text = "ZIP104 - Zip Active Stool | Clearance | 400H-550H | Oyster Grey" },
                    new SelectListItem(){ Value = "ZIP105", Text = "ZIP105 - Zip Active Stool | Clearance | 400H-550H | Melon Rush" },
                    new SelectListItem(){ Value = "ZIP106", Text = "ZIP106 - Zip Active Stool | Stock | 400H-550H | Charcoal" },
                    new SelectListItem(){ Value = "ZIP107", Text = "ZIP107 - Zip Active Stool | Clearance | 400H-550H | Capri Blue with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP108", Text = "ZIP108 - Zip Active Stool | Clearance | 400H-550H | Juice Green with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP109", Text = "ZIP109 - Zip Active Stool | Clearance | 400H-550H | Melon Rush with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP110", Text = "ZIP110 - Zip Active Stool | Clearance | 400H-550H | Opal Blue with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP111", Text = "ZIP111 - Zip Active Stool | Clearance | 400H-550H | Oyster Grey with NC Whale Seat Pad" },
                    new SelectListItem(){ Value = "ZIP112", Text = "ZIP112 - Zip Active Stool | Clearance | 400H-550H | Purple Moon with NC Whale Seat Pad" }
                })
    )

 

 

 

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 04 Nov 2021, 01:26 PM

Hello, Steve

Try removing the classes the theme uses to highlight the items. You can do it in the DataBound event handler. Here's how:

.Events(ev=>ev.DataBound("onDataBound"))

And here is the event handler:

  function onDataBound(e) {
        var firstElement = $("#YourDDLName_listbox li").first()
        firstElement.removeClass("k-state-focused");
        firstElement.removeClass("k-state-selected");
    }

In general, such modifications are not advised. The problem is that the DropDownList is not supposed to work like this. By design and unlike the ComboBox, the DropDownList should always have a value. Since you configured with AutoBind(false) when the user opens the component it gets the first value, that's why the first option is highlighted. Thus, modifying this default behavior by removing classes could cause potential issues.

Regards,
Yanislav
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/.

Tags
ComboBox DropDownList
Asked by
Steve
Top achievements
Rank 1
Answers by
Yanislav
Telerik team
Share this question
or