From 7f2360f8ebfe7cb89a00af77647bf712020d2bb8 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 27 Apr 2020 16:35:08 +0300 Subject: [PATCH 1/7] knowledge-base(grid): Row Selection in Edit Mode --- .../grid-select-items-programmatically.md | 130 ++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 knowledge-base/grid-select-items-programmatically.md diff --git a/knowledge-base/grid-select-items-programmatically.md b/knowledge-base/grid-select-items-programmatically.md new file mode 100644 index 0000000000..95e95f205d --- /dev/null +++ b/knowledge-base/grid-select-items-programmatically.md @@ -0,0 +1,130 @@ +--- +title: Row Selection in Edit +description: How to Select a row in Edit +type: how-to +page_title: Row selection in Edit +slug: grid-kb-row-selection-in-edit +position: +tags: +res_type: kb +--- + +## Environment + + + + + + + +
ProductGrid for Blazor
+ +## Description + +This article showcases how to programmatically [select]({%slug components/grid/selection/overview%}) a row which is edited in [InCell]({%slug components/grid/editing/incell%}) Editing Mode. + + +## Solution + +Use the `OnEdit` and `OnUpdate` [Grid events](%slug grid-events%#cud-events). In the handler for the `OnEdit` event add the currently edited item, passed to the method through the object of type `GridCommandEventArgs`, into the SelectedItems collection. The item added to the collection is with the old value, before the editing. +In the handler for the `OnUpdate` update the SelectedItems collection with the new value of the edited item. + +>caption How to Select a row in Edit + +````CSHTML +@* You can create your own extension method to add an item into IEnumerable collection without the usage of a mediator one. *@ + + + + + + + + + + + + +@if (SelectedItems.Any()) +{ + +} + + +@code { + public void EditHandler(GridCommandEventArgs args) + { + var item = args.Item as Product; + var foundItem = SelectedItems.Where(x => x.ProductId == item.ProductId).FirstOrDefault(); + + if (foundItem == null) + { + var selItemsList = SelectedItems.ToList(); + selItemsList.Add(item); + SelectedItems = new List(selItemsList); + StateHasChanged(); + } + } + + public void UpdateItem(GridCommandEventArgs args) + { + var item = args.Item as Product; + int index = GridData.FindIndex(x => item.ProductId == x.ProductId); + var currentSelectedItems = new List(SelectedItems); + int selectedItemIndex = currentSelectedItems.FindIndex(x => x.ProductId == item.ProductId); + + if (index != -1) + { + GridData[index] = item; + currentSelectedItems[selectedItemIndex] = item; + SelectedItems = currentSelectedItems; + } + } + + public List GridData { get; set; } + public IEnumerable SelectedItems { get; set; } = new List(); + protected override void OnInitialized() + { + GridData = GenerateProducts(); + } + + private List GenerateProducts() + { + List products = new List(); + + for (int i = 1; i <= 100; i++) + { + var product = new Product() + { + ProductId = i, + ProductName = "Product " + i.ToString(), + SupplierId = i, + UnitPrice = (decimal)(i * 3.14), + UnitsInStock = (short)(i * 1), + }; + products.Add(product); + } + return products; + } + + public class Product + { + public int ProductId { get; set; } + public string ProductName { get; set; } + public int SupplierId { get; set; } + public decimal UnitPrice { get; set; } + public short UnitsInStock { get; set; } + } +} +```` From 10237101de38b2c4fdc474fae4c2edc2d08cd061 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 27 Apr 2020 16:37:01 +0300 Subject: [PATCH 2/7] knowledge-base(grid): Minor changes to article --- knowledge-base/grid-select-items-programmatically.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-select-items-programmatically.md b/knowledge-base/grid-select-items-programmatically.md index 95e95f205d..27fcdf6934 100644 --- a/knowledge-base/grid-select-items-programmatically.md +++ b/knowledge-base/grid-select-items-programmatically.md @@ -27,7 +27,7 @@ This article showcases how to programmatically [select]({%slug components/grid/s ## Solution Use the `OnEdit` and `OnUpdate` [Grid events](%slug grid-events%#cud-events). In the handler for the `OnEdit` event add the currently edited item, passed to the method through the object of type `GridCommandEventArgs`, into the SelectedItems collection. The item added to the collection is with the old value, before the editing. -In the handler for the `OnUpdate` update the SelectedItems collection with the new value of the edited item. +In the handler for the `OnUpdate` update the SelectedItems collection with the new value of the edited item otherwise the visual representation of the row selection will not be present. >caption How to Select a row in Edit From 048208968b7b4ae35230b5de5f21e9eac0bdb1cc Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Mon, 27 Apr 2020 17:04:10 +0300 Subject: [PATCH 3/7] chore(kb): fix grid select on incell edit kb --- ...cally.md => grid-select-on-incell-edit.md} | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) rename knowledge-base/{grid-select-items-programmatically.md => grid-select-on-incell-edit.md} (70%) diff --git a/knowledge-base/grid-select-items-programmatically.md b/knowledge-base/grid-select-on-incell-edit.md similarity index 70% rename from knowledge-base/grid-select-items-programmatically.md rename to knowledge-base/grid-select-on-incell-edit.md index 27fcdf6934..e37958e016 100644 --- a/knowledge-base/grid-select-items-programmatically.md +++ b/knowledge-base/grid-select-on-incell-edit.md @@ -1,9 +1,9 @@ --- -title: Row Selection in Edit -description: How to Select a row in Edit +title: Row Selection in Edit with InCell EditMode +description: How to Select a row that is being edited in InCell editing mode type: how-to -page_title: Row selection in Edit -slug: grid-kb-row-selection-in-edit +page_title: Row Selection in Edit with InCell EditMode +slug: grid-kb-row-select-incell-edit position: tags: res_type: kb @@ -21,15 +21,19 @@ res_type: kb ## Description -This article showcases how to programmatically [select]({%slug components/grid/selection/overview%}) a row which is edited in [InCell]({%slug components/grid/editing/incell%}) Editing Mode. +When using the [InCell]({%slug components/grid/editing/incell%}) Editing Mode, I want the row that is currently edited to be selected. I want the user to get the current row selected when they edit it. + + By default, the click action opens a cell for editing and does not select a row to avoid an ambiguous action, and so rows can only be selected with the dedicated grid selection column. ## Solution -Use the `OnEdit` and `OnUpdate` [Grid events](%slug grid-events%#cud-events). In the handler for the `OnEdit` event add the currently edited item, passed to the method through the object of type `GridCommandEventArgs`, into the SelectedItems collection. The item added to the collection is with the old value, before the editing. -In the handler for the `OnUpdate` update the SelectedItems collection with the new value of the edited item otherwise the visual representation of the row selection will not be present. +Use the `OnEdit` and `OnUpdate` [Grid events]({%slug grid-events%}#cud-events): +* In the handler for the `OnEdit` event add the currently edited item, passed to the method through the object of type `GridCommandEventArgs`, into the `SelectedItems` collection. + * The item added to the collection is with the old value, before the editing. +* In the handler for the `OnUpdate` event, update the `SelectedItems` collection with the new value of the edited item to ensure data integrity. ->caption How to Select a row in Edit +>caption How to Select the row that is being edited in InCell edit mode ````CSHTML @* You can create your own extension method to add an item into IEnumerable collection without the usage of a mediator one. *@ @@ -70,10 +74,10 @@ In the handler for the `OnUpdate` update the SelectedItems collection with the n if (foundItem == null) { + // add the currently edited row to the selected items var selItemsList = SelectedItems.ToList(); selItemsList.Add(item); SelectedItems = new List(selItemsList); - StateHasChanged(); } } @@ -86,14 +90,18 @@ In the handler for the `OnUpdate` update the SelectedItems collection with the n if (index != -1) { - GridData[index] = item; + // update the selected items collection currentSelectedItems[selectedItemIndex] = item; SelectedItems = currentSelectedItems; + + // The actual Update operation for the view-model data. Add your actual data source operations here + GridData[index] = item; } } public List GridData { get; set; } public IEnumerable SelectedItems { get; set; } = new List(); + protected override void OnInitialized() { GridData = GenerateProducts(); From b5cd5d0a430256bbdf2a86c682af68244d39b4d4 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 27 Apr 2020 18:12:26 +0300 Subject: [PATCH 4/7] chore(docs): Updated Grid Selection Overview article --- components/grid/selection/overview.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/grid/selection/overview.md b/components/grid/selection/overview.md index ba8c5713a9..76637e74b0 100644 --- a/components/grid/selection/overview.md +++ b/components/grid/selection/overview.md @@ -95,6 +95,8 @@ See how the row selection modes work In the [Incell EditMode]({%slug components/grid/editing/incell%}) selection can be applied only via a checkbox column (``). This is required due to the overlapping action that triggers selection and InCell editing (clicking in the row) - if row click selection was enabled with InCell editing, each attempt to select a row would put a cell in edit mode; and each attempt to edit a cell would select a new row. Such user experience is confusing, and so selection will only work through the row selection checkbox. +How to select the row that is being edited in InCell edit mode without using `` you can read in the [Row Selection in Edit with InCell EditMode]({%slug grid-kb-row-select-incell-edit%}) Knowledge Base article. + #### Inline and PopUp Edit Modes In [Inline EditMode]({%slug components/grid/editing/inline%}) and [PopUp EditMode]({%slug components/grid/editing/popup%}) selection can be done by clicking on the desired row or by using a `< GridCheckboxColumn />`. From 8fd844c612e63658d10b19cf71da6aa2b4619061 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 27 Apr 2020 18:14:59 +0300 Subject: [PATCH 5/7] chore(docs): updated grid incell editing article --- components/grid/editing/incell.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md index d8d154cc34..d3b0f44c2c 100644 --- a/components/grid/editing/incell.md +++ b/components/grid/editing/incell.md @@ -137,6 +137,7 @@ Click a cell, edit it and click outside of the cell to see the change.
## Notes * When the InCell Edit Mode is enabled and you want to enable item selection a `` must be added to the `` collection. More information on that can be read in the [Selection]({%slug components/grid/selection/overview%}#notes) article. + * How to select the row that is being edited in InCell edit mode without using `` you can read in the [Row Selection in Edit with InCell EditMode]({%slug grid-kb-row-select-incell-edit%}) Knowledge Base article. * It is up to the data access logic to save the data once it is changed in the data collection. The example above showcases when that happens and adds some code to provide a visual indication of the change. In a real application, the code for handling data updates may be entirely different. ## See Also From 3cb73b0e21af41ccca9ba1a35327beb308de2f4b Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Mon, 27 Apr 2020 18:16:49 +0300 Subject: [PATCH 6/7] chore(docs): fixed typo in Grid Editing Overview article --- components/grid/editing/overview.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md index fa9ff0e31f..eb26c31ccf 100644 --- a/components/grid/editing/overview.md +++ b/components/grid/editing/overview.md @@ -45,7 +45,7 @@ You can initiate editing or inserting of an item from anywhere on the page (butt The example below shows how you can handle the events the grid exposes, so you can Create, Update or Delete records in your data source and the view model. ->tip The grid events use `EventCallback` and can be syncrhonous or asynchronous. The example below shows async versions, and the signature for synchronous events is `void (GridCommandEventArgs args)`. +>tip The grid events use `EventCallback` and can be synchronous or asynchronous. The example below shows async versions, and the signature for synchronous events is `void (GridCommandEventArgs args)`. >caption Handling the CRUD events of the grid to save data to the actual data source @@ -201,4 +201,3 @@ There are a few considerations to keep in mind with the CUD operations of the gr * [Live Demo: Grid Custom Editor Template](https://demos.telerik.com/blazor-ui/grid/custom-editor) * [Live Demo: Grid Custom Edit Form](https://demos.telerik.com/blazor-ui/grid/editing-custom-form) * [Batch Editing Example](https://github.com/telerik/blazor-ui/tree/master/grid/batch-editing) - From c10f82c2ce3b86041545504361fe6d28d027b074 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Mon, 27 Apr 2020 18:23:40 +0300 Subject: [PATCH 7/7] chore(grid): fix wording --- components/grid/editing/incell.md | 4 +++- components/grid/selection/overview.md | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md index d3b0f44c2c..9f0ccbdc38 100644 --- a/components/grid/editing/incell.md +++ b/components/grid/editing/incell.md @@ -137,7 +137,9 @@ Click a cell, edit it and click outside of the cell to see the change.
## Notes * When the InCell Edit Mode is enabled and you want to enable item selection a `` must be added to the `` collection. More information on that can be read in the [Selection]({%slug components/grid/selection/overview%}#notes) article. - * How to select the row that is being edited in InCell edit mode without using `` you can read in the [Row Selection in Edit with InCell EditMode]({%slug grid-kb-row-select-incell-edit%}) Knowledge Base article. + + * To see how to select the row that is being edited in InCell edit mode without using a `` check out the [Row Selection in Edit with InCell EditMode]({%slug grid-kb-row-select-incell-edit%}) Knowledge Base article. + * It is up to the data access logic to save the data once it is changed in the data collection. The example above showcases when that happens and adds some code to provide a visual indication of the change. In a real application, the code for handling data updates may be entirely different. ## See Also diff --git a/components/grid/selection/overview.md b/components/grid/selection/overview.md index 76637e74b0..0f8cf25486 100644 --- a/components/grid/selection/overview.md +++ b/components/grid/selection/overview.md @@ -95,7 +95,7 @@ See how the row selection modes work In the [Incell EditMode]({%slug components/grid/editing/incell%}) selection can be applied only via a checkbox column (``). This is required due to the overlapping action that triggers selection and InCell editing (clicking in the row) - if row click selection was enabled with InCell editing, each attempt to select a row would put a cell in edit mode; and each attempt to edit a cell would select a new row. Such user experience is confusing, and so selection will only work through the row selection checkbox. -How to select the row that is being edited in InCell edit mode without using `` you can read in the [Row Selection in Edit with InCell EditMode]({%slug grid-kb-row-select-incell-edit%}) Knowledge Base article. +To see how to select the row that is being edited in InCell edit mode without using a `` check out the [Row Selection in Edit with InCell EditMode]({%slug grid-kb-row-select-incell-edit%}) Knowledge Base article. #### Inline and PopUp Edit Modes