How to add TabIndex to DropDownList Control ?

In the DropDownList control, the input element is hidden and non-editable. When TabIndex is set to the DropDownList control using the HtmlAttributes property, it is set to the input element and TabIndex will not work for hidden elements. So, to set proper TabIndex for the DropDownList control, it must be set to the control’s wrapper element.

Consider the following example,

<ej-drop-down-list id="bikeList" datasource="ViewBag.datasource" watermark-text="Select a bike"create="onCreate"> 
    <e-drop-down-list-fields id="empid" text="text" value="text" /> 
</ej-drop-down-list> 
 
<script> 
    function onCreate() { 
        //this.wrapper is the widget’s wrapper to assign the tabindex  value        this.wrapper.attr("tabindex", "1"); 
    } 
</script>
 

In the previous code, the DropDownList’s client-side create event is used to set the TabIndex to the control’s wrapper element.

Sample