<TelerikGrid Data="@GridData"
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItems="@SelectedItems"
             SelectedItemsChanged="@( (IEnumerable<Employee> newSelected) => OnSelectedItemsChanged(newSelected) )"
             Height="300px">
    <GridToolBarTemplate>
        <TelerikButton Enabled="@(SelectedItems.Any())" OnClick="@DeleteSelectedEmployees">Delete</TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" />
        <GridColumn Field="Name" Title="Name" />
        <GridColumn Field="Team" Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Employee> GridData { get; set; } = Enumerable.Range(1, 10).Select(i => new Employee
    {
        EmployeeId = i,
        Name = $"Employee {i}",
        Team = $"Team {i % 3}"
    }).ToList();

    private List<Employee> SelectedItems { get; set; } = new();

    private void OnSelectedItemsChanged(IEnumerable<Employee> items)
    {
        SelectedItems = items.ToList();
    }

    private void DeleteSelectedEmployees()
    {
        if (SelectedItems.Any())
        {
            GridData = GridData.Except(SelectedItems).ToList();
            SelectedItems.Clear();
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public override bool Equals(object obj) => obj is Employee e && e.EmployeeId == EmployeeId;
        public override int GetHashCode() => EmployeeId.GetHashCode();
    }
}

<TelerikDrawer Data="@NavigablePages" Expanded="true" MiniMode="true" Mode="@DrawerMode.Push">
    <DrawerContent>
        <TelerikGridLayout>
            <GridLayoutItems>
                <GridLayoutItem Column="1">
                    <TelerikCard Width="300px" Height="400px">
                        <CardHeader>
                            <CardTitle>CARD 1</CardTitle>
                        </CardHeader>
                        <CardBody>
                            @if (IsLoading)
                            {
                                <span style="height:100%">...loading...</span>
                            }
                            else
                            {
                                <TelerikChart Transitions=@false>
                                    <ChartSeriesItems>
                                        <ChartSeries Type="ChartSeriesType.Donut" Data="@donutData"
                                                        Field="@nameof(MyDonutChartModel.SegmentValue)" CategoryField="@nameof(MyDonutChartModel.SegmentName)">
                                            <ChartSeriesTooltip Visible="@IsChartTooltipVisible" Background="#222731" Color="#FFFFFF">
                                                <Template>
                                                    @((context.DataItem as MyDonutChartModel)?.Tooltip)
                                                </Template>
                                            </ChartSeriesTooltip>
                                        </ChartSeries>
                                    </ChartSeriesItems>
                                </TelerikChart>
                            }
                        </CardBody>
                    </TelerikCard>
                </GridLayoutItem>
                <GridLayoutItem Column="2">
                    <TelerikCard Width="300px" Height="400px">
                        <CardHeader>
                            <CardTitle>CARD 2</CardTitle>
                        </CardHeader>
                        <CardBody>
                            <TelerikButton OnClick="@OnClickHandler">REFRESH CHART</TelerikButton>
                        </CardBody>
                    </TelerikCard>
                </GridLayoutItem>
            </GridLayoutItems>
        </TelerikGridLayout>
    </DrawerContent>
</TelerikDrawer>


@code{

    public bool IsLoading { get; set; } = false;
    public bool IsChartTooltipVisible { get; set; } = true;

    private async Task OnClickHandler()
    {
        IsLoading = true;
        IsChartTooltipVisible = false;
        // Simulate API call
        await Task.Delay(2000);
        IsLoading = false;
        // Force the Chart to render
        StateHasChanged();
        // Delay the Chart Tooltip initialization
        await Task.Delay(100);
        IsChartTooltipVisible = true;
    }

    List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>
{
        new DrawerItem { Text = "Home", Icon = SvgIcon.Home }
    };

    public class DrawerItem
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }

    public class MyDonutChartModel
    {
        public string SegmentName { get; set; }
        public double SegmentValue { get; set; }
        public string Tooltip { get; set; }
    }

    public List<MyDonutChartModel> donutData = new List<MyDonutChartModel>
    {
        new MyDonutChartModel
        {
            SegmentName = "Product 1",
            SegmentValue = 2,
            Tooltip = "Tooltip 1"
        },
        new MyDonutChartModel
        {
            SegmentName = "Product 2",
            SegmentValue = 3,
            Tooltip = "Tooltip 2"
        },
        new MyDonutChartModel
        {
            SegmentName = "Product 3",
            SegmentValue = 4,
            Tooltip = "Tooltip 3"
        }
    };
}

<TelerikNumericTextBox @bind-Value="@Price1" ShowClearButton=true/>
<p>Price: @Price1</p>
@code {
    private decimal? Price1 { get; set; }
}

<p>Load a PDF file from your computer in both PDF Viewers and click the buttons.</p>

<strong>@TestResult</strong>

<br /><br />

<TelerikButton OnClick="@OnLoadButtonClick1" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Get Current PDF 1</TelerikButton>

<TelerikPdfViewer @ref="@PdfViewerRef1"
                  Data="@PdfViewerData1"
                  AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
                  Height="400px">
</TelerikPdfViewer>

<TelerikButton OnClick="@OnLoadButtonClick2" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Get Current PDF 2</TelerikButton>

<TelerikPdfViewer @ref="@PdfViewerRef2"
                  Data="@PdfViewerData2"
                  AnnotationMode="@PdfViewerAnnotationMode.EnableForms"
                  Height="400px">
</TelerikPdfViewer>

@code {
    #nullable enable

    private TelerikPdfViewer? PdfViewerRef1 { get; set; }
    private TelerikPdfViewer? PdfViewerRef2 { get; set; }
    private byte[]? PdfViewerData1 { get; set; }
    private byte[]? PdfViewerData2 { get; set; }

    private string TestResult { get; set; } = string.Empty;

    private async Task OnLoadButtonClick1()
    {
        var pdfSource = await PdfViewerRef1!.GetFileAsync();
        TestResult = $"First PDF Viewer GetFileAsync() returned {pdfSource} at {DateTime.Now.ToString("HH:mm:ss")}";
    }

    private async Task OnLoadButtonClick2()
    {
        var pdfSource = await PdfViewerRef2!.GetFileAsync();
        TestResult = $"Second PDF Viewer GetFileAsync() returned {(pdfSource != null ? pdfSource.ToString() : "null")}  at {DateTime.Now.ToString("HH:mm:ss")}";
    }

    protected override void OnInitialized()
    {
        PdfViewerData1 = Convert.FromBase64String(PdfBase64);
    }

    private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy0zMCAtNjQgMjcwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihQREYgRmlsZSAuLi4pIFRqCkVUCmVuZHN0cmVhbQplbmRvYmoKeHJlZgowIDUKMDAwMDAwMDAwMCA2NTUzNSBmCjAwMDAwMDAwMjEgMDAwMDAgbgowMDAwMDAwMDg2IDAwMDAwIG4KMDAwMDAwMDE5NSAwMDAwMCBuCjAwMDAwMDA0OTAgMDAwMDAgbgp0cmFpbGVyIDw8ICAvUm9vdCAxIDAgUiAvU2l6ZSA1ID4+CnN0YXJ0eHJlZgo2MDkKJSVFT0Y=";
}