Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @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();
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement