<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;          
        }

@page "/test"

<div>
    <TelerikGrid @ref="grid" Data="@GridData" @bind-Page="Page" PageSize="PageSize"
                 Pageable="true" Sortable="true" Groupable="true"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu" 
                 ShowColumnMenu="true"
                 TotalCount="@TotalRowCount"
                 SelectionMode="GridSelectionMode.Single"
                 OnRead=@ReadData>
        <GridAggregates>
            <GridAggregate Field=@nameof(TestData.Name) Aggregate="@GridAggregateType.Count" />
            <GridAggregate Field=@nameof(TestData.Surname) Aggregate="@GridAggregateType.Count" />
            <GridAggregate Field=@nameof(TestData.Department) Aggregate="@GridAggregateType.Count" />
        </GridAggregates>
        <GridColumns>
            <GridColumn Field="@(nameof(TestData.Name))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridColumn Field="@(nameof(TestData.Surname))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridColumn Field="@(nameof(TestData.Department))" FieldType="typeof(string)" Editable="false" Groupable="true" ShowColumnMenu="false" />
            <GridCommandColumn Width="60px" Lockable="false" ShowColumnMenu="true">
                <GridCommandButton Command="View" Icon="information" ShowInEdit="false" OnClick="@ViewItem"></GridCommandButton>
            </GridCommandColumn>
        </GridColumns>
    </TelerikGrid>
</div>


@code {

    protected TelerikGrid<TestData> grid;
    protected List<TestData> GridData { get; set; }
    public int TotalRowCount { get; set; } = 0;
    public int Page { get; set; } = 1;
    public int PageSize { get; set; } = 10;

    protected async Task ReadData(GridReadEventArgs args)
    {
        await LoadData();
    }

    protected async Task LoadData()
    {
        GridData = await GetSampleData();
        TotalRowCount = 100;
    }

    protected async Task<List<TestData>> GetSampleData()
    {
        List<TestData> results = new List<TestData>();

        results.Add(new TestData { Name = "Name1", Surname = "Surname1", Department = "Department1" });
        results.Add(new TestData { Name = "Name2", Surname = "Surname2", Department = "Department1" });
        results.Add(new TestData { Name = "Name3", Surname = "Surname3", Department = "Department1" });
        results.Add(new TestData { Name = "Name4", Surname = "Surname4", Department = "Department1" });
        results.Add(new TestData { Name = "Name5", Surname = "Surname5", Department = "Department2" });
        results.Add(new TestData { Name = "Name6", Surname = "Surname6", Department = "Department2" });
        results.Add(new TestData { Name = "Name7", Surname = "Surname7", Department = "Department2" });
        results.Add(new TestData { Name = "Name8", Surname = "Surname8", Department = "Department3" });
        results.Add(new TestData { Name = "Name9", Surname = "Surname9", Department = "Department3" });
        results.Add(new TestData { Name = "Name10", Surname = "Surname10", Department = "Department4" });

        await Task.Delay(1000); //simulate loading delay ...

        return results;
    }

    protected void ViewItem(GridCommandEventArgs args)
    {
        //navigate to edit view ...
    }

    public class TestData
    {
        public string Name { get; set; }
        public string Surname { get; set; }
        public string Department { get; set; }
    }
}

@{
    var model = ViewModel.Model;
}

<TelerikForm EditContext="@EditContext"
             Columns="2"
             ColumnSpacing="20px"
             Orientation="FormOrientation.Vertical"
             OnValidSubmit="OnValidSubmit">
    <FormValidation>
        <FluentValidationValidator />
    </FormValidation>
    <FormItems>
        <FormGroup LabelText="Set options">
            <FormItem>
                <Template>
                    <label class="k-label k-form-label" for="setName">Set Name</label>
                    <TelerikTextBox Id="setName" @bind-Value="@model.SetName"></TelerikTextBox>
                </Template>
            </FormItem>
            <FormItem>
                <Template>
                    <TelerikDateRangePicker @bind-StartValue="@model.StartDate"
                                            @bind-EndValue="@model.EndDate"
                                            Min="@ViewModel.MinStartDate"
                                            StartId="startDate"
                                            EndId="endDate"
                                            DisabledDates="@ViewModel.DisabledDates">
                    </TelerikDateRangePicker>
                </Template>
            </FormItem>
            <FormGroup Columns="2">
                <FormItem>
                    <Template>
                        <label class="k-label k-form-label" for="allowAutoFill">Allow Auto Fill</label>
                        <TelerikCheckBox Id="allowAutoFill" @bind-Value="@model.AllowAutoFill"></TelerikCheckBox>
                    </Template>
                </FormItem>
                <FormItem Field="@nameof(model.RequiredRecsToExpire)">
                    <Template>
                        <label class="k-label k-form-label">Required Recs to Expire</label>
                        <TelerikSlider @bind-Value="@model.RequiredRecsToExpire"
                                       Min="0"
                                       Max="20"
                                       SmallStep="1"
                                       LargeStep="5"
                                       ShowButtons="false"/>
                    </Template>
                </FormItem>
            </FormGroup>
        </FormGroup>
        <FormGroup LabelText="Initial starting point">
            <FormItem LabelText="existingSets">
                <Template>
                    <label class="k-label k-form-label" for="existingSets">From existing recommendation sets:</label>
                    <RecSetSelector AvailableSets="@ViewModel.AvailableSets"
                                    IsNew="true"
                                    SelectedSetId="@ViewModel.SelectedSetId"
                                    OnSetSelected="@OnSetSelected" />
                </Template>
            </FormItem>
            <FormItem>
                <Template>
                    <label class="k-label k-form-label" for="eanList">From a list of EANs:</label>
                    <TelerikTextArea Id="eanList"
                                     @bind-Value="@ViewModel.EanList"
                                     AutoSize="true">
                    </TelerikTextArea>
                </Template>
            </FormItem>
        </FormGroup>
        <FormItem ColSpan="2" Field="@nameof(model.Comment)">
            <Template>
                <TelerikTextArea Id="comment"
                                 @bind-Value="@model.Comment"
                                 AutoSize="true">

                </TelerikTextArea>
            </Template>
        </FormItem>
        <ValidationSummary />
    </FormItems>
    <FormButtons>
        <div class="justify-content-end">
            <TelerikButton ButtonType="ButtonType.Button" OnClick="OnCancel">Cancel</TelerikButton>
            <TelerikButton ButtonType="ButtonType.Submit" Primary="true">Save</TelerikButton>
        </div>
    </FormButtons>
</TelerikForm>

public class DisableDateItem
{
     public DateTime RangeBegin { get; set; }
     public DateTime RangeEnd { get; set; }
}

var bankHoliday = new DisableDateTime
{
       RangeBegin = new DateTime(2021, 09, 01),
       RangeEnd = new DateTime(2021, 09, 01)
};

var bankHoliday = new DisableDateTime
{
       RangeBegin = new DateTime(2021, 04, 30),
       RangeEnd = new DateTime(2021, 05, 02)
};