<style>
    .disabled-item {
        color: #D3D3D3;
        width:100%;
    }

    /* remove default padding so the user can't click the underlying element outside the template
        Note: this will also affect other dropdowns on the page
    */
    .ddl-item {
        padding: 4px 8px;
    }

    .k-popup ul.k-list li.k-item {
        padding: 0;
    }
</style>

@TheValue
<br />

<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@TheValue">
    <ItemTemplate>
        @{
            MyDdlModel item = context as MyDdlModel;
            <div @onclick:preventDefault="@item.IsDisabled" 
                 @onclick:stopPropagation="@item.IsDisabled"
                 class="@( item.IsDisabled ? "disabled-item ddl-item" : "ddl-item" )">
                    @item.MyTextField
            </div>
        }
    </ItemTemplate>
</TelerikDropDownList>


@code {
    int TheValue { get; set; } = 2;

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
        public bool IsDisabled { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel
    {
        MyTextField = "item " + x,
        MyValueField = x,
        IsDisabled = x % 3 == 0
    });
}

@using System.Collections.ObjectModel

<h4>Option Selected: 6 @selectedSix</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSix" />

<h4>Option Selected: 7 @selectedSeven</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSeven">
</TelerikDropDownList>

<TelerikButton OnClick="@AddOption">Add Item</TelerikButton>

<ul>
    @foreach (var item in myDdlData)
    {
        <li>@item.MyValueField</li>
    }
</ul>

@code {
    int selectedSix { get; set; } = 6;
    int selectedSeven { get; set; } = 7;

    ObservableCollection<MyDdlModel> myDdlData = new ObservableCollection<MyDdlModel>(Enumerable.Range(1, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }));

    protected override async Task OnInitializedAsync()
    {
        AddOption();

        await Task.Delay(TimeSpan.FromSeconds(1));

        AddOption();
    }

    void AddOption()
    {
        myDdlData.Add(new MyDdlModel { MyTextField = "item " + (myDdlData.Count + 1), MyValueField = myDdlData.Count + 1 });

        int origSelection = selectedSeven;
        selectedSeven = 0;
        StateHasChanged();
        //add this if it does not work
        //await Task.Delay(30);//wait a rendering frame
        selectedSeven = origSelection;
        //add this if it does not work
        //StateHasChanged();
    }

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

<div class="box">
    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">ComboBox</span>
        </div>
        <div class="col">
            <TelerikComboBox Data="@myComboData" TextField="ComboTextField" ValueField="ComboValueField"
                             @bind-Value="selectedCombo" ClearButton="true" Filterable="true">
            </TelerikComboBox>
        </div>
    </div>

    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">DropDownList</span>
        </div>
        <div class="col">
            <TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
                                 @bind-Value="@selectedDropDown">
            </TelerikDropDownList>
        </div>
    </div>

    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">Autocomplete</span>
        </div>
        <div class="col">
            <TelerikAutoComplete Data="@Suggestions" @bind-Value="@AutoCompleteValue"
                                 ClearButton="true" />
        </div>
    </div>
</div>

@code {
    public int selectedDropDown { get; set; }
    public int selectedCombo { get; set; }
    public string AutoCompleteValue { get; set; }

    //ComboBox
    public class ComboModel
    {
        public int ComboValueField { get; set; }
        public string ComboTextField { get; set; }
    }

    IEnumerable<ComboModel> myComboData = Enumerable.Range(1, 20).Select(x => new ComboModel { ComboTextField = "item " + x, ComboValueField = x });

    //DropDownList
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    //Autocomplete
    List<string> Suggestions { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
    };
}

	<select @onchange="@OnChangedAsync">
		<option></option>
		@if (DataSource != null)
		{
			@foreach (var item in DataSource)
			{
				<option @key="item" value="@optionValueFunc(item)" selected="@(item.Equals(SelectedItem))">@optionTextFunc(item)</option>
			}
		}
	</select>

	#region Private Members

	private Func<TSource, object> optionTextFunc;
	private Func<TSource, object> optionValueFunc;
	private TSource selectedItem = default(TSource);

	#endregion

        #region Public Parameters

	/// <summary>
	/// A List of objects to bind against.
	/// </summary>
	[Parameter]
	public IList<TSource> DataSource { get; set; } = new List<TSource>();

	/// <summary>
        /// A lambda expression referencing the property containing the text to display to the end user. Example: @(c => c.DisplayName)
        /// </summary>
        [Parameter]
        public Expression<Func<TSource, object>> OptionText { get; set; }

	/// <summary>
        /// A lambda expression referencing the property containing the value for this object, usually an identifier. Example: @(c => c.Id)
        /// </summary>
        [Parameter]
        public Expression<Func<TSource, object>> OptionValue { get; set; }

	/// <summary>
        /// The item from the <see cref="DataSource" /> that has been selected.
        /// </summary>
        [Parameter]
        public TSource SelectedItem { get; set; }

	/// <summary>
	/// The callback event required for two-way binding.
	/// </summary>
	[Parameter]
        public EventCallback<TSource> SelectedItemChanged { get; set; }

        #endregion

	private async Task OnChangedAsync(ChangeEventArgs changeEventArgs)
        {
            await UpdateSelection(DataSource.FirstOrDefault(c => optionValueFunc(c).ToString() == changeEventArgs.Value.ToString()));
        }

	private async Task UpdateSelection(TSource item)
        {
            selectedItem = item;
            await SelectedItemChanged.InvokeAsync(selectedItem);
        }

	protected override async Task OnInitializedAsync()
	{
            if (optionTextFunc == null && OptionText != null)
            {
                optionTextFunc = OptionText.Compile();
            }
            if (optionValueFunc == null && OptionText != null)
            {
                optionValueFunc = OptionValue.Compile();
            }
            await Task.CompletedTask;          
        }