@page "/test"
@using System.Collections.ObjectModel

<TelerikToolBar Class="toolbar-size" Adaptive="false">    
    <ToolBarButton Icon="@SvgIcon.FileAdd" OnClick="@OnAdd">Add</ToolBarButton>
</TelerikToolBar>

<TelerikSplitter Height="500px">
    <SplitterPanes>
        <SplitterPane Size="20%" Collapsible="true">
            <TelerikTreeView Data="@Items" @bind-CheckedItems="@CheckedItems"                             
                             CheckBoxMode="TreeViewCheckBoxMode.Multiple">
                <TreeViewBindings>
                    <TreeViewBinding ParentIdField="ParentIdValue"></TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
        </SplitterPane>
        <SplitterPane Collapsible="true">
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

@code {

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public ISvgIcon Icon { get; set; }
    }

    public ObservableCollection<TreeItem> Items { get; set; } = new ObservableCollection<TreeItem>();
    public IEnumerable<object> CheckedItems { get; set; } = new List<object>();

    private int counter;

    private void OnAdd()
    {
        this.Items.Add(new TreeItem { Id = counter, Text = $"test {counter}" });
        counter++;
    }
}

<QuickGrid Items="@_Items" ItemKey="(item) => item.Guid" Theme="">

https://docs.telerik.com/blazor-ui/components/grid/export/excel#basics


<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true" >

    <GridToolBarTemplate>
        <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBarTemplate>

    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        Columns..
    </GridColumns>
</TelerikGrid>

@typeparam TEntity where TEntity : class, IEntity, new()

<div>
    <TelerikGrid 
        @ref="GridRef"
        Pageable="true"
        Sortable="true"
        Resizable="true"
        ShowColumnMenu="true"
        Reorderable="true"
        PageSize="50"
        SelectionMode="@GridSelectionMode.Single"
        SelectedItems="@_selectedItems"
        SelectedItemsChanged="@((IEnumerable<TEntity> list) => OnGridSelectedItemsChanged(list))"
        OnRowClick="@OnGridRowClick"
        OnRead="GetGridData"
        EnableLoaderContainer="true">
        @* toolbar, columns, etc. *@
    </TelerikGrid>

    <EditForm EditContext="@_editContext" OnSubmit="OnSubmitAsync">

        <TelerikDateTimePicker Placeholder=" "
            Value="(DateTime?)PropertyValue"
            ValueExpression="ValueExpression<DateTime?>()"
            ValueChanged="(DateTime? val) => OnValueChanged(val)"
            Readonly="true">
        </TelerikDateTimePicker>

    </EditForm>
</div>

@code {
    private EditContext? _editContext;
    private IEnumerable<TEntity> _selectedItems = Enumerable.Empty<TEntity>();
    private TEntity? _selectedItem;    

    [CascadingParameter] public TEntity? Entity { get; set; }

    protected override void OnInitialized()
    {
        _editContext = new(Entity);
        _editContext.OnFieldChanged += OnFieldChanged!;
    }

    // Override the grid's built-in row selection by handling the SelectedItemsChanged event. Do not execute any logic in it to let the OnGridRowClick handle the selection.
    // https://docs.telerik.com/blazor-ui/knowledge-base/grid-select-or-deselect-item-on-row-click
    private void OnGridSelectedItemsChanged(IEnumerable<TEntity> selectedList)
    {
    }

    private async Task OnGridRowClick(GridRowClickEventArgs args)
    {
        var currItem = args.Item as TEntity;

        if (currItem?.Id == _selectedItem?.Id) return;

        var discardChanges = await ConfirmDiscardFormChangesAsync();

        if (!discardChanges) return;

        _selectedItems = new[] { currItem };
        _selectedItem = _selectedItems.First();  
    }

    private async Task OnValueChanged(object? value)
    {
        // not getting fired when grid's selected item is changed, which is good
    }

    private void OnFieldChanged(object sender, FieldChangedEventArgs args)
    {
        // gets fired when grid's selected item is changed
        // _editContext.IsModified() is true here
    }
}

@typeparam TItem
    <TelerikGrid  Data="Data" SelectionMode="GridSelectionMode.Multiple"
                 Pageable="true" PageSize="3" Page="1"
                 Sortable="true" SortMode="@SortMode.Multiple"
                 FilterMode="GridFilterMode.FilterMenu"
                 EditMode="@GridEditMode.Popup"
                 Resizable="true" Reorderable="true" ConfirmDelete="true">

        <GridSettings>

            <GridValidationSettings Enabled="true"></GridValidationSettings>

            <GridPopupEditSettings MaxWidth="600px"
                                   MaxHeight="300px"
                                   Class="custom-popup"
                                   Title="Update Details">
            </GridPopupEditSettings>
            <GridPopupEditFormSettings Orientation="@FormOrientation.Horizontal"
                                       ButtonsLayout="FormButtonsLayout.Center"
                                       Columns="3">

            </GridPopupEditFormSettings>
        </GridSettings>


        <GridToolBarTemplate>
            <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileCsv">Export to Excel</GridCommandButton>
            <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
        </GridToolBarTemplate>

        <GridExport>
            <GridExcelExport FileName="EmployeeDetails Sheet" AllPages="true" />
        </GridExport>

        <GridColumns>
    
            @GridCols
        
            <GridCommandColumn>
                <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
                <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
                <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
                <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
            </GridCommandColumn>
        </GridColumns>
    </TelerikGrid>



@code
{
    [Parameter]
     public IEnumerable<TItem>? Data{get; set;}

    [Parameter]
    public RenderFragment<TItem>? GridCols { get; set; }

}

@page "/emp"
@inject HttpClient Http
@using System.Text.Json;

<h1>Employee Details</h1>

@if (employees == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <GenericGrid TItem="EmpDetails" Data="@employees">
      <GridCols>
            <GridColumn Field="@nameof(EmpDetails.Name)" Title="Employee Name" /> 
            <GridColumn Field="@nameof(EmpDetails.Age)" Title="Age" />
            <GridColumn Field="@nameof(EmpDetails.Place)" Title="Place" />
      </GridCols>
    </GenericGrid>

}

<TelerikGrid class="NewPairsGrid" 
            Data="@Pairs" 
            AutoGenerateColumns="false"       
            RowHeight="15" 
            Height="1000px" 
            Pageable="true"
            PageSize="25"
            Sortable="true"
>
    <GridColumns>

        <GridColumn Field="PairCreatedTimeStamp" Title="Token Age" width="75px">
            <Template Context="dataItem">
                @if (dataItem is EthPairTradeInfoVDto ethPairTradeInfoVDto)
                {
                    var timestamp = CalculateElapsedTime(dataItem as EthPairTradeInfoVDto);
                    <span class="tooltip-target">@timestamp</span>
                    <TelerikTooltip TargetSelector=".tooltip-target" Width="auto" Height="auto" Position="@TooltipPosition.Right">
                    <Template Context="tooltipContext">
                        <span>
                            @RenderTooltipContent(ethPairTradeInfoVDto.PairCreatedTimeStamp)
                        </span>
                    </Template>
            </TelerikTooltip>                 
            </Template>
        </GridColumn>

RenderFragment RenderTooltipContent(DateTime? pairCreatedTimeStamp) => 
    builder =>
    {
        if (pairCreatedTimeStamp.HasValue)
        {
            builder.OpenElement(0, "span");
            builder.AddContent(1, $"Pair Timestamp: {pairCreatedTimeStamp.Value}");
            builder.CloseElement();
        }
    };