From f76e722dbddecb431d96b90ef71f4df92a43d119 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Thu, 25 Jan 2024 17:47:40 +0200 Subject: [PATCH 1/3] docs(grid): Document expand persistence of hierarchy editing --- components/grid/editing/overview.md | 1 + knowledge-base/grid-edit-in-hierarchy.md | 163 ++++++++++++++++------- 2 files changed, 114 insertions(+), 50 deletions(-) diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md index 3e7ddcf8f6..720d06d274 100644 --- a/components/grid/editing/overview.md +++ b/components/grid/editing/overview.md @@ -449,6 +449,7 @@ There are a few considerations to keep in mind with the CUD operations of the gr @[template](/_contentTemplates/common/grid-treelist-editing-notes.md#grid-treelist-data-operations-while-editing) +* When editing a master row in a [hierarchy Grid]({%slug components/grid/features/hierarchy%}), the respective `DetailTemplate` will collapse unless you [override the `Equals()` method of the master data item class]({%slug grid-kb-editing-in-hierarchy%}). ## See Also diff --git a/knowledge-base/grid-edit-in-hierarchy.md b/knowledge-base/grid-edit-in-hierarchy.md index 76dd092e73..dc7f306326 100644 --- a/knowledge-base/grid-edit-in-hierarchy.md +++ b/knowledge-base/grid-edit-in-hierarchy.md @@ -10,65 +10,84 @@ res_type: kb --- ## Environment + - - - - - - + + + + + +
ProductGrid for Blazor
ProductGrid for Blazor
## Description -This article showcases how to **Create**, **Update** and **Delete** items in both the main and nested Grids in a [hierarchy]({%slug components/grid/features/hierarchy%}). +This article shows how to create, update, and delete items in the main (master) and nested (detail) Grids in a [hierarchy]({%slug components/grid/features/hierarchy%}). ## Solution -The [CRUD operations]({%slug components/grid/editing/overview%}) are independent from the Hierarchy. Each Grid has it`s own handlers. +The Grid CRUD operations are independent from the Hierarchy. Each Grid performs editing separately and has its own handlers. -The example below showcases those separate handlers and also how you can get the parent model from the nested grid handlers in case you need information from it - the `UpdateOrder`, `CreateOrder` and `DeleteOrder` handlers are getting the context in order to access the Data from the parent. If you do not need access to the main Grid you should not pass the context through a lambda function. +1. [Configure editing for the main Grid]({%slug components/grid/editing/overview%}). +1. Define a [`DetailTemplate`]({%slug components/grid/features/hierarchy%}) and configure the nested Grid inside it, including editing. +1. To persist the expanded state of a `DetailTemplate` while editing its parent item, override the `Equals()` method of the master data item class. This is supported from version **5.1.0**. -You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Incell`. By default it is `Inline`. +The example below shows the separate CUD event handlers and also how to get the parent data item in the nested Grid handlers in case you need this information. The `UpdateOrder`, `CreateOrder` and `DeleteOrder` handlers receive the `productItem` in order to access the data item from the parent Grid. If you don't need access to the main Grid data, there is no need to pass the context through a lambda function. ->caption How to do CRUD operations in hierarchy grid - get the parent item from inside the child grid +>caption Implement CRUD operations in a hierarchy Grid -```` -@* If the data in the nested models is sufficient for your operations, you do not need the lambda functions *@ +````CSHTML +@* The events in the detail Grid are defined with lambda functions, so that the handler can receive the master product object. + This approach is optional. *@ + +@* Hierarchy expand persistence during edit requires version 5.1.0 + *@ + +Grid EditMode: + + OnCreate="CreateProduct" + OnStateInit="@OnProductGridStateInit"> Add Product - - + + - - Edit + + @if (GridEditMode != GridEditMode.Incell) + { + Edit + Save + Cancel + } Delete @{ - Product product = productItem as Product; + Product product = (Product)productItem; @@ -80,12 +99,17 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc - - Edit + + @if (GridEditMode != GridEditMode.Incell) + { + Edit + Save + Cancel + } Delete @@ -95,13 +119,13 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc @code { - //CUD operations for the main Grid - #region CUD operation for the main Grid + #region CUD operations for the main Grid + private void UpdateProduct(GridCommandEventArgs args) { // perform actual data source operations here through your service - var item = args.Item as Product; + var item = (Product)args.Item; var index = GridData.FindIndex(x => x.ProductId == item.ProductId); if (index != -1) { @@ -112,9 +136,9 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc { // perform actual data source operations here through your service - var item = args.Item as Product; + var item = (Product)args.Item; - item.ProductId = GridData.Count + 1; + item.ProductId = ++LastId; GridData.Insert(0, item); item.OrderDetails = GenerateOrderDetails(item); @@ -124,19 +148,20 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc { // perform actual data source operations here through your service - var item = args.Item as Product; + var item = (Product)args.Item; GridData.Remove(item); } - #endregion - //CUD operations for the nested Grid - #region CUD operations for the nested Grid + #endregion CUD operations for the main Grid + + #region CUD operations for the detail Grid + private void UpdateOrder(Product product, GridCommandEventArgs args) { // perform actual data source operations here through your service - var item = args.Item as OrderDetails; + var item = (OrderDetails)args.Item; var data = product.OrderDetails; int index = data.FindIndex(x => x.OrderId == item.OrderId); if (index != -1) @@ -149,7 +174,7 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc { // perform actual data source operations here through your service - var item = args.Item as OrderDetails; + var item = (OrderDetails)args.Item; var data = product.OrderDetails; item.OrderId = data.Count + 1; @@ -161,19 +186,39 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc { // perform actual data source operations here through your service - var item = args.Item as OrderDetails; + var item = (OrderDetails)args.Item; var data = product.OrderDetails; data.Remove(item); } - #endregion - public List GridData { get; set; } - DateTime StartDate = new DateTime(2018, 1, 1); - static Random RandomGenerator = new Random(); + #endregion CUD operations for the detail Grid + + private List GridData { get; set; } = new(); + private DateTime StartDate = new DateTime(2018, 1, 1); + private static Random RandomGenerator = new Random(); + + #region Product Grid State + + private void OnProductGridStateInit(GridStateEventArgs args) + { + args.GridState.ExpandedItems = GridData.Where(x => x.ProductId == 1).ToList(); + } + + private GridEditMode GridEditMode { get; set; } = GridEditMode.Inline; + + private IEnumerable GridEditModes { get; set; } = new List { + GridEditMode.Incell, + GridEditMode.Inline, + GridEditMode.Popup + }; + + #endregion Product Grid State + + #region Sample Data and Models + + private int LastId { get; set; } - //Sample data and models - #region Sample data and models protected override void OnInitialized() { GridData = GenerateProducts(); @@ -183,12 +228,12 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc { List products = new List(); - for (int i = 1; i <= 100; i++) + for (int i = 1; i <= 3; i++) { var product = new Product() { - ProductId = i, - ProductName = "Product " + i.ToString(), + ProductId = ++LastId, + ProductName = $"Product {LastId}", SupplierId = i, UnitPrice = (decimal)(i * 3.14), UnitsInStock = (short)(i * 1), @@ -210,7 +255,7 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc double maxDiscount = 0.2; var orderDetails = new List(); - for (int i = 1; i <= 40; i++) + for (int i = 1; i <= 2; i++) { orderDetails.Add(new OrderDetails() { @@ -234,13 +279,26 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc public class Product { public int ProductId { get; set; } - public string ProductName { 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; } + public List OrderDetails { get; set; } = new(); + + // Persist Product expand/collapse state during editing + public override bool Equals(object? obj) => Equals(obj as Product); + + public bool Equals(Product? obj) + { + return obj != null && obj.ProductId == ProductId; + } + + public override int GetHashCode() + { + return base.GetHashCode(); + } } public class OrderDetails @@ -251,7 +309,12 @@ You can set the `EditMode` of the nesting grid to either `Popup`, `Inline`, `Inc public float Discount { get; set; } public int ProductId { get; set; } } - #endregion + + #endregion Sample Data and Models } ```` +## See Also + +* [Grid Editing]({%slug components/grid/editing/overview%}) +* [Grid Hierarchy]({%slug components/grid/features/hierarchy%}) From e81a7fb0593416756e14a6243b09ea4f713406c5 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 26 Jan 2024 14:22:20 +0200 Subject: [PATCH 2/3] Update knowledge-base/grid-edit-in-hierarchy.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-edit-in-hierarchy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-edit-in-hierarchy.md b/knowledge-base/grid-edit-in-hierarchy.md index dc7f306326..a531029b77 100644 --- a/knowledge-base/grid-edit-in-hierarchy.md +++ b/knowledge-base/grid-edit-in-hierarchy.md @@ -27,7 +27,7 @@ This article shows how to create, update, and delete items in the main (master) ## Solution -The Grid CRUD operations are independent from the Hierarchy. Each Grid performs editing separately and has its own handlers. +The Grid CRUD operations are independent of the hierarchy. Each Grid performs editing separately and has its own handlers. 1. [Configure editing for the main Grid]({%slug components/grid/editing/overview%}). 1. Define a [`DetailTemplate`]({%slug components/grid/features/hierarchy%}) and configure the nested Grid inside it, including editing. From 289e0a2fce0f0be38a6779681bc35fc09a6260d5 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 26 Jan 2024 14:22:35 +0200 Subject: [PATCH 3/3] Update knowledge-base/grid-edit-in-hierarchy.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- knowledge-base/grid-edit-in-hierarchy.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-edit-in-hierarchy.md b/knowledge-base/grid-edit-in-hierarchy.md index a531029b77..c0e3194c11 100644 --- a/knowledge-base/grid-edit-in-hierarchy.md +++ b/knowledge-base/grid-edit-in-hierarchy.md @@ -33,7 +33,7 @@ The Grid CRUD operations are independent of the hierarchy. Each Grid performs ed 1. Define a [`DetailTemplate`]({%slug components/grid/features/hierarchy%}) and configure the nested Grid inside it, including editing. 1. To persist the expanded state of a `DetailTemplate` while editing its parent item, override the `Equals()` method of the master data item class. This is supported from version **5.1.0**. -The example below shows the separate CUD event handlers and also how to get the parent data item in the nested Grid handlers in case you need this information. The `UpdateOrder`, `CreateOrder` and `DeleteOrder` handlers receive the `productItem` in order to access the data item from the parent Grid. If you don't need access to the main Grid data, there is no need to pass the context through a lambda function. +The example below shows the separate CUD event handlers and also how to get the parent data item in the nested Grid handlers. The `UpdateOrder`, `CreateOrder`, and `DeleteOrder` handlers receive the `productItem` in order to access the data item from the parent Grid. If you don't need access to the main Grid's data, don't pass the context through a lambda function. >caption Implement CRUD operations in a hierarchy Grid