diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md index d8d154cc34..9f0ccbdc38 100644 --- a/components/grid/editing/incell.md +++ b/components/grid/editing/incell.md @@ -137,6 +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. + + * 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/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) - diff --git a/components/grid/selection/overview.md b/components/grid/selection/overview.md index ba8c5713a9..0f8cf25486 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. +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 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 />`. diff --git a/knowledge-base/grid-select-on-incell-edit.md b/knowledge-base/grid-select-on-incell-edit.md new file mode 100644 index 0000000000..e37958e016 --- /dev/null +++ b/knowledge-base/grid-select-on-incell-edit.md @@ -0,0 +1,138 @@ +--- +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 with InCell EditMode +slug: grid-kb-row-select-incell-edit +position: +tags: +res_type: kb +--- + +## Environment + + + + + + + +
ProductGrid for Blazor
+ +## Description + +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` event, update the `SelectedItems` collection with the new value of the edited item to ensure data integrity. + +>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. *@ + + + + + + + + + + + + +@if (SelectedItems.Any()) +{ +
    + @foreach (Product item in SelectedItems) + { +
  • @item.ProductName
    • + } +
+} + + +@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) + { + // add the currently edited row to the selected items + var selItemsList = SelectedItems.ToList(); + selItemsList.Add(item); + SelectedItems = new List(selItemsList); + } + } + + 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) + { + // 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(); + } + + 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; } + } +} +````