<InputTextArea class="k-textarea" @bind-Value="@myValue"></InputTextArea>

<TelerikGrid Data="@GridData"
             AdaptiveMode="@AdaptiveMode.Auto"
             FilterMode="GridFilterMode.FilterMenu"
             ShowColumnMenu="true">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.Group)" />
        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
        <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Product> GridData { get; set; } = new();

    protected override void OnInitialized()
    {
        var rnd = Random.Shared;

        for (int i = 1; i <= 3; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
                Group = $"Group {i % 3 + 1}",
                Price = rnd.Next(1, 100) * 1.23m,
                Quantity = rnd.Next(0, 10000),
                Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
                Discontinued = i % 4 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Group { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}

@using System.ComponentModel.DataAnnotations

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             EditMode="@GridEditMode.Incell"
             OnUpdate="@OnGridUpdate"
             OnCreate="@OnGridCreate">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.StartDate)" Title="BUG" DisplayFormat="{0:d}" />
        <GridColumn Field="@nameof(Product.EndDate)" Title="WORKAROUND" DisplayFormat="{0:d}">
            <EditorTemplate>
                @{ var editItem = (Product)context; }
                <TelerikDatePicker Value="editItem.EndDate"
                                   ValueChanged="@((DateTime? newValue) => OnGridDatePickerValueChanged(newValue, editItem))"
                                   ValueExpression="@( () => editItem.EndDate )"
                                   OnClose="@(async () => await OnGridDatePickerClose(editItem))" />
            </EditorTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    #nullable enable

    private TelerikGrid<Product>? GridRef;
    private List<Product> GridData { get; set; } = new();

    private int LastId { get; set; }

    private DateTime LastDatePickerValueChanged { get; set; } = DateTime.Now;

    private void OnGridDatePickerValueChanged(DateTime? newValue, Product editItem)
    {
        editItem.EndDate = newValue;
        LastDatePickerValueChanged = DateTime.Now;
    }

    private async Task OnGridDatePickerClose(Product editItem)
    {
        if (DateTime.Now - LastDatePickerValueChanged > TimeSpan.FromMilliseconds(500))
        {
            GridState<Product> gridState = GridRef!.GetState();

            if (gridState.EditItem is not null && gridState.EditItem.Id == editItem.Id)
            {
                // Uncomment to perform an item update instead of cancel
                // OnGridUpdate(new GridCommandEventArgs { Item = editItem });

                gridState.OriginalEditItem = null!;
                gridState.EditItem = null!;

                await GridRef.SetStateAsync(gridState);
            }
        }
    }

    private void OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        createdItem.Id = ++LastId;

        GridData.Insert(0, createdItem);
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;
        var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

        if (originalItemIndex != -1)
        {
            GridData[originalItemIndex] = updatedItem;
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 5; i++)
        {
            GridData.Add(new Product()
            {
                Id = ++LastId,
                Name = $"Product {LastId}",
                Price = Random.Shared.Next(0, 100) * 1.23m,
                Quantity = Random.Shared.Next(0, 1000),
                StartDate = DateTime.Today.AddDays(-Random.Shared.Next(60, 1000)),
                EndDate = DateTime.Today.AddDays(Random.Shared.Next(1, 60)),
                IsActive = LastId % 4 > 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public bool IsActive { get; set; }
    }
}

@implements IDisposable
@inject NavigationManager NavManager

<TelerikTabStrip ActiveTabId="@ActiveTabId"
                 ActiveTabIdChanged="@TabStripActiveTabIdChanged">
    @for (int i = 1; i <= TabCount; i++)
    {
        int tabIndex = i;

        <TabStripTab @key="@tabIndex" Title="@($"Tab {tabIndex}")" Id="@($"tab{tabIndex}")">
            <h2>Tab @tabIndex</h2>
        </TabStripTab>
    }
</TelerikTabStrip>

@code {
    private string ActiveTabId { get; set; } = "tab1";

    private bool IsNavigating { get; set; }

    private const int TabCount = 3;
    

    private async Task TabStripActiveTabIdChanged(string newActiveTabId)
    {
        if (IsNavigating)
        {
            return;
        }

        ActiveTabId = newActiveTabId;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            locationChangingRegistration = NavManager.RegisterLocationChangingHandler(OnLocationChanging);
        }
    }

    private IDisposable? locationChangingRegistration;

    private ValueTask OnLocationChanging(LocationChangingContext context)
    {
        IsNavigating = true;

        return ValueTask.CompletedTask;
    }

    public void Dispose() => locationChangingRegistration?.Dispose();
}

Selected value: @myDdlData.ToList().Where(x => x.Id == selectedValueId).FirstOrDefault()?.MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff")
<br />

<TelerikDropDownList Data="@myDdlData" 
                     TextField="MyTextField" 
                     ValueField="Id" 
                     @bind-Value="selectedValueId">
</TelerikDropDownList>

@code {
    public class MyDdlModel
    {
        public int Id { get; set; }
        public DateTime MyValueField { get; set; }
        public string MyTextField => MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff"); // Display formatted DateTime
    }

    private int selectedValueId { get; set; } = 1;

    private IEnumerable<MyDdlModel> myDdlData = GenerateRandomDateTimes(20);

    private static IEnumerable<MyDdlModel> GenerateRandomDateTimes(int count)
    {
        Random random = new Random();
        DateTime startDate = DateTime.Now;

        return Enumerable.Range(1, count)
            .Select(x => new MyDdlModel
            {
                Id = x, // Unique integer Id
                MyValueField = startDate.AddDays(x)
                    .AddMinutes(random.Next(0, 60))
                    .AddSeconds(random.Next(0, 60))
                    .AddMilliseconds(random.Next(0, 1000))
            }).ToList();
    }
}