Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Row Template Detail
@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();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.