From 5b4b8f5d87db2fc76abc34b30e1925b12bfe9077 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 31 Jan 2025 14:58:05 +0200
Subject: [PATCH 01/33] docs(Grid): Revamp Editing articles
---
components/grid/editing/incell.md | 277 +++++++++++++++++++---------
components/grid/editing/inline.md | 290 +++++++++++++++++++----------
components/grid/editing/popup.md | 296 ++++++++++++++++++++----------
3 files changed, 585 insertions(+), 278 deletions(-)
diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md
index 1bc7ed992..0db71d60b 100644
--- a/components/grid/editing/incell.md
+++ b/components/grid/editing/incell.md
@@ -38,152 +38,249 @@ It is up to the data access logic to save the data once it is changed in the dat
>caption Incell Editing Example. See the code comments for details.
````RAZOR
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
-
-Click a cell, edit it and click outside of the grid to see the change. You can also use Tab, Shift+Tab and Enter to navigate between the cells.
-
-Editing is prevented for the first two items.
-
-
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+
The example below shows how to:
+
+
+
Render command buttons conditionally.
+
Refresh the Grid after editing by reloading the data from the remote datasource.
+
Refresh the Grid after editing by applying the user changes to the local data collection.
+
Confirm Delete commands with a built-in Grid dialog. You can also intercept Delete commands with a separate Dialog or a custom popup.
+
Cancel the OnAdd and OnEdit events conditionally, so that the Grid does not go into edit mode.
+
+
+
- Add Employee
+ Add Item
+
+
+
+
-
-
-
-
- Delete
+
+
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+ @if (dataItem.Discontinued)
+ {
+ Delete
+ }
@code {
- void EditHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
-
- // prevent opening for edit based on condition
- if (item.ID < 3)
- {
- args.IsCancelled = true;// the general approach for cancelling an event
- }
+ private List GridData { get; set; } = new();
- Console.WriteLine("Edit event is fired.");
- }
+ private ProductService GridProductService { get; set; } = new();
- async Task UpdateHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
+ [CascadingParameter]
+ public DialogFactory? TelerikDialogs { get; set; }
- // perform actual data source operations here through your service
- await MyService.Update(item);
+ private bool GridConfirmDelete { get; set; } = true;
+ private bool ShouldCancelOnAddEdit { get; set; }
+ private bool ShouldConfirmOnCancel { get; set; } = true;
- // update the local view-model data with the service data
- await GetGridData();
+ private string AddEditButtonThemeColor => ShouldCancelOnAddEdit ? ThemeConstants.Button.ThemeColor.Error : ThemeConstants.Button.ThemeColor.Base;
+ private string DeleteButtonThemeColor => GridConfirmDelete ? ThemeConstants.Button.ThemeColor.Base : ThemeConstants.Button.ThemeColor.Warning;
+ private string CancelButtonThemeColor => ShouldConfirmOnCancel ? ThemeConstants.Button.ThemeColor.Base : ThemeConstants.Button.ThemeColor.Warning;
- Console.WriteLine("Update event is fired.");
+ private void OnGridAdd(GridCommandEventArgs args)
+ {
+ if (ShouldCancelOnAddEdit)
+ {
+ args.IsCancelled = true;
+ return;
+ }
}
- async Task DeleteHandler(GridCommandEventArgs args)
+ private async Task OnGridCancel(GridCommandEventArgs args)
{
- SampleData item = (SampleData)args.Item;
-
- // perform actual data source operation here through your service
- await MyService.Delete(item);
-
- // update the local view-model data with the service data
- await GetGridData();
+ if (ShouldConfirmOnCancel)
+ {
+ bool shouldContinue = await TelerikDialogs!.ConfirmAsync("Do you want to discard your changes?");
- Console.WriteLine("Delete event is fired.");
+ if (!shouldContinue)
+ {
+ args.IsCancelled = true;
+ }
+ }
}
- async Task CreateHandler(GridCommandEventArgs args)
+ private async Task OnGridCreate(GridCommandEventArgs args)
{
- SampleData item = (SampleData)args.Item;
-
- // perform actual data source operation here through your service
- await MyService.Create(item);
+ var createdItem = (Product)args.Item;
- // update the local view-model data with the service data
- await GetGridData();
+ // Create the item in the database.
+ int newId = await GridProductService.Create(createdItem);
- Console.WriteLine("Create event is fired.");
+ // Reload the data from the database.
+ GridData = await GridProductService.Read();
+ // OR
+ // Create the item in the local data too.
+ //createdItem.Id = newId;
+ //GridData.Insert(0, createdItem);
}
- void OnCancelHandler(GridCommandEventArgs args)
+ private async Task OnGridDelete(GridCommandEventArgs args)
{
- SampleData item = (SampleData)args.Item;
- Console.WriteLine("Cancel event is fired. Can be useful when people decide to not satisfy validation");
- }
+ var deletedItem = (Product)args.Item;
+ // Delete the item in the database.
+ await GridProductService.Delete(deletedItem);
- // in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
- public class SampleData
- {
- public int ID { get; set; }
- [Required]
- public string FirstName { get; set; }
- public string LastName { get; set; }
+ // Reload the data from the database.
+ GridData = await GridProductService.Read();
+ // OR
+ // Delete the item in the local data too.
+ //GridData.Remove(deletedItem);
}
- public List MyData { get; set; }
+ private void OnGridEdit(GridCommandEventArgs args)
+ {
+ if (ShouldCancelOnAddEdit)
+ {
+ args.IsCancelled = true;
+ return;
+ }
+ }
- async Task GetGridData()
+ private async Task OnGridUpdate(GridCommandEventArgs args)
{
- MyData = await MyService.Read();
+ var updatedItem = (Product)args.Item;
+
+ // Update the item in the database.
+ bool success = await GridProductService.Update(updatedItem);
+
+ // Reload the data from the database.
+ GridData = await GridProductService.Read();
+ // OR
+ // Update the item in the local data too.
+ //int originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
+ //if (originalItemIndex != -1)
+ //{
+ // GridData[originalItemIndex] = updatedItem;
+ //}
}
protected override async Task OnInitializedAsync()
{
- await GetGridData();
+ GridData = await GridProductService.Read();
}
- // the following static class mimics an actual data service that handles the actual data source
- // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
- public static class MyService
+ public class ProductService
{
- private static List _data { get; set; } = new List();
+ private List Items { get; set; }
- public static async Task Create(SampleData itemToInsert)
+ private int LastId { get; set; }
+
+ public async Task Create(Product product)
{
- itemToInsert.ID = _data.Count + 1;
- _data.Insert(0, itemToInsert);
+ // Simulate async operation.
+ await Task.Delay(100);
+
+ product.Id = ++LastId;
+
+ Items.Insert(0, product);
+
+ return LastId;
}
- public static async Task> Read()
+ public async Task Delete(Product product)
{
- if (_data.Count < 1)
+ // Simulate async operation.
+ await Task.Delay(100);
+
+ if (Items.Contains(product))
{
- for (int i = 1; i < 50; i++)
- {
- _data.Add(new SampleData()
- {
- ID = i,
- FirstName = "Name " + i.ToString(),
- LastName = "Last Name " + i.ToString()
- });
- }
+ Items.Remove(product);
+
+ return true;
}
- return await Task.FromResult(_data);
+ return false;
+ }
+
+ public async Task> Read()
+ {
+ // Simulate async operation.
+ await Task.Delay(100);
+
+ return Items;
+ }
+
+ public async Task Read(DataSourceRequest request)
+ {
+ return await Items.ToDataSourceResultAsync(request);
}
- public static async Task Update(SampleData itemToUpdate)
+ public async Task Update(Product product)
{
- var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
- if (index != -1)
+ // Simulate async operation.
+ await Task.Delay(100);
+
+ int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);
+
+ if (originalItemIndex != -1)
{
- _data[index] = itemToUpdate;
+ Items[originalItemIndex] = product;
+ return true;
}
+
+ return false;
}
- public static async Task Delete(SampleData itemToDelete)
+ public ProductService()
{
- _data.Remove(itemToDelete);
+ Items = new();
+
+ for (int i = 1; i <= 15; i++)
+ {
+ Items.Add(new Product()
+ {
+ Id = ++LastId,
+ Name = $"Product {LastId}",
+ Description = $"Multi-line\ndescription {LastId}",
+ Price = LastId % 2 == 0 ? null : Random.Shared.Next(0, 100) * 1.23m,
+ Quantity = LastId % 2 == 0 ? 0 : Random.Shared.Next(0, 3000),
+ ReleaseDate = DateTime.Today.AddDays(-Random.Shared.Next(365, 3650)),
+ Discontinued = LastId % 2 == 0
+ });
+ }
+
}
}
+
+ public class Product
+ {
+ public int Id { get; set; }
+ [Required]
+ public string Name { get; set; } = string.Empty;
+ public string Description { get; set; } = string.Empty;
+ public decimal? Price { get; set; }
+ public int Quantity { get; set; }
+ [Required]
+ public DateTime? ReleaseDate { get; set; }
+ public bool Discontinued { get; set; }
+ }
}
````
diff --git a/components/grid/editing/inline.md b/components/grid/editing/inline.md
index 1edc97287..bd5f868d2 100644
--- a/components/grid/editing/inline.md
+++ b/components/grid/editing/inline.md
@@ -20,159 +20,265 @@ You can also cancel the events by setting the `IsCancelled` property of the even
To enable Inline editing in the grid, set its `EditMode` property to `Telerik.Blazor.GridEditMode.Inline`, then handle the CRUD events as shown in the example below.
-
>caption The Command buttons and the grid events let you handle data operations in Inline edit mode (see the code comments for details)
````RAZOR
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
-
-Use the command buttons to control the CUD operations.
-
-Editing is cancelled for the first two records.
-
-
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+
The example below shows how to:
+
+
+
Render command buttons conditionally.
+
Refresh the Grid after editing by reloading the data from the remote datasource.
+
Refresh the Grid after editing by applying the user changes to the local data collection.
+
Cancel the OnCancel event conditionally, so that the Grid remains in edit mode. Similar behavior can be achieved by cancelling OnCreate and OnUpdate.
+
Confirm Delete commands with a built-in Grid dialog. You can also intercept Delete commands with a separate Dialog or a custom popup.
+
Cancel the OnAdd and OnEdit events conditionally, so that the Grid does not go into edit mode.
+
+
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+ Edit
+ @if (dataItem.Discontinued)
+ {
+ Delete
+ }
@code {
- private void EditHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
-
- // prevent opening for edit based on condition
- if (item.ID == 8)
- {
- args.IsCancelled = true;// the general approach for cancelling an event
- }
+ private List GridData { get; set; } = new();
- Console.WriteLine("Edit event is fired.");
- }
+ private ProductService GridProductService { get; set; } = new();
- private async Task UpdateHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
+ [CascadingParameter]
+ public DialogFactory? TelerikDialogs { get; set; }
- // perform actual data source operations here through your service
- await MyService.Update(item);
+ private bool GridConfirmDelete { get; set; } = true;
+ private bool ShouldCancelOnAddEdit { get; set; }
+ private bool ShouldConfirmOnCancel { get; set; } = true;
- // update the local view-model data with the service data
- await GetGridData();
+ private string AddEditButtonThemeColor => ShouldCancelOnAddEdit ? ThemeConstants.Button.ThemeColor.Error : ThemeConstants.Button.ThemeColor.Base;
+ private string DeleteButtonThemeColor => GridConfirmDelete ? ThemeConstants.Button.ThemeColor.Base : ThemeConstants.Button.ThemeColor.Warning;
+ private string CancelButtonThemeColor => ShouldConfirmOnCancel ? ThemeConstants.Button.ThemeColor.Base : ThemeConstants.Button.ThemeColor.Warning;
- Console.WriteLine("Update event is fired.");
+ private void OnGridAdd(GridCommandEventArgs args)
+ {
+ if (ShouldCancelOnAddEdit)
+ {
+ args.IsCancelled = true;
+ return;
+ }
}
- private async Task DeleteHandler(GridCommandEventArgs args)
+ private async Task OnGridCancel(GridCommandEventArgs args)
{
- SampleData item = (SampleData)args.Item;
-
- // perform actual data source operation here through your service
- await MyService.Delete(item);
-
- // update the local view-model data with the service data
- await GetGridData();
+ if (ShouldConfirmOnCancel)
+ {
+ bool shouldContinue = await TelerikDialogs!.ConfirmAsync("Do you want to discard your changes?");
- Console.WriteLine("Delete event is fired.");
+ if (!shouldContinue)
+ {
+ args.IsCancelled = true;
+ }
+ }
}
- private async Task CreateHandler(GridCommandEventArgs args)
+ private async Task OnGridCreate(GridCommandEventArgs args)
{
- SampleData item = (SampleData)args.Item;
+ var createdItem = (Product)args.Item;
- // perform actual data source operation here through your service
- await MyService.Create(item);
+ // Create the item in the database.
+ int newId = await GridProductService.Create(createdItem);
- // update the local view-model data with the service data
- await GetGridData();
-
- Console.WriteLine("Create event is fired.");
+ // Reload the data from the database.
+ GridData = await GridProductService.Read();
+ // OR
+ // Create the item in the local data too.
+ //createdItem.Id = newId;
+ //GridData.Insert(0, createdItem);
}
- private async Task CancelHandler(GridCommandEventArgs args)
+ private async Task OnGridDelete(GridCommandEventArgs args)
{
- SampleData item = (SampleData)args.Item;
+ var deletedItem = (Product)args.Item;
- // if necessary, perform actual data source operation here through your service
+ // Delete the item in the database.
+ await GridProductService.Delete(deletedItem);
- Console.WriteLine("Cancel event is fired.");
+ // Reload the data from the database.
+ GridData = await GridProductService.Read();
+ // OR
+ // Delete the item in the local data too.
+ //GridData.Remove(deletedItem);
}
- // in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
- public class SampleData
+ private void OnGridEdit(GridCommandEventArgs args)
{
- public int ID { get; set; }
-
- [Required]
- public string FirstName { get; set; }
-
- [Required]
- public string MiddleName { get; set; }
-
- [Required]
- public string LastName { get; set; }
+ if (ShouldCancelOnAddEdit)
+ {
+ args.IsCancelled = true;
+ return;
+ }
}
- public List MyData { get; set; }
-
- private async Task GetGridData()
+ private async Task OnGridUpdate(GridCommandEventArgs args)
{
- MyData = await MyService.Read();
+ var updatedItem = (Product)args.Item;
+
+ // Update the item in the database.
+ bool success = await GridProductService.Update(updatedItem);
+
+ // Reload the data from the database.
+ GridData = await GridProductService.Read();
+ // OR
+ // Update the item in the local data too.
+ //int originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
+ //if (originalItemIndex != -1)
+ //{
+ // GridData[originalItemIndex] = updatedItem;
+ //}
}
protected override async Task OnInitializedAsync()
{
- await GetGridData();
+ GridData = await GridProductService.Read();
}
- // the following static class mimics an actual data service that handles the actual data source
- // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
- public static class MyService
+ public class ProductService
{
- private static List _data { get; set; } = new List();
+ private List Items { get; set; }
- public static async Task Create(SampleData itemToInsert)
+ private int LastId { get; set; }
+
+ public async Task Create(Product product)
{
- itemToInsert.ID = _data.Count + 1;
- _data.Insert(0, itemToInsert);
+ // Simulate async operation.
+ await Task.Delay(100);
+
+ product.Id = ++LastId;
+
+ Items.Insert(0, product);
+
+ return LastId;
}
- public static async Task> Read()
+ public async Task Delete(Product product)
{
- if (_data.Count < 1)
+ // Simulate async operation.
+ await Task.Delay(100);
+
+ if (Items.Contains(product))
{
- for (int i = 1; i < 50; i++)
- {
- _data.Add(new SampleData()
- {
- ID = i,
- FirstName = "First " + i.ToString(),
- MiddleName = "Middle " + i.ToString(),
- LastName = "Last " + i.ToString(),
- });
- }
+ Items.Remove(product);
+
+ return true;
}
- return await Task.FromResult(_data);
+ return false;
+ }
+
+ public async Task> Read()
+ {
+ // Simulate async operation.
+ await Task.Delay(100);
+
+ return Items;
+ }
+
+ public async Task Read(DataSourceRequest request)
+ {
+ return await Items.ToDataSourceResultAsync(request);
}
- public static async Task Update(SampleData itemToUpdate)
+ public async Task Update(Product product)
{
- var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
- if (index != -1)
+ // Simulate async operation.
+ await Task.Delay(100);
+
+ int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);
+
+ if (originalItemIndex != -1)
{
- _data[index] = itemToUpdate;
+ Items[originalItemIndex] = product;
+ return true;
}
+
+ return false;
}
- public static async Task Delete(SampleData itemToDelete)
+ public ProductService()
{
- _data.Remove(itemToDelete);
+ Items = new();
+
+ for (int i = 1; i <= 15; i++)
+ {
+ Items.Add(new Product()
+ {
+ Id = ++LastId,
+ Name = $"Product {LastId}",
+ Description = $"Multi-line\ndescription {LastId}",
+ Price = LastId % 2 == 0 ? null : Random.Shared.Next(0, 100) * 1.23m,
+ Quantity = LastId % 2 == 0 ? 0 : Random.Shared.Next(0, 3000),
+ ReleaseDate = DateTime.Today.AddDays(-Random.Shared.Next(365, 3650)),
+ Discontinued = LastId % 2 == 0
+ });
+ }
+
}
}
+
+ public class Product
+ {
+ public int Id { get; set; }
+ [Required]
+ public string Name { get; set; } = string.Empty;
+ public string Description { get; set; } = string.Empty;
+ public decimal? Price { get; set; }
+ public int Quantity { get; set; }
+ [Required]
+ public DateTime? ReleaseDate { get; set; }
+ public bool Discontinued { get; set; }
+ }
}
````
From 987284d79267500e3426cde0095339e17ba82efd Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 11 Feb 2025 16:31:02 +0200
Subject: [PATCH 02/33] continued
---
components/grid/editing/incell.md | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md
index 0db71d60b..7b946b914 100644
--- a/components/grid/editing/incell.md
+++ b/components/grid/editing/incell.md
@@ -332,6 +332,19 @@ The incell editor template requires a focusable element to maintain the tab orde
````
+## Examples
+
+The following two examples show Grid in-cell editing in action:
+
+* A basic example that includes only the minimum required setup.
+* A more comprehensive example that includes additional event handlers, custom logic, and a simulated data service.
+
+
+### Basic InCell Editing Example
+
+### Comprehensive InCell Editing Example
+
+
## See Also
* [Live Demo: Grid InCell Editing](https://demos.telerik.com/blazor-ui/grid/editing-incell)
From 84a8603d68bcb01ce94e74849971fc010e4757ee Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Sat, 15 Feb 2025 10:15:53 +0200
Subject: [PATCH 03/33] Revamp continued
---
components/grid/editing/overview.md | 412 ++++-----------------
knowledge-base/grid-checkbox-editing.md | 1 +
knowledge-base/grid-edit-all-rows-cells.md | 196 ++++++++++
3 files changed, 268 insertions(+), 341 deletions(-)
create mode 100644 knowledge-base/grid-edit-all-rows-cells.md
diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md
index f89360847..632ac6d05 100644
--- a/components/grid/editing/overview.md
+++ b/components/grid/editing/overview.md
@@ -3,33 +3,72 @@ title: Overview
page_title: Grid - CRUD Overview
description: CRUD basics for the Grid for Blazor.
slug: components/grid/editing/overview
-tags: telerik,blazor,grid,editing,overview
+tags: telerik, blazor, grid, editing
published: True
position: 0
---
# Blazor Grid CRUD Operations
-The Blazor Grid supports CRUD operations and validation. Use the CRUD events to transfer the changes to the underlying data source (for example, call a service to update the database, and not only with the view data).
+The Telerik Grid for Blazor supports create, update, and delete operations (CRUD). The component can also validate the user input. Use the CRUD events to transfer the changes to the underlying data source (for example, call a service to update the database, and not only with the view data).
-This page explains how to enable editing, use the relevant events and command buttons. There is also a runnable code example.
+This page explains how to:
-#### In this article:
+* Enable editing
+* Use the relevant events
+* Define command buttons
-- [Basics](#basics)
-- [Events](#events)
-- [Customize The Editor Fields](#customize-the-editor-fields)
-- [Example](#example)
-- [Notes](#notes)
+## Edit Modes
-## Basics
+The Grid offers several editing modes with different user experience. To allow users to add or edit data items in the GRid:
-The Grid offers several editing modes with different user experience. Set the `EditMode` property to a member of the `GridEditMode` enum:
+1. Set the `EditMode` parameter to a [member of the `GridEditMode` enum](slug:telerik.blazor.grideditmode).
+1. Define the required [events](#events) and appropriate [command buttons](#commands) for the selected edit mode and operations.
-* `None` - the default `GridEditMode` value. The built-in [`Add` and `Edit` commands](slug:components/grid/columns/command#built-in-commands) don't work in this mode.
-* `Incell` - [edit a single cell](slug:components/grid/editing/incell) by clicking on it or tabbing
-* `Inline` - [edit a row](slug:components/grid/editing/inline) by clicking on an [Edit command button](slug:components/grid/columns/command)
-* `Popup` - [edit a row in a popup form](slug:components/grid/editing/popup) by clicking on an Edit button
+The default Grid edit mode is `GridEditMode.None`. The built-in [`Add` and `Edit` commands](slug://components/grid/columns/command#built-in-commands) don't work in this mode.
+
+All Grid edit modes work with one cell or one row. Editing multiple rows at the same time is not supported. You can [render editors in all Grid data cells through column ``s](slug:grid-kb-edit-all-rows-cells) as an alternative.
+
+### In Cell
+
+Set the Grid `EditMode` parameter to `GridEditMode.Inline`. During in-cell editing, only one table cell is in edit mode. The user can:
+
+* Press **Tab** or **Shift** + **Tab** to confirm the current edit value and edit the next or previous cell.
+* Click on another cell to confirm the current edit value and edit the new cell.
+* Press **ESC** to cancel the current change and exit edit mode.
+* Click outside the Grid to confirm the current edit value and exit edit mode.
+* Peform another Grid operation, for example, paging or sorting, to cancel the current edit operation.
+
+In-cell CUD operations require the following setup:
+
+* **Add** command button
+* **Delete** command button
+
+Without the above command buttons, the application can only add or remove data items programmatically.
+
+In-cell edit mode does not require **Edit**, **Save**, and **Cancel** command buttons.
+
+### Inline
+
+During inline editing, only one table row is in edit mode. The user can:
+
+* Press **Tab** or **Shift** + **Tab** to focus the next or previous editable cell.
+* Press **ESC** to cancel the current row changes and exit edit mode.
+* Peform another Grid operation, for example, paging or sorting, to cancel the current edit operation.
+
+In-cell CUD operations requires the following setup:
+
+* **Add** command button
+* **Delete** command button
+* **Edit** command button
+* **Save** command button
+* **Cancel** command button
+
+Without the above command buttons, the application can only add or remove data items programmatically.
+
+
+* `Inline`—[edit a row](slug://components/grid/editing/inline) by clicking on an [Edit command button](slug://components/grid/columns/command)
+* `Popup`—[edit a row in a popup form](slug://components/grid/editing/popup) by clicking on an Edit button
## Events
@@ -61,343 +100,34 @@ You can customize the editors rendered in the Grid by providing the `EditorType`
| **Boolean** | `GridEditorType.CheckBox` `GridEditorType.Switch` |
| **DateTime** | `GridEditorType.DatePicker` `GridEditorType.DateTimePicker` `GridEditorType.TimePicker` |
+## Data Parameter and OnRead Event
-````RAZOR
-@* The usage of the EditorType parameter *@
-
-@using System.ComponentModel.DataAnnotations
-
-
-
- Add Employee
-
-
-
-
-
- Save
- Edit
- Delete
- Cancel
-
-
-
-
-
-@code {
- async Task UpdateHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
-
- await MyService.Update(item);
-
- await GetGridData();
- }
-
- async Task DeleteHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
-
- await MyService.Delete(item);
-
- await GetGridData();
- }
-
- async Task CreateHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
-
- await MyService.Create(item);
-
- await GetGridData();
- }
-
- async Task CancelHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
-
- await Task.Delay(1000); //simulate actual long running async operation
- }
-
- public class SampleData
- {
- public int ID { get; set; }
- [Required]
- public string Name { get; set; }
- }
-
- List MyData { get; set; }
-
- async Task GetGridData()
- {
- MyData = await MyService.Read();
- }
-
- protected override async Task OnInitializedAsync()
- {
- await GetGridData();
- }
-
- public static class MyService
- {
- private static List _data { get; set; } = new List();
-
- public static async Task Create(SampleData itemToInsert)
- {
- await Task.Delay(1000); // simulate actual long running async operation
-
- itemToInsert.ID = _data.Count + 1;
- _data.Insert(0, itemToInsert);
- }
-
- public static async Task> Read()
- {
- await Task.Delay(1000); // simulate actual long running async operation
-
- if (_data.Count < 1)
- {
- for (int i = 1; i < 50; i++)
- {
- _data.Add(new SampleData()
- {
- ID = i,
- Name = "Name " + i.ToString()
- });
- }
- }
-
- return await Task.FromResult(_data);
- }
-
- public static async Task Update(SampleData itemToUpdate)
- {
- await Task.Delay(1000); // simulate actual long running async operation
-
- var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
- if (index != -1)
- {
- _data[index] = itemToUpdate;
- }
- }
-
- public static async Task Delete(SampleData itemToDelete)
- {
- await Task.Delay(1000); // simulate actual long running async operation
-
- _data.Remove(itemToDelete);
- }
- }
-}
-````
-
-## Example
-
-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 You can see the CRUD events in action in our live demos for [Inline](https://demos.telerik.com/blazor-ui/grid/editing-inline), [Popup](https://demos.telerik.com/blazor-ui/grid/editing-popup) and [InCell](https://demos.telerik.com/blazor-ui/grid/editing-incell) editing. You can also use the [Telerik Wizard](slug:getting-started-vs-integration-new-project) project templates to easily create an application that showcases the Telerik Grid with CRUD events implemented.
-
->caption Handling the CRUD events of the grid to save data to the actual data source (mocked with local methods in this example, see the code comments for details)
-
-````RAZOR
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
-
-Editing is cancelled for the first two records.
-
-There is a deliberate delay in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls.
-
-
-
- Add Employee
-
-
-
-
-
- Save
- Edit
- Delete
- Cancel
-
-
-
-
-@logger
-
-@code {
- async Task AddHandler(GridCommandEventArgs args)
- {
- //Set default values for new items
- ((SampleData)args.Item).Name = "New Item Name";
-
- //Cancel if needed
- //args.IsCancelled = true;
- }
-
- async Task EditHandler(GridCommandEventArgs args)
- {
- SampleData item = (SampleData)args.Item;
-
- //prevent opening for edit based on condition
- if (item.ID < 3)
- {
- args.IsCancelled = true;//the general approach for cancelling an event
- }
-
- AppendToLog("Edit", args);
- }
-
- async Task UpdateHandler(GridCommandEventArgs args)
- {
- AppendToLog("Update", args);
-
- SampleData item = (SampleData)args.Item;
-
- // perform actual data source operations here through your service
- await MyService.Update(item);
-
- // update the local view-model data with the service data
- await GetGridData();
- }
-
- async Task DeleteHandler(GridCommandEventArgs args)
- {
- AppendToLog("Delete", args);
-
- SampleData item = (SampleData)args.Item;
-
- // perform actual data source operation here through your service
- await MyService.Delete(item);
-
- // update the local view-model data with the service data
- await GetGridData();
-
- }
-
- async Task CreateHandler(GridCommandEventArgs args)
- {
- AppendToLog("Create", args);
-
- SampleData item = (SampleData)args.Item;
-
- // perform actual data source operation here through your service
- await MyService.Create(item);
-
- // update the local view-model data with the service data
- await GetGridData();
- }
-
- async Task CancelHandler(GridCommandEventArgs args)
- {
- AppendToLog("Cancel", args);
-
- SampleData item = (SampleData)args.Item;
-
- // if necessary, perform actual data source operation here through your service
-
- await Task.Delay(1000); //simulate actual long running async operation
- }
-
- // this method and field just display what happened for visual cues in this example
-
- MarkupString logger;
- void AppendToLog(string commandName, GridCommandEventArgs args)
- {
- string currAction = string.Format(
- " Command: {0}; is cancelled: {1}; is the item new: {2}",
- commandName,
- args.IsCancelled,
- args.IsNew
- );
- logger = new MarkupString(logger + currAction);
- }
-
-
- // in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
- public class SampleData
- {
- public int ID { get; set; }
- [Required]
- public string Name { get; set; }
- }
+During CUD operations, the Grid expects the application to make changes to the data source and provide the latest data to the component. This can happen in a few different ways, depending on the used Grid [data binding mechanism](slug:common-features-data-binding-overview#how-to-provide-data).
- List MyData { get; set; }
+### Data Parameter
- async Task GetGridData()
- {
- MyData = await MyService.Read();
- }
+At the end of the `OnCreate`, `OnDelete`, and `OnUpdate` event handler, the application must do one of the following:
- protected override async Task OnInitializedAsync()
- {
- await GetGridData();
- }
+* Make a request to the database and retrieve the latest data. Set the collection as the new value of the Grid `Data` parameter. The Grid will rebind automatically. The following examples demonstrate this approach: ........
+* Use the CUD event arguments to update the local data collection in the `Data` parameter manually. This approach spares one database request, but the user may not see recent changes made by other users.
+### OnRead Event
- // the following static class mimics an actual data service that handles the actual data source
- // replace it with your actual service through the DI, this only mimics how the API will look like and works for this standalone page
- public static class MyService
- {
- private static List _data { get; set; } = new List();
+The Grid will automatically fire its `OnRead` event after any CUD event. Given that the original component data source is already up-to-date, the component will receive the latest data.
- public static async Task Create(SampleData itemToInsert)
- {
- await Task.Delay(1000); // simulate actual long running async operation
+To spare the database request in this case, the app must:
- itemToInsert.ID = _data.Count + 1;
- _data.Insert(0, itemToInsert);
- }
+* Use previously cached data in the `OnRead` handler.
+* Update the cached data with the latest user changes before setting it to `args.Data`.
- public static async Task> Read()
- {
- await Task.Delay(1000); // simulate actual long running async operation
+## Examples
- if (_data.Count < 1)
- {
- for (int i = 1; i < 50; i++)
- {
- _data.Add(new SampleData()
- {
- ID = i,
- Name = "Name " + i.ToString()
- });
- }
- }
+See Grid CRUD operations in action at:
- return await Task.FromResult(_data);
- }
-
- public static async Task Update(SampleData itemToUpdate)
- {
- await Task.Delay(1000); // simulate actual long running async operation
-
- var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
- if (index != -1)
- {
- _data[index] = itemToUpdate;
- }
- }
-
- public static async Task Delete(SampleData itemToDelete)
- {
- await Task.Delay(1000); // simulate actual long running async operation
-
- _data.Remove(itemToDelete);
- }
- }
-}
-````
-
->tip The grid events use `EventCallback` and can be synchronous or asynchronous. The example above shows async versions, and the signature for synchronous events is `void (GridCommandEventArgs args)`.
+* [Inline Editing Online Demo](https://demos.telerik.com/blazor-ui/grid/editing-inline)
+* [Popup Editing Online Demo](https://demos.telerik.com/blazor-ui/grid/editing-popup)
+* [In-Cell Editing Online Demo](https://demos.telerik.com/blazor-ui/grid/editing-incell)
+* [Custom Batch Editing Online Demo](https://demos.telerik.com/blazor-ui/grid/batch-editing)
## Notes
diff --git a/knowledge-base/grid-checkbox-editing.md b/knowledge-base/grid-checkbox-editing.md
index 5bc125955..d5fb75d4e 100644
--- a/knowledge-base/grid-checkbox-editing.md
+++ b/knowledge-base/grid-checkbox-editing.md
@@ -182,4 +182,5 @@ The [built-in Grid editing](slug:components/grid/editing/overview) feature creat
## See Also
+* [Edit All Grid Rows and Cells](slug:grid-kb-edit-all-rows-cells)
* [Grid Column Cell Template](slug:grid-templates-column)
diff --git a/knowledge-base/grid-edit-all-rows-cells.md b/knowledge-base/grid-edit-all-rows-cells.md
new file mode 100644
index 000000000..5e7f74661
--- /dev/null
+++ b/knowledge-base/grid-edit-all-rows-cells.md
@@ -0,0 +1,196 @@
+---
+title: Edit All Grid Rows and Cells
+description: How to put all Grid rows and cells in edit mode at the same time.
+type: how-to
+page_title: How to Edit All Grid Rows and Cells
+slug: grid-kb-edit-all-rows-cells
+position:
+tags: blazor, grid, editing
+ticketid:
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
+ Grid for Blazor,
+ TreeList for Blazor
+
+
+
+
+
+## Description
+
+This KB article answers the following questions:
+
+* How to put the entire Grid component into edit mode?
+* How to edit multiple Grid rows at the same time?
+* How to edit all Grid rows and cells at once?
+* How to edit several Grid data items simultaneously?
+
+## Solution
+
+1. Define [column ``s](slug:grid-templates-column) for all editable columns. Place the appropriate input component inside, depending on the column data type.
+1. If the updated cell values require real-time synchronization with a remote data source, then use the `OnChange` or `ValueChanged` event of the respective input component. Note that in most components `ValueChanged` fires more frequently (on each key press), while `OnChange` fires on **Enter**, blur, or dropdown item selection.
+
+The discussed mechanism can be beneficial in some scenarios, but has the following downsides:
+
+* It renders a lot of child components in the Grid, depending on the `PageSize` and number of columns. This can have a significant impact on the application performance, especially in WebAssembly apps.
+* It doesn't use the built-in Grid editing mechanism and events.
+* It doesn't use `DataAnnotations` validation. Any validation must be implemented through the input component configurations, including the `OnChange` or `ValueChanged` handlers.
+
+>caption Editing all Grid rows and cells at the same time
+
+````RAZOR
+
+
+
+ Custom Add
+
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+
+
+
+
+ @{ var dataItem = (Product)context; }
+
+
+
+
+
+
+
The Grid below shows how the above Data collection changes.
+
+
+
+
+
+
+
+
+
+@code {
+ private TelerikGrid? GridRef1 { get; set; }
+ private TelerikGrid? GridRef2 { get; set; }
+
+ private List GridData { get; set; } = new();
+
+ private int LastId { get; set; }
+
+ private void OnGridCustomCreate()
+ {
+ var createdItem = new Product() { Id = ++LastId, Name = "New Default Name", ReleaseDate = DateTime.Today };
+
+ GridData.Insert(0, createdItem);
+
+ GridRef1?.Rebind();
+ GridRef2?.Rebind();
+ }
+
+ private void OnDataItemValueChanged(object newValue, Product product, string propertyName)
+ {
+ // Using a single OnChange handler for example simplicity.
+ // This approach may require reflection.
+ // You can also use a separate OnChange handler for each column.
+
+ // Update the database...
+
+ // Call only in scenarios when the UI doesn't update automatically.
+ //GridRef2?.Rebind();
+ }
+
+ protected override void OnInitialized()
+ {
+ Random rnd = Random.Shared;
+
+ for (int i = 1; i <= 30; i++)
+ {
+ GridData.Add(new Product()
+ {
+ Id = ++LastId,
+ Name = $"Product {LastId}",
+ Description = $"Multi-line\ndescription {LastId}",
+ Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m,
+ Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000),
+ ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)),
+ Discontinued = LastId % 2 == 0
+ });
+ }
+ }
+
+ public class Product
+ {
+ public int Id { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string Description { get; set; } = string.Empty;
+ public decimal? Price { get; set; }
+ public int Quantity { get; set; }
+ public DateTime? ReleaseDate { get; set; }
+ public bool Discontinued { get; set; }
+ }
+}
+````
+
+## See Also
+
+* [Grid Editing Overview](slug:components/grid/editing/overview)
+* [Grid Column Cell Template](slug:grid-templates-column)
From 5d95a2b70e7cd50e9cefe7d4fd90b33a074afccb Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Sat, 15 Feb 2025 16:27:32 +0200
Subject: [PATCH 04/33] Revamp continued
---
components/grid/editing/overview.md | 84 ++++++++++++++++++-----------
1 file changed, 54 insertions(+), 30 deletions(-)
diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md
index 632ac6d05..83995399c 100644
--- a/components/grid/editing/overview.md
+++ b/components/grid/editing/overview.md
@@ -20,7 +20,7 @@ This page explains how to:
## Edit Modes
-The Grid offers several editing modes with different user experience. To allow users to add or edit data items in the GRid:
+The Grid offers several ways to add and edit rows with different user experience. To allow users to add or edit in the Grid:
1. Set the `EditMode` parameter to a [member of the `GridEditMode` enum](slug:telerik.blazor.grideditmode).
1. Define the required [events](#events) and appropriate [command buttons](#commands) for the selected edit mode and operations.
@@ -29,14 +29,26 @@ The default Grid edit mode is `GridEditMode.None`. The built-in [`Add` and `Edit
All Grid edit modes work with one cell or one row. Editing multiple rows at the same time is not supported. You can [render editors in all Grid data cells through column ``s](slug:grid-kb-edit-all-rows-cells) as an alternative.
+### Item Instances During Editing
+
+The Grid uses [`Activator.CreateInstance()`](https://learn.microsoft.com/en-us/dotnet/api/system.activator.createinstance) to generate item instances for add and edit mode. This brings the following requirements and considerations:
+
+* The Grid model class must have a parameterless constructor. Otherwise, use the [Grid `OnModelInit` event](slug:grid-events#onmodelinit) to provide a data item instance. Optinally, you can also [set some default values](slug://grid-kb-default-value-for-new-row).
+* All editable properties must be `public` and have setters. These properties must not be `readonly`.
+* There must be no `public` properties that create a circular reference. For example, if the Grid model class is `Person`, it must not have properties of type `Person`.
+* The `OnEdit` event handler receives the original item instance from the Grid data collection in `GridCommandEventArgs.Item`.
+* The [column `` `context`](slug:grid-templates-editor) is the new (cloned) item instance.
+* The `OnUpdate` event handler receives the cloned and modified item in `GridCommandEventArgs.Item`. The app must replace the original item with the cloned item. Alternatively, the app must update the property values in the original item one by one.
+
### In Cell
-Set the Grid `EditMode` parameter to `GridEditMode.Inline`. During in-cell editing, only one table cell is in edit mode. The user can:
+Set the Grid `EditMode` parameter to `GridEditMode.Incell`. During in-cell editing, only one table cell is in edit mode. The user can:
-* Press **Tab** or **Shift** + **Tab** to confirm the current edit value and edit the next or previous cell.
-* Click on another cell to confirm the current edit value and edit the new cell.
+* Press **Tab** or **Shift** + **Tab** to confirm the current value and edit the next or previous cell.
+* Press **Enter** to confirm the current value and edit the cell below.
* Press **ESC** to cancel the current change and exit edit mode.
-* Click outside the Grid to confirm the current edit value and exit edit mode.
+* Click on another cell to confirm the current value and edit the new cell.
+* Click outside the Grid to confirm the current value and exit edit mode.
* Peform another Grid operation, for example, paging or sorting, to cancel the current edit operation.
In-cell CUD operations require the following setup:
@@ -44,19 +56,23 @@ In-cell CUD operations require the following setup:
* **Add** command button
* **Delete** command button
-Without the above command buttons, the application can only add or remove data items programmatically.
+Without using the above command buttons, the application can:
+
+* [Manage insert or edit mode](slug:grid-kb-add-edit-state) through the [Grid state](slug:grid-state).
+* Modify data items directly in the Grid `Data` collection or the data source. [Rebind the Grid](slug:common-features-data-binding-overview#refresh-data) afterwards.
In-cell edit mode does not require **Edit**, **Save**, and **Cancel** command buttons.
### Inline
-During inline editing, only one table row is in edit mode. The user can:
+Set the Grid `EditMode` parameter to `GridEditMode.Inline`. During inline editing, only one table row is in edit mode. The user can:
* Press **Tab** or **Shift** + **Tab** to focus the next or previous editable cell.
-* Press **ESC** to cancel the current row changes and exit edit mode.
+* Click the **Save** command button or press **Enter** to confirm the current row changes and exit edit mode.
+* Click the **Cancel** command button or press **ESC** to cancel the current row changes and exit edit mode.
* Peform another Grid operation, for example, paging or sorting, to cancel the current edit operation.
-In-cell CUD operations requires the following setup:
+Inline CUD operations require the following setup:
* **Add** command button
* **Delete** command button
@@ -64,11 +80,31 @@ In-cell CUD operations requires the following setup:
* **Save** command button
* **Cancel** command button
-Without the above command buttons, the application can only add or remove data items programmatically.
+Without using the above command buttons, the application can:
+
+* [Manage insert or edit mode](slug:grid-kb-add-edit-state) through the [Grid state](slug:grid-state).
+* Modify data items directly in the Grid `Data` collection or the data source. [Rebind the Grid](slug:common-features-data-binding-overview#refresh-data) afterwards.
+### Popup
-* `Inline`—[edit a row](slug://components/grid/editing/inline) by clicking on an [Edit command button](slug://components/grid/columns/command)
-* `Popup`—[edit a row in a popup form](slug://components/grid/editing/popup) by clicking on an Edit button
+Set the Grid `EditMode` parameter to `GridEditMode.Popup`. During popup editing, only one table row is in edit mode. The user can:
+
+* Press **Tab** or **Shift** + **Tab** to focus the next or previous input component.
+* Click the **Save** command button to confirm the current row changes and exit edit mode.
+* Click the **Cancel** command button or press **ESC** to cancel the current row changes and exit edit mode.
+
+Popup CUD operations require the following setup:
+
+* **Add** command button
+* **Delete** command button
+* **Edit** command button
+
+Without using the above command buttons, the application can:
+
+* [Manage insert or edit mode](slug:grid-kb-add-edit-state) through the [Grid state](slug:grid-state).
+* Modify data items directly in the Grid `Data` collection or the data source. [Rebind the Grid](slug:common-features-data-binding-overview#refresh-data) afterwards.
+
+Popup edit mode does not require **Save** and **Cancel** command buttons. The Grid renders them automaatically in the popup, unless you define a [``](slug:grid-templates-popup-buttons) or a [``](slug:grid-templates-popup-form).
## Events
@@ -100,9 +136,9 @@ You can customize the editors rendered in the Grid by providing the `EditorType`
| **Boolean** | `GridEditorType.CheckBox` `GridEditorType.Switch` |
| **DateTime** | `GridEditorType.DatePicker` `GridEditorType.DateTimePicker` `GridEditorType.TimePicker` |
-## Data Parameter and OnRead Event
+## Rebind Grid After CUD
-During CUD operations, the Grid expects the application to make changes to the data source and provide the latest data to the component. This can happen in a few different ways, depending on the used Grid [data binding mechanism](slug:common-features-data-binding-overview#how-to-provide-data).
+During CUD operations, the Grid expects the application to make changes to the data source and provide the latest data to the component. This can happen in different ways, depending on the current Grid [data binding mechanism](slug:common-features-data-binding-overview#how-to-provide-data).
### Data Parameter
@@ -143,14 +179,6 @@ There are a few considerations to keep in mind with the CUD operations of the gr
* If you are [using the `OnRead` event to optimize the data requests](slug:components/grid/manual-operations), it will fire after the CUD events (`OnCreate`, `OnUpdate`, `OnDelete`, `OnCancel`) so that the grid data can be refreshed properly from the real data source. If you want to avoid such calls to the database, you can raise a flag in those four events to avoid calling your data service in the `OnRead` event, and then you can lower that flag at the end of `OnRead` so subsequent calls can fetch fresh data.
-* The Grid uses `Activator.CreateInstance();` to generate a new item when an Insert or Edit action is invoked, so the Model should have a parameterless constructor defined. If you cannot have such a constructor, you must use the [OnModelInit](slug:grid-events#onmodelinit) event.
- * Another case when you may need to insert items through the grid state is when you use [OnRead with grouping](slug:components/grid/manual-operations#grouping-with-onread). In such cases the Grid is bound to an `object`, not to a particular model. As a result, it can't create new items for you and errors may be thrown. A workaround might be [invoking Edit/Insert through the grid state](slug:grid-kb-add-edit-state) and creating the object with your own code.
-
-* While editing, the Grid creates a **copy of your original object** which has a **different reference**. You receive that copy in the `OnUpdate` event handler. The `OnEdit` event receives the original item from the pristine `Data` collection, because it is a cancellable event and fires before the grid logic creates the copy. The built-in editors and [editor templates](slug:grid-templates-editor) receive the copy for their `context` that the grid will create after `OnEdit`.
- * For the Grid to successfully create a copy of the original object, all properties must have а setter and must not be `readonly`. Otherwise, editing may stop working.
-
-* If you want to pre-populate values to the user, see the [Setting default values in new row](slug:grid-kb-default-value-for-new-row) KnowledgeBase article.
-
* When you are using your Entity Framework models directly in the Grid (especially in a server-side Blazor scenario) and you use the `Item` property of `GridCommandEventArgs` directly in your DataBase update method, you can get one of the following exceptions: `The instance of entity type 'YourModel' cannot be tracked because another instance with the same key value for {'Id'} is already being tracked. When attaching existing entities, ensure that only one entity instance with a given key value is attached...` or `This is a DynamicProxy2 error: The interceptor attempted to 'Proceed' for method 'Microsoft.EntityFrameworkCore.Infrastructure.ILazyLoader get_LazyLoader()' which has no target. When calling method without target there is no implementation to 'proceed' to and it is the responsibility of the interceptor to mimic the implementation (set return value, out arguments etc)`.
To fix it you can change the update using this approach:
@@ -184,11 +212,7 @@ There are a few considerations to keep in mind with the CUD operations of the gr
## See Also
- * [Live Demo: Grid Inline Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline)
- * [Live Demo: Grid Popup Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
- * [Live Demo: Grid InCell Editing](https://demos.telerik.com/blazor-ui/grid/editing-incell)
- * [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)
- * [Enter and Exit Grid Edit Mode Programmatically](slug:grid-kb-add-edit-state)
- * [Blazor Grid](slug:grid-overview)
\ No newline at end of file
+* [Live Demos: Grid Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline)
+* [Enter and Exit Grid Edit Mode Programmatically](slug://grid-kb-add-edit-state)
+* [Set Default Values for Grid Add and Edit Mode](slug://grid-kb-default-value-for-new-row)
+* [Edit All Grid Rows and Cells at the Same Time](slug:grid-kb-edit-all-rows-cells)
From 7ecde954eae074d2bf7e438ab314c22dd22aab95 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Sun, 16 Feb 2025 21:32:01 +0200
Subject: [PATCH 05/33] Revamp continued
---
.../common/parameters-table-styles.md | 2 +-
components/grid/columns/bound.md | 2 +-
components/grid/editing/incell.md | 29 +++
components/grid/editing/inline.md | 28 +++
components/grid/editing/overview.md | 221 ++++++++----------
components/grid/editing/popup.md | 27 +++
components/grid/editing/validation.md | 7 +
components/grid/templates/editor.md | 14 ++
.../grid-binding-to-expando-object.md | 2 +-
9 files changed, 206 insertions(+), 126 deletions(-)
diff --git a/_contentTemplates/common/parameters-table-styles.md b/_contentTemplates/common/parameters-table-styles.md
index f314fc28e..b9050859b 100644
--- a/_contentTemplates/common/parameters-table-styles.md
+++ b/_contentTemplates/common/parameters-table-styles.md
@@ -1,6 +1,6 @@
#table-layout
@code {
- TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList();
+ private IEnumerable? TreeListData { get; set; }
- public string Result { get; set; }
+ private int TreeListPageSize { get; set; } = 5;
- // Note: This can cause a performance delay if you do long operations here
- // Note 2: The TreeList does not await this event, its purpose is to notify you of changes
- // so you must not perform async operations and data loading here, or issues with the TreeList state may occur
- // or other things you change on the page won't actually change. The .SetStateAsync() call redraws only the TreeList, but not the rest of the page
- async Task OnStateChangedHandler(TreeListStateEventArgs args)
- {
- string changedSetting = args.PropertyName;
-
- if (changedSetting == "SortDescriptors")
- {
- foreach (var item in args.TreeListState.SortDescriptors)
- {
- Result = $"The {item.Member} field was sorted";
- }
- }
- else if (changedSetting == "FilterDescriptors")
- {
- // ensure certain state based on some condition
- // in this example - ensure that the ID field is always filtered with a certain setting unless the user filters it explicitly
- bool isIdFiltered = false;
-
- foreach (CompositeFilterDescriptor compositeFilterDescriptor in args.TreeListState.FilterDescriptors)
- {
- foreach(FilterDescriptor item in compositeFilterDescriptor.FilterDescriptors)
- {
- Result = $"The {item.Member} field was filtered";
-
- // you could override a user action as well - change settings on the corresponding parameter
- // make sure that the .SetStateAsync() method of the TeeList is always called if you do that
- if (item.Member == "Name")
- {
- item.Value = "second level child 1 of 1 and 1";
- item.Operator = FilterOperator.Contains;
- }
- }
- }
- if (!isIdFiltered)
- {
- args.TreeListState.FilterDescriptors.Add(new FilterDescriptor
- {
- Member = "Id",
- MemberType = typeof(int),
- Operator = FilterOperator.IsLessThan,
- Value = 10
- });
- }
- //needed only if you will be overriding user actions or amending them
- // if you only need to be notified of changes, you should not call this method
- await TreeListRef.SetStateAsync(args.TreeListState);
- }
- }
+ private IEnumerable TreeListSelectedItems { get; set; } = new List();
- public List Data { get; set; }
+ private EmployeeService TreeListEmployeeService { get; set; } = new();
- // sample model
+ private int OnStateChangedCount { get; set; }
- public class Employee
- {
- // hierarchical data collections
- public List DirectReports { get; set; }
-
- // data fields for display
- public int Id { get; set; }
- public string Name { get; set; }
- public string EmailAddress { get; set; }
- public DateTime HireDate { get; set; }
- }
+ private string TreeListStateChangedProperty { get; set; } = string.Empty;
+ private string TreeListStateChangedPropertyClass { get; set; } = string.Empty;
- // data generation
+ private string TreeListStateString { get; set; } = string.Empty;
- // used in this example for data generation and retrieval for CUD operations on the current view-model data
- public int LastId { get; set; } = 1;
+ private bool _doubleStateChanged { get; set; }
- protected override async Task OnInitializedAsync()
- {
- Data = await GetTreeListData();
- }
+ private List _operationsWithMultipleStateChanged = new List() {
+ "FilterDescriptors",
+ "SearchFilter"
+ };
- async Task> GetTreeListData()
+ private async Task OnTreeListStateChanged(TreeListStateEventArgs args)
{
- List data = new List();
-
- for (int i = 1; i < 15; i++)
+ if (_doubleStateChanged)
{
- Employee root = new Employee
- {
- Id = LastId,
- Name = $"root: {i}",
- EmailAddress = $"{i}@example.com",
- HireDate = DateTime.Now.AddYears(-i),
- DirectReports = new List(), // prepare a collection for the child items, will be populated later in the code
- };
- data.Add(root);
- LastId++;
-
- for (int j = 1; j < 4; j++)
- {
- int currId = LastId;
- Employee firstLevelChild = new Employee
- {
- Id = currId,
- Name = $"first level child {j} of {i}",
- EmailAddress = $"{currId}@example.com",
- HireDate = DateTime.Now.AddDays(-currId),
- DirectReports = new List(), // collection for child nodes
- };
- root.DirectReports.Add(firstLevelChild); // populate the parent's collection
- LastId++;
-
- for (int k = 1; k < 3; k++)
- {
- int nestedId = LastId;
- // populate the parent's collection
- firstLevelChild.DirectReports.Add(new Employee
- {
- Id = LastId,
- Name = $"second level child {k} of {j} and {i}",
- EmailAddress = $"{nestedId}@example.com",
- HireDate = DateTime.Now.AddMinutes(-nestedId)
- }); ;
- LastId++;
- }
- }
+ _doubleStateChanged = false;
+ await Task.Delay(1500);
+ TreeListStateChangedPropertyClass = string.Empty;
}
- return await Task.FromResult(data);
- }
-}
-````
-
-### Initiate Editing or Inserting of an Item
-
-The TreeList state lets you store the item that the user is currently working on - both an existing model that is being edited, and a new item the user is inserting. This happens automatically when you save the TreeList state. If you want to save on every keystroke instead of on `OnChange` - use a custom editor template and update the `EditItem` or `InsertedItem` of the state object as required, then save the state into your service.
-
-In addition to that, you can also use the `EditItem`, `OriginalEditItem`, `InsertItem` and `ParentItem` fields of the state object to put the TreeList in edit/insert mode through your own application code, instead of needing the user to initiate this through a [command button](slug:treelist-columns-command).
-
->caption Put and item in Edit mode or start Inserting a new item
-
-````RAZOR
-@* This example shows how to make the grid edit a certain item or start insert operation
- through your own code, without requiring the user to click the Command buttons.
- The buttons that initiate these operations can be anywhere on the page, including inside the grid.
- Note the model constructors and static method that show how to get a new instance for the edit item
-*@
-
-Edit item 2
-Insert Item
-Insert Item as child of Item 3
-
-
-
-
- Add
-
-
-
- Add Child
- Edit
- Delete
- Save
- Cancel
-
-
-
-
-
-
-
-
-
-@code {
- public List Data { get; set; }
- TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList();
-
- async Task EnterEditMode()
- {
- var state = TreeListRef.GetState();
-
- Employee originalEmployee = FindItemRecursive(Data, 2);
- Employee employeeToEdit = Employee.GetClonedInstance(originalEmployee);
-
- state.EditItem = employeeToEdit;
- state.OriginalEditItem = originalEmployee;
- await TreeListRef.SetStateAsync(state);
- }
+ ++OnStateChangedCount;
- async Task InsertItem()
- {
- var state = TreeListRef.GetState();
- state.InsertedItem = new Employee() { Name = "added from code" };
- await TreeListRef.SetStateAsync(state);
- }
+ TreeListStateChangedProperty = args.PropertyName;
- async Task InsertItemAsSpecificChild()
- {
- var state = TreeListRef.GetState();
- state.InsertedItem = new Employee();
- state.ParentItem = FindItemRecursive(Data, 3);
- await TreeListRef.SetStateAsync(state);
- }
+ // serialize the TreeListState and highlight the changed property
+ TreeListStateString = JsonSerializer.Serialize(args.TreeListState, new JsonSerializerOptions() { WriteIndented = true })
+ .Replace($"\"{TreeListStateChangedProperty}\"", $"\"{TreeListStateChangedProperty}\"");
- // sample helper method for handling the view-model data hierarchy
- Employee FindItemRecursive(List items, int id)
- {
- foreach (var item in items)
+ // highlight first TreeListStateChangedProperty during filtering, grouping and search
+ if (_operationsWithMultipleStateChanged.Contains(TreeListStateChangedProperty))
{
- if (item.Id.Equals(id))
- {
- return item;
- }
-
- if (item.DirectReports?.Count > 0)
- {
- var childItem = FindItemRecursive(item.DirectReports, id);
-
- if (childItem != null)
- {
- return childItem;
- }
- }
+ _doubleStateChanged = true;
+ TreeListStateChangedPropertyClass = "first-of-two";
}
-
- return null;
}
- // Sample CUD operations for the local data
- async Task UpdateItem(TreeListCommandEventArgs args)
+ private async Task OnTreeListCreate(TreeListCommandEventArgs args)
{
- var item = args.Item as Employee;
+ var createdItem = (Employee)args.Item;
+ var parentItem = (Employee?)args.ParentItem;
- // perform actual data source operations here through your service
- await MyService.Update(item);
+ await TreeListEmployeeService.Create(createdItem, parentItem);
- // update the local view-model data with the service data
- await GetTreeListData();
+ TreeListData = await TreeListEmployeeService.Read();
}
- async Task CreateItem(TreeListCommandEventArgs args)
+ private async Task OnTreeListUpdate(TreeListCommandEventArgs args)
{
- var item = args.Item as Employee;
- var parentItem = args.ParentItem as Employee;
+ var updatedItem = (Employee)args.Item;
- // perform actual data source operations here through your service
- await MyService.Create(item, parentItem);
+ await TreeListEmployeeService.Update(updatedItem);
- // update the local view-model data with the service data
- await GetTreeListData();
+ TreeListData = await TreeListEmployeeService.Read();
}
- async Task DeleteItem(TreeListCommandEventArgs args)
+ protected override async Task OnInitializedAsync()
{
- var item = args.Item as Employee;
-
- // perform actual data source operations here through your service
- await MyService.Delete(item);
-
- // update the local view-model data with the service data
- await GetTreeListData();
+ TreeListData = await TreeListEmployeeService.Read();
}
+@[template](/_contentTemplates/treelist/editing.md#flat-crud-service-and-model)
+}
+````
- // sample model
-
- public class Employee
- {
- public int Id { get; set; }
-
- public string Name { get; set; }
- public string EmailAddress { get; set; }
- public DateTime HireDate { get; set; }
-
- public List DirectReports { get; set; }
- public bool HasChildren { get; set; }
+## Methods
- // example of comparing stored items (from editing or selection)
- // with items from the current data source - IDs are used instead of the default references
- // Also used for the editing so replacing the object in the view-model data
- // will treat it as the same object and keep its state - otherwise it will
- // collapse after editing is done, which is not what the user would expect
- public override bool Equals(object obj)
- {
- if (obj is Employee)
- {
- return this.Id == (obj as Employee).Id;
- }
- return false;
- }
+The `GetState` and `SetStateAsync` methods of the [TreeList instance](slug:treelist-overview#treelist-reference-and-methods) let you get and set the current TreeList state on demand at any time *after* [`OnStateInit`](#onstateinit).
- // define constructors and a static method so we can deep clone instances
- // we use that to define the edited item - otherwise the references will point
- // to the item in the grid data sources and all changes will happen immediately on
- // the Data collection, and we don't want that - so we need a deep clone with its own reference
- // this is just one way to implement this, you can do it in a different way
- public Employee()
- {
+* `GetState` returns the current TreeList state, so you can save it or [retrieve specific information](#information-in-the-treelist-state). For example, you can [use `GetState` to get the current filters, sorts, and page number](slug:grid-kb-get-filtered-data). Or, you can [get the current TreeList column properties like order index, width, and others)](slug:grid-kb-column-state).
- }
+* `SetStateAsync` receives an instance of a `TreeListState` object and applies it to the TreeList. For example, you can have a button that puts the TreeList in a certain configuration programmatically, for example sort or filter the data, enter or exit edit mode, expand or collapse rows, etc.
- public Employee(Employee itmToClone)
- {
- this.Id = itmToClone.Id;
- this.Name = itmToClone.Name;
- this.EmailAddress = itmToClone.EmailAddress;
- this.HireDate = itmToClone.HireDate;
- this.DirectReports = itmToClone.DirectReports != null ? new List(itmToClone.DirectReports) : new List();
- this.HasChildren = itmToClone.HasChildren;
- }
+If you want to make changes to the current TreeList state:
- public static Employee GetClonedInstance(Employee itmToClone)
- {
- return new Employee(itmToClone);
- }
- }
+1. First, get the current state with the `GetState` method.
+1. Apply the desired modifications to the obtained `TreeListState` object.
+1. Set the modified state object via the `SetStateAsync` method.
- // data generation
+> Do not use `GetState()` in the [`OnStateInit`](#onstateinit) or [`OnStateChanged`](#onstatechanged) events. Do not use `SetStateAsync()` in `OnStateInit`. Instead, get or set the `TreeListState` property of the event argument.
+>
+> Avoid calling `SetStateAsync` in the TreeList [CRUD methods](slug:treelist-editing-overview) (such as `OnUpdate`, `OnEdit`, `OnCreate`, `OnCancel`). Doing so may lead to unexpected results because the TreeList has more logic to execute after these events.
- async Task GetTreeListData()
- {
- Data = await MyService.Read();
- }
+>tip To reset the TreeList state to its initial markup configuration, call `SetStateAsync(null)`.
+>
+> To reset the TreeList state to a completely new configuration, create a `new TreeListState()` and apply the settings there. Then pass the state object to `SetStateAsync()`.
- protected override async Task OnInitializedAsync()
- {
- await GetTreeListData();
- }
- // the following static class mimics an actual data service that handles the actual data source
- // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
- public static class MyService
- {
- private static List _data { get; set; } = new List();
- // used in this example for data generation and retrieval for CUD operations on the current view-model data
- private static int LastId { get; set; } = 1;
+### SetStateAsync Examples
- public static async Task Create(Employee itemToInsert, Employee parentItem)
- {
- InsertItemRecursive(_data, itemToInsert, parentItem);
- }
+The tabs below show how to set the TreeList state and control filtering, sorting and other TreeList features.
- public static async Task> Read()
- {
- if (_data.Count < 1)
- {
- for (int i = 1; i < 15; i++)
- {
- Employee root = new Employee
- {
- Id = LastId,
- Name = $"root: {i}",
- EmailAddress = $"{i}@example.com",
- HireDate = DateTime.Now.AddYears(-i),
- DirectReports = new List(),
- HasChildren = true
- };
- _data.Add(root);
- LastId++;
-
- for (int j = 1; j < 4; j++)
- {
- int currId = LastId;
- Employee firstLevelChild = new Employee
- {
- Id = currId,
- Name = $"first level child {j} of {i}",
- EmailAddress = $"{currId}@example.com",
- HireDate = DateTime.Now.AddDays(-currId),
- DirectReports = new List(),
- HasChildren = true
- };
- root.DirectReports.Add(firstLevelChild);
- LastId++;
-
- for (int k = 1; k < 3; k++)
- {
- int nestedId = LastId;
- firstLevelChild.DirectReports.Add(new Employee
- {
- Id = LastId,
- Name = $"second level child {k} of {j} and {i}",
- EmailAddress = $"{nestedId}@example.com",
- HireDate = DateTime.Now.AddMinutes(-nestedId)
- }); ;
- LastId++;
- }
- }
- }
- }
+@[template](/_contentTemplates/treelist/state.md#initial-state)
- return await Task.FromResult(_data);
- }
+
+````RAZOR Sorting
+@[template](/_contentTemplates/treelist/state.md#set-sort-from-code)
+````
+````RAZOR FilterRow
+@[template](/_contentTemplates/treelist/state.md#filter-row-from-code)
+````
+````RAZOR FilterMenu
+@[template](/_contentTemplates/treelist/state.md#filter-menu-from-code)
+````
+````RAZOR Search
+@[template](/_contentTemplates/treelist/state.md#search-from-code)
+````
+````RAZOR ExpandedItems
+@[template](/_contentTemplates/treelist/state.md#expand-items-from-code)
+````
+````RAZOR Columns
+@[template](/_contentTemplates/treelist/state.md#column-state-from-code)
+````
- public static async Task Update(Employee itemToUpdate)
- {
- UpdateItemRecursive(_data, itemToUpdate);
- }
+@[template](/_contentTemplates/grid/state.md#filter-menu-default-filters)
- public static async Task Delete(Employee itemToDelete)
- {
- RemoveChildRecursive(_data, itemToDelete);
- }
- // sample helper methods for handling the view-model data hierarchy
- static void UpdateItemRecursive(List items, Employee itemToUpdate)
- {
- for (int i = 0; i < items.Count; i++)
- {
- if (items[i].Id.Equals(itemToUpdate.Id))
- {
- items[i] = itemToUpdate;
- return;
- }
-
- if (items[i].DirectReports?.Count > 0)
- {
- UpdateItemRecursive(items[i].DirectReports, itemToUpdate);
- }
- }
- }
+## Equals Comparison
- static void RemoveChildRecursive(List items, Employee item)
- {
- for (int i = 0; i < items.Count(); i++)
- {
- if (item.Equals(items[i]))
- {
- items.Remove(item);
-
- return;
- }
- else if (items[i].DirectReports?.Count > 0)
- {
- RemoveChildRecursive(items[i].DirectReports, item);
-
- if (items[i].DirectReports.Count == 0)
- {
- items[i].HasChildren = false;
- }
- }
- }
- }
+State properties that pertain to data items (for example, edited item or selected items) are typed according to the TreeList model. If you restore such data, make sure to implement appropriate comparison checks - by default the [`.Equals()`](https://learn.microsoft.com/en-us/dotnet/api/system.object.equals) check for a class (object) is a reference check and the reference from the restored state is very unlikely to match the current reference in the TreeList data. Thus, you may want to [override the `.Equals()` method of the TreeList model class](slug:grid-kb-save-load-state-localstorage), so that it compares by ID, or otherwise re-populate the models in the state object with the new model references from the TreeList data.
- static void InsertItemRecursive(List Data, Employee insertedItem, Employee parentItem)
- {
- insertedItem.Id = LastId++;
- if (parentItem != null)
- {
- parentItem.HasChildren = true;
- if (parentItem.DirectReports == null)
- {
- parentItem.DirectReports = new List();
- }
-
- parentItem.DirectReports.Insert(0, insertedItem);
- }
- else
- {
- Data.Insert(0, insertedItem);
- }
- }
- }
-}
-````
-### Get Current Columns Visibility, Order, Field
+## Examples
-The `ColumnStates` field of the state object provides you with information about the current columns in the TreeList. The `Index` field describes the position the user chose, and the `Visible` parameter indicates whether the column is hidden or not. By looping over that collection you can know what the user sees. You could, for example, sort by the index and filter by the visibility of the columns to approximate the view of the user.
+You can find multiple examples for using the TreeList state in the following [Knowledge Base articles](/knowledge-base):
-````RAZOR
-@[template](/_contentTemplates/treelist/state.md#get-column-state-from-code)
-````
+* [Save and load the TreeList state from `localStorage`](slug:grid-kb-save-load-state-localstorage)
+* [Save the TreeList state in a WebAssembly app](slug:grid-kb-save-state-in-webassembly)
+* [Override a user action that changes the TreeList state, for example, sort descending first](slug:grid-kb-sort-descending)
+* [Initiate programmatic editing or inserting of a TreeList row](slug:treelist-kb-add-edit-state)
+* [Get current TreeList column state (order index, width, and others)](slug:grid-kb-column-state)
## See Also
- * [Live Demo: TreeList State](https://demos.telerik.com/blazor-ui/treelist/persist-state)
-
+* [Live Demo: TreeList State](https://demos.telerik.com/blazor-ui/treelist/persist-state)
+* [TreeListState API reference](slug:Telerik.Blazor.Components.TreeListState-1)
+* [Blazor TreeList](slug:treelist-overview)
diff --git a/knowledge-base/grid-add-edit-state.md b/knowledge-base/grid-add-edit-state.md
index 59d01e888..7447c1e68 100644
--- a/knowledge-base/grid-add-edit-state.md
+++ b/knowledge-base/grid-add-edit-state.md
@@ -5,7 +5,7 @@ type: how-to
page_title: Enter and Exit Grid Edit Mode from Code
slug: grid-kb-add-edit-state
position:
-tags: grid, state
+tags: grid, state, editing
ticketid:
res_type: kb
---
@@ -24,17 +24,12 @@ res_type: kb
## Description
-How to enter edit mode from code?
-
-How to initiate insert and edit operations programmatically, instead of using [command buttons](slug:components/grid/columns/command)?
-
-How to add new Grid rows with a custom button, which is outside the component?
-
-How to insert Grid rows with an external button?
-
-How to cancel Grid edit mode programmatically?
-
-How to implement Grid command buttons outside the Grid?
+* How to enter edit mode from code?
+* How to initiate insert and edit operations programmatically, instead of using [command buttons](slug:components/grid/columns/command)?
+* How to add new Grid rows with a custom button, which is outside the component?
+* How to insert Grid rows with an external button?
+* How to cancel Grid edit mode programmatically?
+* How to implement Grid command buttons outside the Grid?
## Solution
@@ -46,7 +41,7 @@ This scenario requires knowledge about the [Grid State](slug:grid-state). Get fa
To enter and exit edit mode, set the following properties of the `GridState` object:
-* `InsertedItem` must be a new data item instance that will potentially be added to the Grid. You can set some default values, if needed.
+* `InsertedItem` must be a new data item instance that will potentially be added to the Grid. Applicable only for `Inline` and `Popup` edit mode. You can set some default values, if needed.
* `OriginalEditItem` must be a reference to an existing data item.
* `EditItem` must be a clone (copy) of the `OriginalEditItem`. Later it will either update the original item, or be discarded.
* `EditField` is used for incell editing only. It determines which cell will render an editor.
diff --git a/knowledge-base/grid-column-state.md b/knowledge-base/grid-column-state.md
index c8b1dd568..31f212c44 100644
--- a/knowledge-base/grid-column-state.md
+++ b/knowledge-base/grid-column-state.md
@@ -16,7 +16,7 @@ res_type: kb
diff --git a/knowledge-base/treelist-add-edit-state.md b/knowledge-base/treelist-add-edit-state.md
new file mode 100644
index 000000000..1f38f3640
--- /dev/null
+++ b/knowledge-base/treelist-add-edit-state.md
@@ -0,0 +1,526 @@
+---
+title: Enter and Exit TreeList Edit Mode Programmatically
+description: How to add and edit TreeList rows programmatically or with custom buttons.
+type: how-to
+page_title: Enter and Exit TreeList Edit Mode from Code
+slug: treelist-kb-add-edit-state
+position:
+tags: treelist, state, editing
+ticketid:
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
TreeList for Blazor
+
+
+
+
+
+## Description
+
+This knowledge base article answers the following questions:
+
+* How to enter edit mode from code?
+* How to initiate insert and edit operations programmatically, instead of using [command buttons](slug:treelist-columns-command)?
+* How to add new TreeList rows with a custom button, which is outside the component?
+* How to insert TreeList rows with an external button?
+* How to cancel TreeList edit mode programmatically?
+* How to implement TreeList command buttons outside the TreeList?
+
+
+## Solution
+
+This scenario requires knowledge about the [TreeList State](slug:treelist-state). Get familiar with the following sections first:
+
+* [Information in the TreeList State](slug:treelist-state#information-in-the-treelist-state)
+* [TreeList State Methods](slug:treelist-state#methods)
+
+To enter and exit edit mode, set the following properties of the `TreeListState` object:
+
+* `InsertedItem` must be a new data item instance that will potentially be added to the TreeList. Applicable only for `Inline` and `Popup` edit mode. You can set some default values, if needed.
+* `ParentItem` must be the parent item of the `InsertedItem` data item instance that will potentially be added to the TreeList. Applicable only for `Inline` and `Popup` edit mode.
+* `OriginalEditItem` must be a reference to an existing data item.
+* `EditItem` must be a clone (copy) of the `OriginalEditItem`. Later it will either update the original item, or be discarded.
+* `EditField` is used for incell editing only. It determines which cell will render an editor.
+
+Each property that is not relevant to a desired TreeList state, should be set to `null`.
+
+
+## Example
+
+The sample below shows how to add, edit, cancel and save items in [`Inline`](slug:treelist-editing-inline) and [`Popup`](slug:treelist-editing-popup) `EditMode`.
+
+All these operations can also be used for [`Incell`](slug:treelist-editing-incell). However, blurring the edited cell triggers [`OnUpdate`](slug:treelist-editing-overview#events), so external UI to manage the TreeList doesn't make sense. Some special [`EditorTemplate`](slug:treelist-templates-editor) may benefit from programmatic incell cancel or update. The required logic is the same as with inline editing, with the addition of `EditField`.
+
+>caption Enter and exit TreeList edit mode programmatically
+
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+