<TelerikGrid TItem="@GridModel"
             Data="@GridData"
             AutoGenerateColumns="true">
</TelerikGrid>

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

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 3; i++)
        {
            GridData.Add(new GridModel()
            {
                SpecialProp = i,
                Text = "Text " + (i * 111)
            });
        }
    }

    public record GridModel : Base1 { }

    public record Base1 : Base2
    {
        public new decimal? SpecialProp { get => base.SpecialProp / base.HelperProp.GetValueOrDefault(1); set => base.SpecialProp = value.HasValue ? (int)(value.GetValueOrDefault() * base.HelperProp.GetValueOrDefault(1)) : null; }
    }

    public record Base2
    {
        public int? SpecialProp { get; set; }
        public string Text { get; set; }
        public int? HelperProp = 10;
    }
}

private PropertyInfo FieldPropertyInfo => ContainerGenericArgument?.GetProperty(Field);

PropertyInfo FieldPropertyInfo = ContainerGenericArgument?.GetProperties().FirstOrDefault(p => p.Name == Field);

@using System.Collections.ObjectModel
@using Telerik.FontIcons

<TelerikGrid Data="@Cards"
             Height="800px"
             FilterMode="GridFilterMode.FilterRow"
             EditMode="GridEditMode.Inline"
             OnCreate="NewCard"
             OnUpdate="UpdateCard"
             OnDelete="DeleteCard"
             ConfirmDelete="true"
             @ref="@GridReference">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add" Icon="@FontIcon.Plus">New</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(AdminCard.SerialNumber)" Title="Serial number" />
        <GridColumn Field="@nameof(AdminCard.DisplayNumber)" Title="Display number" />
        <GridColumn Field="@nameof(AdminCard.Name)" />
        <GridCommandColumn Width="140px">
            <GridCommandButton Command="Save" Icon="@FontIcon.Save" ShowInEdit="true" />
            <GridCommandButton Command="Edit" Icon="@FontIcon.Pencil" />
            <GridCommandButton Command="Delete" Icon="@FontIcon.Trash" />
            <GridCommandButton Command="Cancel" Icon="@FontIcon.Cancel" ShowInEdit="true" />
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<AdminCard> GridReference { get; set; }

    public ObservableCollection<AdminCard> Cards { get; set; } = new();

    protected override async Task OnInitializedAsync() =>
      Cards = new ObservableCollection<AdminCard>{
        new AdminCard{SerialNumber="123", DisplayNumber="1234 1234", Name="Jim"}
                      };

    private async Task NewCard(GridCommandEventArgs args)
    {
        AdminCard card = (AdminCard)args.Item;
        Cards.Add(card);

        //apply this after saving the new record to the database
        var gridState = GridReference.GetState();
        gridState.InsertedItem = null;
        gridState.OriginalEditItem = null;
        await GridReference.SetStateAsync(gridState);
    }

    private async Task UpdateCard(GridCommandEventArgs args)
    {
        AdminCard fromGrid = (AdminCard)args.Item;
        AdminCard existing = Cards.Single(c => c.Id == fromGrid.Id);
        existing.SerialNumber = fromGrid.SerialNumber;
        existing.DisplayNumber = fromGrid.DisplayNumber;
        existing.Name = fromGrid.Name;
    }

    private async Task DeleteCard(GridCommandEventArgs args)
    {
        AdminCard card = (AdminCard)args.Item;
        Cards.Remove(card);
    }

    public class AdminCard
    {
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string SerialNumber { get; set; } = "";
        public string DisplayNumber { get; set; } = "";
        public string Name { get; set; } = "";
    }
}