Row Template Detail

Templates.cshtml

@page "/grid/templates"

@using TelerikBlazor.App.Models
@inject NorthwindContext nwContext

<h4> Row Template </h4>

<KendoGrid Data=@GridData Height="@Height">
    <RowTemplate Context="product">
        @if (selectedId == product.ProductId)
        {
        <td colspan="2">
            <KendoButton Icon="close" OnButtonClick="@(()=> SelectedProduct(null))">Close</KendoButton>
            <div class="card mb-3">
                <div class="row no-gutters">
                    <div class="col-md-1">
                        <img class="rounded-circle ml-3 mt-3" src="@($"/images/{product.ProductId}.jpg")" alt="Alternate Text" />
                    </div>
                    <div class="col-md-11">
                        <div class="card-body">
                            <h5 class="card-title">@product.ProductName</h5>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label>Quantity Per Unit</label>
                                    <input type="text" class="form-control" value="@product.QuantityPerUnit">
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Reorder Level</label>
                                    <input type="text" class="form-control" value="@product.ReorderLevel">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label>Unit Price</label>
                                    <input type="text" class="form-control" value="@product.UnitPrice">
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Units in Stock</label>
                                    <input type="text" class="form-control" value="@product.UnitsInStock">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </td>
        }
        else
        {
            <td onclick="@(()=> SelectedProduct(product.ProductId))">
                <img class="rounded-circle" src="@($"/images/{product.ProductId}.jpg")" alt="Alternate Text" />
                @product.ProductName
            </td>
            <td>
                @(String.Format("{0:C2}", product.UnitPrice))
            </td>
        }
    </RowTemplate>
    <KendoGridColumns>
        <KendoGridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <KendoGridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" />
    </KendoGridColumns>
</KendoGrid>

@functions {
    int? selectedId;
    public IEnumerable<Product> GridData { get; set; }
    public int Height = 500;
    void SelectedProduct(int? id)
    {

        selectedId = id;
        StateHasChanged();
    }
    protected override async Task OnInitAsync()
    {
        await LoadData();
    }

    private async Task LoadData()
    {
        GridData = await nwContext.Products.Take(10).ToListAsync();
    }
}