@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             OnRead="@OnGridRead"
             TItem="@Product"
             EditMode="@GridEditMode.Incell"
             OnCreate="@OnGridCreate"
             OnDelete="@OnGridDelete"
             OnUpdate="@OnGridUpdate"
             Height="600px">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Name)) )">
                    <TelerikTextBox @bind-Value="@dataItem.Name" />
                </span>
            </EditorTemplate>
        </GridColumn>
        @* <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" /> *@
        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Discontinued)) )">
                    <TelerikCheckBox @bind-Value="@dataItem.Discontinued" />
                </span>
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn Width="180px">
            <GridCommandButton Command="Delete">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product>? GridRef { get; set; }

    private ProductService GridProductService { get; set; } = new();

    private async Task OnGridCellFocusOut(string field)
    {
        await Task.Delay(100);

        if (GridRef is null)
        {
            return;
        }

        GridState<Product> gridState = GridRef.GetState();
        Product? editItem = gridState.EditItem as Product;

        if (editItem is null)
        {
            return;
        }

        GridCommandEventArgs args = new GridCommandEventArgs()
        {
             Field = field,
             Item = editItem
        };

        await OnGridUpdate(args);


        gridState.EditField = default;
        gridState.EditItem = default!;
        gridState.OriginalEditItem = default!;

        await GridRef.SetStateAsync(gridState);
    }

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

        await GridProductService.Create(createdItem);
    }

    private async Task OnGridDelete(GridCommandEventArgs args)
    {
        var deletedItem = (Product)args.Item;

        await GridProductService.Delete(deletedItem);
    }

    private async Task OnGridRead(GridReadEventArgs args)
    {
        DataSourceResult result = await GridProductService.Read(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    private async Task OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;

        await GridProductService.Update(updatedItem);
    }

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

    #region Data Service

    public class ProductService
    {
        private List<Product> Items { get; set; } = new();

        private int LastId { get; set; }

        public async Task<int> Create(Product product)
        {
            await SimulateAsyncOperation();

            product.Id = ++LastId;

            Items.Insert(0, product);

            return LastId;
        }

        public async Task<bool> Delete(Product product)
        {
            await SimulateAsyncOperation();

            if (Items.Contains(product))
            {
                Items.Remove(product);

                return true;
            }

            return false;
        }

        public async Task<List<Product>> Read()
        {
            await SimulateAsyncOperation();

            return Items;
        }

        public async Task<DataSourceResult> Read(DataSourceRequest request)
        {
            return await Items.ToDataSourceResultAsync(request);
        }

        public async Task<bool> Update(Product product)
        {
            await SimulateAsyncOperation();

            int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);

            if (originalItemIndex != -1)
            {
                Items[originalItemIndex] = product;
                return true;
            }

            return false;
        }

        private async Task SimulateAsyncOperation()
        {
            await Task.Delay(100);
        }

        public ProductService(int itemCount = 5)
        {
            Random rnd = Random.Shared;

            for (int i = 1; i <= itemCount; i++)
            {
                Items.Add(new Product()
                {
                    Id = ++LastId,
                    Name = $"Product {LastId}",
                    Description = $"Multi-line\ndescription {LastId}",
                    Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m,
                    Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000),
                    ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)),
                    Discontinued = LastId % 2 == 0
                });
            }
        }
    }

    #endregion Data Service
}

<TelerikEditor Height="300px" @bind-Value="@Value" EditMode="Telerik.Blazor.EditorEditMode.Iframe" ReadOnly="true">
</TelerikEditor>

@code {
    public string Value { get; set; } =
            @"
<table>
    <tbody>
        <tr>
            <td>
               Some text
            </td>
        </tr>
        <tr style=""height: 24px"">
        </tr>
        <tr>
            <td>
                Some text
            </td>
        </tr>
    </tbody>
</table>
    ";
}

<TelerikButton Class="tooltip-target" Title="Telerik Tooltip">Button</TelerikButton>

<TelerikDropDownList Data="@ListItems"
                     @bind-Value="@SelectedValue"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Id)"
                     AdaptiveMode="@AdaptiveMode.Auto"
                     Width="300px" />
<TelerikTooltip TargetSelector=".tooltip-target"
                ShowOn="@TooltipShowEvent.Hover" />

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; } = 3;

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>();
        for (int i = 1; i <= 5; i++)
        {
            ListItems.Add(new ListItem()
            {
                Id = i,
                Text = $"Item {i}",
                Category = $"Category {i % 6 + 1}"
            });
        }
        base.OnInitialized();
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
    }
}

aria-controls="50dc5df2-b83e-41bd-8c34-98470aba77c6"

data-id="50dc5df2-b83e-41bd-8c34-98470aba77c6"
id="8630d4e4-2f22-4eaf-b96c-7cae113b70ed"

<TelerikDropDownButton Icon="@SvgIcon.Share" OnClick="@(()=>OnItemClick("Primary"))">
    <DropDownButtonContent>Share</DropDownButtonContent>
    <DropDownButtonItems>
        <DropDownButtonItem Icon="@SvgIcon.Facebook" OnClick="@(()=>OnItemClick("Facebook"))">Facebook</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Twitter" OnClick="@(()=>OnItemClick("Twitter"))">Twitter</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Linkedin" OnClick="@(()=>OnItemClick("Linkedin"))">Linkedin</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Reddit" OnClick="@(()=>OnItemClick("Reddit"))">Reddit</DropDownButtonItem>
    </DropDownButtonItems>
</TelerikDropDownButton>

<TelerikNumericTextBox Decimals="4"Max="5"Value="-4.56m"Id="general"></TelerikNumericTextBox>

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

<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId">
    <TabStripTab Title="First" Id="t1">
        First tab content.
    </TabStripTab>
    <TabStripTab Title="Second" Id="t2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="t3">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    private string? TabStripActiveTabId { get; set; }
}

<TelerikFilter @bind-Value="@AdvancedFilterValue">
	<FilterFields>
		@foreach (var it in GridDef.ColStore.Where(x => x.Verejny == true))
		{
			<FilterField Name="@it.FldName" Type="@it.FldType" Label="@it.VerejnyNazev"></FilterField>
		}
	</FilterFields>
</TelerikFilter>

aria-activedescendant="b45bcb14-4093-4de8-ad31-cae8ec8ca9c4"

<TelerikMultiSelect Data="@Hobbies"
@bind-Value="@SelectedHobbyIds"
ValueField="@nameof(HobbiesDto.HobbyId)"
TextField="@nameof(HobbiesDto.HobbyName)"
Placeholder="Select your favourite sport..."
Id="multiselect"
Width="100%"
Rounded="@ThemeConstants.DropDownList.Rounded.Medium"
FillMode="@ThemeConstants.AutoComplete.FillMode.Outline"
TagMode="@MultiSelectTagMode.Single"
ShowClearButton="false">
    <MultiSelectSettings>
        <MultiSelectPopupSettings Height="@CustomThemeConstants.Multiselect.PopupHeight" MaxHeight="@CustomThemeConstants.Multiselect.PopupMaxHeight" />
    </MultiSelectSettings>
</TelerikMultiSelect>

@code {
    public List<int> SelectedHobbyIds { get; set; } = [];

    public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
    {
        new HobbiesDto(1, "Basketball"),
        new HobbiesDto(2, "Golf"),
        new HobbiesDto(3, "Baseball"),
        new HobbiesDto(4, "Table Tennis"),
        new HobbiesDto(5, "Volleyball"),
        new HobbiesDto(6, "Football"),
        new HobbiesDto(7, "Boxing"),
        new HobbiesDto(8, "Badminton"),
        new HobbiesDto(9, "Cycling"),
        new HobbiesDto(10, "Gymnastics"),
        new HobbiesDto(11, "Swimming"),
        new HobbiesDto(12, "Wrestling"),
        new HobbiesDto(13, "Snooker"),
        new HobbiesDto(14, "Skiing"),
        new HobbiesDto(15, "Handball"),
    };

    public class HobbiesDto
    {
        public int    HobbyId   { get; set; }
        public string HobbyName { get; set; } = string.Empty;

        public HobbiesDto() { }

        public HobbiesDto(int id, string name)
        {
            HobbyId = id;
            HobbyName = name;
        }
    }
}