Telerik UI for Blazor Grid Demo

index.cshtml

@page "/"

<KendoGrid Data=@Orders Pageable=true Sortable=true>
    <KendoGridColumn Field=@nameof(OrderViewModel.OrderID)>
        <Template>
            @{
                var item = context as OrderViewModel;
                <KendoButton OnButtonClick=@(()=> HandleDelete(item))>Delete</KendoButton>
            }
        </Template>
    </KendoGridColumn>
    <KendoGridColumn Field=@nameof(OrderViewModel.Freight) />
    <KendoGridColumn Field=@nameof(OrderViewModel.OrderDate)>
        <Template>
            @( $"{(context as OrderViewModel).OrderDate:d}" )
        </Template>
    </KendoGridColumn>
    <KendoGridColumn Field=@nameof(OrderViewModel.ShipCity) />
    <KendoGridColumn Field=@nameof(OrderViewModel.ShipName) />
</KendoGrid>


@functions {

void HandleDelete(OrderViewModel item)
{
    Orders.Remove(item);
    StateHasChanged();
}

protected override void OnInit()
{
    Orders = Enumerable.Range(0, 50).Select(i => new OrderViewModel
    {
        OrderID = i,
        Freight = i * 10,
        OrderDate = new DateTime(2016, 9, 15).AddDays(i % 7),
        ShipName = "ShipName " + i,
        ShipCity = "ShipCity " + i
    }).ToList();
}

public List<OrderViewModel> Orders { get; set; }

public class OrderViewModel
{
    public int OrderID { get; set; }

    public decimal? Freight { get; set; }

    public DateTime? OrderDate { get; set; }

    public string ShipCity { get; set; }

    public string ShipName { get; set; }
}
}