From 2c6617a10a059b33c613a4384b44618cb468f2b5 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Wed, 30 Jul 2025 14:34:19 +0000 Subject: [PATCH] Added new kb article grid-expand-edited-row --- knowledge-base/grid-expand-edited-row.md | 287 +++++++++++++++++++++++ 1 file changed, 287 insertions(+) create mode 100644 knowledge-base/grid-expand-edited-row.md diff --git a/knowledge-base/grid-expand-edited-row.md b/knowledge-base/grid-expand-edited-row.md new file mode 100644 index 000000000..592dfae65 --- /dev/null +++ b/knowledge-base/grid-expand-edited-row.md @@ -0,0 +1,287 @@ +--- +title: How to Automatically Expand the Currently Edited Row +description: Learn how to automatically expand the detail of the currently edited or newly inserted item in the TelerikGrid for UI for Blazor. +type: how-to +page_title: Expanding Details of Edited or New Row in TelerikGrid +meta_title: Expanding Details of Edited or New Row in TelerikGrid +slug: grid-kb-expand-edited-row +tags: grid, expand, template, edit, mode, hierarchy +res_type: kb +ticketid: 1694649 +--- + +## Environment + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I want to automatically expand the detail template of the row that is currently being edited or the newly inserted item in the [TelerikGrid](slug:grid-overview). + +## Solution + +To achieve automatic expansion of a detail template for the edited or newly inserted item, use the `OnEdit` and `OnCreate` events of the TelerikGrid with the `SetStateAsync` method. Below is an example implementation: + +>caption Expand currently edited row + +````RAZOR + + + Add Product + + + + + + + + + @if (GridEditMode != GridEditMode.Incell) + { + Edit + Save + Cancel + } + Delete + + + + + @{ + Product product = (Product)productItem; + + + Add Order + + + + + + + + + + @if (GridEditMode != GridEditMode.Incell) + { + Edit + Save + Cancel + } + Delete + + + + } + + + +@code { + public TelerikGrid GridRef { get; set; } + + private GridEditMode GridEditMode { get; set; } = GridEditMode.Inline; + private List GridData { get; set; } = new(); + private int LastId { get; set; } + private DateTime StartDate = new DateTime(2018, 1, 1); + private static Random RandomGenerator = new Random(); + + // When a row enters edit mode, expand it + private async Task OnEdit(GridCommandEventArgs args) + { + var editedItem = (Product)args.Item; + + var state = GridRef.GetState(); + state.ExpandedItems = new List { editedItem }; // collapse all others + await GridRef.SetStateAsync(state); + } + + #region CRUD Operations for Main Grid + private void UpdateProduct(GridCommandEventArgs args) + { + var item = (Product)args.Item; + var index = GridData.FindIndex(x => x.ProductId == item.ProductId); + if (index != -1) + { + GridData[index] = item; + } + } + + private void CreateProduct(GridCommandEventArgs args) + { + var item = (Product)args.Item; + item.ProductId = ++LastId; + GridData.Insert(0, item); + item.OrderDetails = GenerateOrderDetails(item); + + // Auto-expand the new item + _ = ExpandNewItem(item); + } + + private async Task ExpandNewItem(Product newItem) + { + await Task.Delay(50); // ensure grid state has updated + var state = GridRef.GetState(); + state.ExpandedItems = new List { newItem }; + await GridRef.SetStateAsync(state); + } + + private void DeleteProduct(GridCommandEventArgs args) + { + var item = (Product)args.Item; + GridData.Remove(item); + } + #endregion + + #region CRUD for Details Grid + private void UpdateOrder(Product product, GridCommandEventArgs args) + { + var item = (OrderDetails)args.Item; + var data = product.OrderDetails; + int index = data.FindIndex(x => x.OrderId == item.OrderId); + if (index != -1) + { + data[index] = item; + } + } + + private void CreateOrder(GridCommandEventArgs args, Product product) + { + var item = (OrderDetails)args.Item; + var data = product.OrderDetails; + item.OrderId = data.Count + 1; + data.Insert(0, item); + } + + private void DeleteOrder(GridCommandEventArgs args, Product product) + { + var item = (OrderDetails)args.Item; + var data = product.OrderDetails; + data.Remove(item); + } + #endregion + + private void OnProductGridStateInit(GridStateEventArgs args) + { + args.GridState.ExpandedItems = new List(); // start with nothing expanded + } + + #region Data Generation + protected override void OnInitialized() + { + GridData = GenerateProducts(); + } + + private List GenerateProducts() + { + List products = new List(); + + for (int i = 1; i <= 3; i++) + { + var product = new Product() + { + ProductId = ++LastId, + ProductName = $"Product {LastId}", + SupplierId = i, + UnitPrice = (decimal)(i * 3.14), + UnitsInStock = (short)(i * 1), + Discontinued = RandomGenerator.NextDouble() >= 0.5, + CreatedAt = GetRandomDate(StartDate) + }; + + product.OrderDetails = GenerateOrderDetails(product); + products.Add(product); + } + + return products; + } + + private List GenerateOrderDetails(Product product) + { + double minDiscount = 0.1; + double maxDiscount = 0.2; + var orderDetails = new List(); + + for (int i = 1; i <= 2; i++) + { + orderDetails.Add(new OrderDetails() + { + OrderId = Int32.Parse($"{product.ProductId}{i}"), + UnitPrice = (decimal)product.UnitPrice, + Quantity = (short)(1 + (RandomGenerator.Next() % 10)), + Discount = (float)((RandomGenerator.NextDouble() * (maxDiscount - minDiscount) + minDiscount)) * 100, + ProductId = product.ProductId, + }); + } + + return orderDetails; + } + + private DateTime GetRandomDate(DateTime startDate) + { + int range = (DateTime.Today - startDate).Days; + return startDate.AddDays(RandomGenerator.Next(range)); + } + #endregion + + #region Models + public class Product + { + public int ProductId { get; set; } + public string ProductName { get; set; } = string.Empty; + public int SupplierId { get; set; } + public decimal UnitPrice { get; set; } + public short UnitsInStock { get; set; } + public bool Discontinued { get; set; } + public DateTime CreatedAt { get; set; } + public List OrderDetails { get; set; } = new(); + + // Ensures Grid can identify which rows are expanded + public override bool Equals(object? obj) => Equals(obj as Product); + public bool Equals(Product? obj) => obj != null && obj.ProductId == ProductId; + public override int GetHashCode() => ProductId.GetHashCode(); + } + + public class OrderDetails + { + public int OrderId { get; set; } + public decimal UnitPrice { get; set; } + public short Quantity { get; set; } + public float Discount { get; set; } + public int ProductId { get; set; } + } + #endregion +} +```` + +## See Also + +* [Grid Overview](slug:grid-overview) +* [SetStateAsync Method](slug:grid-state#methods) +* [Hierarchical Grid](slug:components/grid/features/hierarchy)