@implements IAsyncDisposable
@inject IJSRuntime JS

<TelerikGantt Data="@GanttData"
              @bind-View="@CurrentView"
              Class="scrollable-gantt-1"
              IdField="@nameof(FlatModel.Id)"
              ParentIdField="@nameof(FlatModel.ParentId)"
              Width="700px"
              Height="500px">
    <GanttViews>
        <GanttDayView></GanttDayView>
        <GanttWeekView></GanttWeekView>
        <GanttMonthView></GanttMonthView>
        <GanttYearView></GanttYearView>
    </GanttViews>
    <GanttColumns>
        <GanttColumn Field="@nameof(FlatModel.Id)"
                     Visible="false">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.Title)"
                     Expandable="true"
                     Width="160px"
                     Title="Task Title">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.PercentComplete)"
                     Title="Completed"
                     Width="60px">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.Start)"
                     Width="100px"
                     TextAlign="@ColumnTextAlign.Right">
        </GanttColumn>
        <GanttColumn Field="@nameof(FlatModel.End)"
                     DisplayFormat="End: {0:d}"
                     Width="100px">
        </GanttColumn>
    </GanttColumns>
</TelerikGantt>

<script suppress-error="BL9992">
    function initGanttScrollSync(ganttSelector) {
        const ganttTimelineContent = document.querySelector(ganttSelector + " .k-gantt-timeline .k-grid-content");
        if (ganttTimelineContent) {
            ganttTimelineContent.addEventListener("scroll", onGanttTimelineScroll);
        }
    }

    function disposeGanttScrollSync(ganttSelector) {
        const ganttTimelineContent = document.querySelector(ganttSelector + " .k-gantt-timeline .k-grid-content");

        if (ganttTimelineContent) {
            ganttTimelineContent.removeEventListener("scroll", onGanttTimelineScroll);
        }
    }

    function onGanttTimelineScroll(e) {
        const ganttTimelineHeader = e.target.closest(".k-gantt-timeline").querySelector(".k-grid-header-wrap");
        if (ganttTimelineHeader) {
            ganttTimelineHeader.scrollLeft = e.target.scrollLeft;
        }
    }
</script>

@code {
    private List<FlatModel> GanttData { get; set; } = new List<FlatModel>();
    private List<FlatModel> Data { get; set; } = new List<FlatModel>();

    private GanttView CurrentView { get; set; } = GanttView.Week;

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

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("initGanttScrollSync", ".scrollable-gantt-1");
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync()
    {
        await JS.InvokeVoidAsync("disposeGanttScrollSync", ".scrollable-gantt-1");
    }

    protected override void OnInitialized()
    {
        GanttData = new List<FlatModel>();
        var random = new Random();

        for (int i = 1; i <= 3; i++)
        {
            var newItem = new FlatModel()
            {
                Id = LastId,
                Title = $"Employee  {i}",
                Start = new DateTime(2020, 12, 10 + i),
                End = new DateTime(2020, 12, 11 + i),
                PercentComplete = Math.Round(random.NextDouble(), 2),
                HasChildren = true
            };

            GanttData.Add(newItem);
            var parentId = LastId;
            LastId++;

            for (int j = 1; j <= 2; j++)
            {
                GanttData.Add(new FlatModel()
                {
                    Id = LastId,
                    ParentId = parentId,
                    Title = $"Employee {i} : {j}",
                    Start = new DateTime(2020, 12, 20 + j),
                    End = new DateTime(2020, 12, 21 + i + j),
                    PercentComplete = Math.Round(random.NextDouble(), 2)
                });

                LastId++;
            }
        }

        base.OnInitialized();
    }

    public class FlatModel
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Title { get; set; } = string.Empty;
        public double PercentComplete { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool HasChildren { get; set; }
    }
}

<TelerikGrid 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.MaskedValue)">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <TelerikMaskedTextBox @bind-Value="@dataItem.MaskedValue"
                                      Mask="AAA-AAA" />
            </EditorTemplate>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

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

    private int LastId { get; set; }

    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}",
                MaskedValue = $"ABC-{LastId:D3}"
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string MaskedValue { get; set; } = string.Empty;
    }
}

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

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<p>ComboBox Value: @ComboBoxValue</p>

<TelerikComboBox ItemHeight="30"
                 OnRead="@OnComboBoxRead"
                 PageSize="20"
                 ScrollMode="@DropDownScrollMode.Virtual"
                 TItem="@ListItem"
                 TValue="@(int?)"
                 @bind-Value="@ComboBoxValue"
                 ValueMapper="@ComboBoxValueMapper"
                 Width="240px" />

@code {
    private List<ListItem>? ComboBoxData { get; set; }

    private int? ComboBoxValue { get; set; } = 3;

    private async Task OnComboBoxRead(ReadEventArgs args)
    {
        DataSourceResult result = await ComboBoxData.ToDataSourceResultAsync(args.Request);

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

    private async Task<ListItem?> ComboBoxValueMapper(int? selectValue)
    {
        // Triggers the bug
        await Task.Yield();

        ListItem? result = ComboBoxData?.FirstOrDefault(x => selectValue == x.Value);

        return result;
    }

    protected override void OnInitialized()
    {
        ComboBoxData = Enumerable
            .Range(1, 1234)
            .Select(x => new ListItem()
                {
                    Value = x,
                    Text = $"Item {x}"
                })
            .ToList();
    }

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

<PdfViewerToolBarCustomTool>
    <TelerikButton OnClick="@SaveAnnotationsAsync">Save</TelerikButton>
</PdfViewerToolBarCustomTool>

var annotatedPdf = await pdfViewerRef.GetFileAsync();
await _scanFlowApi.SaveAnnotatedDocumentAsync(documentId, annotatedPdf);
// server-side: await File.WriteAllBytesAsync(path, annotatedPdf, ct);