Is there a HighlightFirst option for DropDownList?

[Steve]

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" }
                })
    )

 

 

 

[Yanislav]

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