diff --git a/_contentTemplates/common/general-info.md b/_contentTemplates/common/general-info.md
index 3ad9a5f5e0..0e7af72811 100644
--- a/_contentTemplates/common/general-info.md
+++ b/_contentTemplates/common/general-info.md
@@ -79,7 +79,7 @@ If you set the `ShouldRender` field of the event arguments to `true`, the compon
 | tb-gantt-editable          | [Gantt with Editing](slug:gantt-tree-editing) |
 | tb-ganttcolumn             | [Gantt - Databound Column](slug:gantt-columns-bound) |
 | tb-grid                    | [Grid](slug:grid-overview)           |
-| tb-grid-editable           | [Grid with Editing](slug:components/grid/editing/overview) |
+| tb-grid-editable           | [Grid with Editing](slug:grid-editing-overview) |
 | tb-gridcolumn              | [Grid - Databound Column](slug:components/grid/columns/bound) |
 | tb-gridcolumn-locked       | [Grid with Frozen Column](slug:grid-columns-frozen) |
 | tb-gridlayout              | [GridLayout](slug:gridlayout-overview) |
diff --git a/_contentTemplates/common/grid-treelist-editing-notes.md b/_contentTemplates/common/grid-treelist-editing-notes.md
deleted file mode 100644
index ebc72c5096..0000000000
--- a/_contentTemplates/common/grid-treelist-editing-notes.md
+++ /dev/null
@@ -1,10 +0,0 @@
-#grid-treelist-data-operations-while-editing
-
-    * For operations like Filter, Group, Sort, Page, Search, Select, Row drag and Delete:
-        * InCell edit - if the validation is satisfied, a save operation will be executed. If the validation is **not** satisfied, editing will be cancelled, the `OnCancel` event will fire and the new user operation will be executed. In this case, you can handle the OnCancel event and set the `IsCancelled` property of the `CommandEventArgs` to true. Thus, the other data operation will be aborted and the Grid will remain in edit mode.
-        * Inline edit - regardless of the validation, editing will be cancelled, the `OnCancel` event will fire and the new user operation will be executed. In this case, you can handle the OnCancel event and set the `IsCancelled` property of the `CommandEventArgs` to true. Thus, the other data operation will be aborted and the Grid will remain in edit mode.
-
-    * For operations like Edit, Add, Save:
-        * InCell edit - if the validation is satisfied, the currently edited item will be saved and the command will be executed. If the validation is **not** satisfied, the command will be blocked until the item is valid or editing is cancelled.
-        * Inline edit - if the validation is satisfied, `OnCancel` will be fired for the currently edited item and the command will be executed. If the validation is **not** satisfied, the command will be blocked until the item is valid or editing is cancelled.
-#end
\ No newline at end of file
diff --git a/_contentTemplates/common/parameters-table-styles.md b/_contentTemplates/common/parameters-table-styles.md
index f314fc28ec..b9050859bb 100644
--- a/_contentTemplates/common/parameters-table-styles.md
+++ b/_contentTemplates/common/parameters-table-styles.md
@@ -1,6 +1,6 @@
 #table-layout
 <style>
-    article table {
+    .article table {
         table-layout: auto;
         word-break: normal;
     }
diff --git a/_contentTemplates/grid/editing.md b/_contentTemplates/grid/editing.md
new file mode 100644
index 0000000000..c71957f891
--- /dev/null
+++ b/_contentTemplates/grid/editing.md
@@ -0,0 +1,332 @@
+#overview-required
+
+> Make sure to read the [Grid CRUD Operations](slug:grid-editing-overview) article first.
+
+#end
+
+#without-commands
+
+Without using the above command buttons, the application can:
+
+* [Manage add or edit mode programmatically](slug:grid-kb-add-edit-state) through the [Grid state](slug:grid-state).
+* Modify data items directly in the Grid data source. [Rebind the Grid](slug:common-features-data-binding-overview#refresh-data) afterwards.
+
+#end
+
+#basic-example-description
+* Use the `OnCreate`, `OnDelete` and `OnUpdate` events to make changes to the Grid data source.
+* Rebind the Grid automatically through the `OnRead` event after the create, delete, or update operation is complete. When [using the `Data` parameter, you must either query the data source again, or modify the local `Data` collection manually](#advanced).
+* Use `DataAnnotations` validation for some model class properties.
+#end
+
+#basic-example-parameters-columns
+             OnCreate="@OnGridCreate"
+             OnDelete="@OnGridDelete"
+             OnUpdate="@OnGridUpdate">
+    <GridToolBarTemplate>
+        <GridCommandButton Command="Add">Add Item</GridCommandButton>
+    </GridToolBarTemplate>
+    <GridColumns>
+        <GridColumn Field="@nameof(Product.Name)" />
+        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
+        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
+        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" />
+        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px" />
+#end
+
+#basic-example-code
+    private ProductService GridProductService { get; set; } = new();
+
+    private async Task OnGridCreate(GridCommandEventArgs args)
+    {
+        var createdItem = (Product)args.Item;
+
+        await GridProductService.Create(createdItem);
+    }
+
+    private async Task OnGridDelete(GridCommandEventArgs args)
+    {
+        var deletedItem = (Product)args.Item;
+
+        await GridProductService.Delete(deletedItem);
+    }
+
+    private async Task OnGridRead(GridReadEventArgs args)
+    {
+        DataSourceResult result = await GridProductService.Read(args.Request);
+
+        args.Data = result.Data;
+        args.Total = result.Total;
+        args.AggregateResults = result.AggregateResults;
+    }
+
+    private async Task OnGridUpdate(GridCommandEventArgs args)
+    {
+        var updatedItem = (Product)args.Item;
+
+        await GridProductService.Update(updatedItem);
+    }
+#end
+
+#crud-service-and-model
+    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; }
+    }
+
+    #region Data Service
+
+    public class ProductService
+    {
+        private List<Product> Items { get; set; } = new();
+
+        private int LastId { get; set; }
+
+        public async Task<int> Create(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            product.Id = ++LastId;
+
+            Items.Insert(0, product);
+
+            return LastId;
+        }
+
+        public async Task<bool> Delete(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            if (Items.Contains(product))
+            {
+                Items.Remove(product);
+
+                return true;
+            }
+
+            return false;
+        }
+
+        public async Task<List<Product>> Read()
+        {
+            await SimulateAsyncOperation();
+
+            return Items;
+        }
+
+        public async Task<DataSourceResult> Read(DataSourceRequest request)
+        {
+            return await Items.ToDataSourceResultAsync(request);
+        }
+
+        public async Task<bool> Update(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);
+
+            if (originalItemIndex != -1)
+            {
+                Items[originalItemIndex] = product;
+                return true;
+            }
+
+            return false;
+        }
+
+        private async Task SimulateAsyncOperation()
+        {
+            await Task.Delay(100);
+        }
+
+        public ProductService(int itemCount = 5)
+        {
+            Random rnd = Random.Shared;
+
+            for (int i = 1; i <= itemCount; i++)
+            {
+                Items.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
+                });
+            }
+        }
+    }
+
+    #endregion Data Service
+#end
+
+#advanced-example-description
+* Use the `OnCreate`, `OnDelete` and `OnUpdate` events to make changes to the Grid data source.
+* Use the `OnModelInit` event to provide [model instances](slug:grid-editing-overview#item-instances) with some default values before add and edit operations start.
+* Use the `OnAdd` event to provide some default values before add operations start.
+* Reload the Grid `Data` after making changes to the data source. When [using the Grid `OnRead` event, the component will fire `OnRead` and rebind automatically](#basic).
+* Apply the user changes to the Grid `Data` parameter to spare one read request to the database.
+* Use `DataAnnotations` validation for the `Name` and `ReleaseDate` properties.
+* Define the `Id` column as non-editable.
+* Customize the `Description` and `Discontinued` column editors without using an `EditorTemplate`.
+* Render the **Delete** command button conditionally if `Discontinued` is `true`.
+* Confirm **Delete** commands with the built-in Grid Dialog. You can also [intercept item deletion with a separate Dialog or a custom popup](slug:grid-kb-customize-delete-confirmation-dialog).
+* Cancel the `OnAdd` and `OnEdit` events conditionally, so that the Grid does not go into edit mode.
+* Cancel the `OnCancel` event conditionally, so that the Grid remains in edit mode and the user doesn't lose their unsaved changes.
+#end
+
+#advanced-example-parameters
+             OnAdd="@OnGridAdd"
+             OnCancel="@OnGridCancel"
+             OnCreate="@OnGridCreate"
+             OnDelete="@OnGridDelete"
+             OnEdit="@OnGridEdit"
+             OnModelInit="@OnGridModelInit"
+             OnUpdate="@OnGridUpdate"
+             Pageable="true"
+             PageSize="5"
+             Sortable="true">
+#end
+
+#advanced-example-toolbar
+    <GridToolBarTemplate>
+        <GridCommandButton Command="Add" ThemeColor="@AddEditButtonThemeColor">Add Item</GridCommandButton>
+        <span class="k-separator"></span>
+        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ShouldCancelOnAddEdit" /> Cancel OnAdd and OnEdit Events</label>
+        <span class="k-separator"></span>
+        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@GridConfirmDelete" /> Confirm Delete Commands</label>
+        <span class="k-separator"></span>
+        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ShouldConfirmOnCancel" /> Confirm Cancel Commands</label>
+    </GridToolBarTemplate>
+#end
+
+#advanced-example-columns
+        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
+        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
+        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" />
+        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px" EditorType="@GridEditorType.Switch" />
+#end
+
+#advanced-example-code
+    private List<Product> GridData { get; set; } = new();
+
+    private ProductService GridProductService { get; set; } = new();
+
+    [CascadingParameter]
+    public DialogFactory? TelerikDialogs { get; set; }
+
+    #region Example Settings
+
+    private bool GridConfirmDelete { get; set; } = true;
+    private bool ShouldCancelOnAddEdit { get; set; }
+    private bool ShouldConfirmOnCancel { get; set; } = true;
+
+    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;
+
+    #endregion Example Settings
+
+    #region Grid Events
+
+    private void OnGridAdd(GridCommandEventArgs args)
+    {
+        if (ShouldCancelOnAddEdit)
+        {
+            args.IsCancelled = true;
+        }
+
+        var newItem = (Product)args.Item;
+        newItem.Name = "Value from OnAdd";
+    }
+
+    private async Task OnGridCancel(GridCommandEventArgs args)
+    {
+        if (ShouldConfirmOnCancel && TelerikDialogs != null)
+        {
+            bool shouldContinue = await TelerikDialogs.ConfirmAsync("Do you want to discard your changes?");
+
+            if (!shouldContinue)
+            {
+                args.IsCancelled = true;
+            }
+        }
+    }
+
+    private async Task OnGridCreate(GridCommandEventArgs args)
+    {
+        var createdItem = (Product)args.Item;
+
+        // Create the item in the database.
+        int newId = await GridProductService.Create(createdItem);
+
+        // Reload the data from the database.
+        GridData = await GridProductService.Read();
+        // OR
+        // Create the item in the local data instead of reloading.
+        //createdItem.Id = newId;
+        //GridData.Insert(0, createdItem);
+    }
+
+    private async Task OnGridDelete(GridCommandEventArgs args)
+    {
+        var deletedItem = (Product)args.Item;
+
+        // Delete the item in the database.
+        await GridProductService.Delete(deletedItem);
+
+        // Reload the data from the database.
+        GridData = await GridProductService.Read();
+        // OR
+        // Delete the item in the local data instead of reloading.
+        //GridData.Remove(deletedItem);
+    }
+
+    private void OnGridEdit(GridCommandEventArgs args)
+    {
+        if (ShouldCancelOnAddEdit)
+        {
+            args.IsCancelled = true;
+        }
+    }
+
+    private Product OnGridModelInit()
+    {
+        return new Product() { Description = "Value from OnModelInit" };
+    }
+
+    private async Task OnGridUpdate(GridCommandEventArgs args)
+    {
+        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 instead of reloading.
+        //int originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
+        //if (originalItemIndex != -1)
+        //{
+        //    GridData[originalItemIndex] = updatedItem;
+        //}
+    }
+
+    #endregion Grid Events
+
+    protected override async Task OnInitializedAsync()
+    {
+        GridData = await GridProductService.Read();
+    }
+#end
diff --git a/_contentTemplates/treelist/editing.md b/_contentTemplates/treelist/editing.md
new file mode 100644
index 0000000000..9c8e486d24
--- /dev/null
+++ b/_contentTemplates/treelist/editing.md
@@ -0,0 +1,475 @@
+#overview-required
+
+> Make sure to read the [TreeList CRUD Operations](slug:treelist-editing-overview) article first.
+
+#end
+
+#without-commands
+
+Without using the above command buttons, the application can:
+
+* [Manage add or edit mode programmatically](slug:grid-kb-add-edit-state) through the [TreeList state](slug:treelist-state).
+* Modify data items directly in the TreeList data source. [Rebind the TreeList](slug:common-features-data-binding-overview#refresh-data) afterwards.
+
+#end
+
+#basic-example-description
+* Use the `OnCreate`, `OnDelete` and `OnUpdate` events to make changes to the TreeList data source.
+* Query the data service and reload the TreeList `Data` when the create, delete, or update operation is complete.
+* Use `DataAnnotations` validation for some model class properties.
+* Define the `Id` column as non-editable.
+* Customize the `Notes` column editor without using an `EditorTemplate`.
+* Confirm **Delete** commands with the built-in TreeList Dialog. You can also [intercept item deletion with a separate Dialog or a custom popup](slug:grid-kb-customize-delete-confirmation-dialog).
+* Override the `Equals()` method of the TreeList model class to prevent collapsing of updated items.
+* Toggle the `HasChildren` property value of parent items when they lose all their children or gain their first child item.
+* Delete all children of a deleted parent item.
+#end
+
+#basic-example-parameters-columns
+                 OnCreate="@OnTreeListCreate"
+                 OnDelete="@OnTreeListDelete"
+                 OnUpdate="@OnTreeListUpdate"
+                 Height="400px">
+    <TreeListToolBarTemplate>
+        <TreeListCommandButton Command="Add">Add Item</TreeListCommandButton>
+    </TreeListToolBarTemplate>
+    <TreeListColumns>
+        <TreeListColumn Field="@nameof(Employee.Id)" Editable="false" Width="60px" />
+        <TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" />
+        <TreeListColumn Field="@nameof(Employee.Notes)" EditorType="@TreeListEditorType.TextArea" Width="120px">
+            <Template>
+                @{ var dataItem = (Employee)context; }
+                <div style="white-space:pre">@dataItem.Notes</div>
+            </Template>
+        </TreeListColumn>
+        <TreeListColumn Field="@nameof(Employee.Salary)" DisplayFormat="{0:C2}" Width="130px" />
+        <TreeListColumn Field="@nameof(Employee.HireDate)" DisplayFormat="{0:d}" Width="140px" />
+        <TreeListColumn Field="@nameof(Employee.IsDriver)" Width="80px" />
+#end
+
+#basic-example-code
+    private IEnumerable<Employee>? TreeListData { get; set; }
+
+    private EmployeeService TreeListEmployeeService { get; set; } = new();
+
+    private async Task OnTreeListCreate(TreeListCommandEventArgs args)
+    {
+        var createdItem = (Employee)args.Item;
+        var parentItem = (Employee?)args.ParentItem;
+
+        await TreeListEmployeeService.Create(createdItem, parentItem);
+
+        TreeListData = await TreeListEmployeeService.Read();
+    }
+
+    private async Task OnTreeListDelete(TreeListCommandEventArgs args)
+    {
+        var deletedItem = (Employee)args.Item;
+
+        await TreeListEmployeeService.Delete(deletedItem);
+
+        TreeListData = await TreeListEmployeeService.Read();
+    }
+
+    private async Task OnTreeListUpdate(TreeListCommandEventArgs args)
+    {
+        var updatedItem = (Employee)args.Item;
+
+        await TreeListEmployeeService.Update(updatedItem);
+
+        TreeListData = await TreeListEmployeeService.Read();
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        TreeListData = await TreeListEmployeeService.Read();
+    }
+#end
+
+#flat-crud-service-and-model
+    public class Employee
+    {
+        public int Id { get; set; }
+        public int? ParentId { get; set; }
+        public bool HasChildren { get; set; }
+        [Required]
+        public string Name { get; set; } = string.Empty;
+        public string Notes { get; set; } = string.Empty;
+        [Required]
+        public decimal? Salary { get; set; }
+        [Required]
+        public DateTime? HireDate { get; set; }
+        public bool IsDriver { get; set; }
+
+        public override bool Equals(object? obj)
+        {
+            return obj is Employee && ((Employee)obj).Id == Id;
+        }
+
+        public override int GetHashCode()
+        {
+            return base.GetHashCode();
+        }
+    }
+
+    #region Data Service
+
+    public class EmployeeService
+    {
+        private List<Employee> Items { get; set; } = new();
+
+        private readonly int TreeLevelCount;
+        private readonly int RootItemCount;
+        private readonly int ChildItemCount;
+
+        private int LastId { get; set; }
+        private Random Rnd { get; set; } = Random.Shared;
+
+        public async Task<int> Create(Employee createdEmployee, Employee? parentEmployee)
+        {
+            await SimulateAsyncOperation();
+
+            createdEmployee.Id = ++LastId;
+            createdEmployee.ParentId = parentEmployee?.Id;
+
+            Items.Insert(0, createdEmployee);
+
+            if (parentEmployee != null)
+            {
+                parentEmployee.HasChildren = true;
+            }
+
+            return LastId;
+        }
+
+        public async Task<bool> Delete(Employee deletedEmployee)
+        {
+            await SimulateAsyncOperation();
+
+            if (Items.Contains(deletedEmployee))
+            {
+                DeleteChildren(deletedEmployee.Id);
+                Items.Remove(deletedEmployee);
+
+                if (deletedEmployee.ParentId.HasValue && !Items.Any(x => x.ParentId == deletedEmployee.ParentId.Value))
+                {
+                    Items.First(x => x.Id == deletedEmployee.ParentId.Value).HasChildren = false;
+                }
+
+                return true;
+            }
+
+            return false;
+        }
+
+        public async Task<List<Employee>> Read()
+        {
+            await SimulateAsyncOperation();
+
+            return Items;
+        }
+
+        public async Task<DataSourceResult> Read(DataSourceRequest request)
+        {
+            return await Items.ToDataSourceResultAsync(request);
+        }
+
+        public async Task<bool> Update(Employee updatedEmployee)
+        {
+            await SimulateAsyncOperation();
+
+            int originalItemIndex = Items.FindIndex(x => x.Id == updatedEmployee.Id);
+
+            if (originalItemIndex != -1)
+            {
+                Items[originalItemIndex] = updatedEmployee;
+                return true;
+            }
+
+            return false;
+        }
+
+        private async Task SimulateAsyncOperation()
+        {
+            await Task.Delay(100);
+        }
+
+        private void DeleteChildren(int parentId)
+        {
+            List<Employee> children = Items.Where(x => x.ParentId == parentId).ToList();
+
+            foreach (Employee child in children)
+            {
+                DeleteChildren(child.Id);
+            }
+
+            Items.RemoveAll(x => x.ParentId == parentId);
+        }
+
+        private void PopulateChildren(List<Employee> items, int? parentId, int level)
+        {
+            int itemCount = level == 1 ? RootItemCount : ChildItemCount;
+
+            for (int i = 1; i <= itemCount; i++)
+            {
+                int itemId = ++LastId;
+
+                items.Add(new Employee()
+                {
+                    Id = itemId,
+                    ParentId = parentId,
+                    HasChildren = level < TreeLevelCount,
+                    Name = $"Employee Name {itemId}", // {level}-{i}
+                    Notes = $"Multi-line\nnotes {itemId}",
+                    Salary = Rnd.Next(1_000, 10_000) * 1.23m,
+                    HireDate = DateTime.Today.AddDays(-Rnd.Next(365, 3650)),
+                    IsDriver = itemId % 2 == 0
+                });
+
+                if (level < TreeLevelCount)
+                {
+                    PopulateChildren(items, itemId, level + 1);
+                }
+            }
+        }
+
+        public EmployeeService(int treeLevelCount = 3, int rootItemCount = 3, int childItemCount = 2)
+        {
+            TreeLevelCount = treeLevelCount;
+            RootItemCount = rootItemCount;
+            ChildItemCount = childItemCount;
+
+            List<Employee> items = new();
+            PopulateChildren(items, null, 1);
+
+            Items = items;
+        }
+    }
+
+    #endregion Data Service
+#end
+
+#hierarchical-crud-service-and-model
+    public class Employee
+    {
+        public int Id { get; set; }
+        public bool HasChildren { get; set; }
+        public List<Employee>? Items { get; set; }
+        [Required]
+        public string Name { get; set; } = string.Empty;
+        public string Notes { get; set; } = string.Empty;
+        [Required]
+        public decimal? Salary { get; set; }
+        [Required]
+        public DateTime? HireDate { get; set; }
+        public bool IsDriver { get; set; }
+
+        public override bool Equals(object? obj)
+        {
+            return obj is Employee && ((Employee)obj).Id == Id;
+        }
+
+        public override int GetHashCode()
+        {
+            return base.GetHashCode();
+        }
+    }
+
+    #region Data Service
+
+    public class EmployeeService
+    {
+        private List<Employee> Items { get; set; } = new();
+
+        private readonly int TreeLevelCount;
+        private readonly int RootItemCount;
+        private readonly int ChildItemCount;
+
+        private int LastId { get; set; }
+        private readonly Random Rnd = Random.Shared;
+
+        public async Task<int> Create(Employee employee, Employee? parentEmployee)
+        {
+            await SimulateAsyncOperation();
+
+            employee.Id = ++LastId;
+
+            if (parentEmployee != null)
+            {
+                parentEmployee.HasChildren = true;
+                parentEmployee.Items = parentEmployee.Items ?? new List<Employee>();
+                parentEmployee.Items.Insert(0, employee);
+            }
+            else
+            {
+                Items.Insert(0, employee);
+            }
+
+            return LastId;
+        }
+
+        public async Task<bool> Delete(Employee employee)
+        {
+            await SimulateAsyncOperation();
+
+            FindItem(Items, employee);
+
+            if (FoundChildItem != null)
+            {
+                if (FoundParentItem != null)
+                {
+                    FoundParentItem?.Items?.Remove(FoundChildItem);
+                    if (FoundParentItem?.Items?.Count == 0)
+                    {
+                        FoundParentItem.Items = null;
+                        FoundParentItem.HasChildren = false;
+                    }
+                }
+                else
+                {
+                    Items.Remove(FoundChildItem);
+                }
+
+                ResetFoundItems();
+
+                return true;
+            }
+
+            return false;
+        }
+
+        public async Task<List<Employee>> Read()
+        {
+            await SimulateAsyncOperation();
+
+            return Items;
+        }
+
+        public async Task<DataSourceResult> Read(DataSourceRequest request)
+        {
+            return await Items.ToDataSourceResultAsync(request);
+        }
+
+        public async Task<bool> Update(Employee employee)
+        {
+            await SimulateAsyncOperation();
+
+            FindItem(Items, employee);
+
+            if (FoundChildItem != null)
+            {
+                if (FoundParentItem != null)
+                {
+                    FoundParentItem.Items![FoundChildItemIndex] = employee;
+                }
+                else
+                {
+                    Items[FoundChildItemIndex] = employee;
+                }
+
+                ResetFoundItems();
+
+                return true;
+            }
+
+            return false;
+        }
+
+        private async Task SimulateAsyncOperation()
+        {
+            await Task.Delay(100);
+        }
+
+        private Employee? FoundParentItem { get; set; }
+        private int FoundChildItemIndex { get; set; }
+        private Employee? FoundChildItem { get; set; }
+
+        private void ResetFoundItems()
+        {
+            FoundParentItem = null;
+            FoundChildItemIndex = default;
+            FoundChildItem = null;
+        }
+
+        private void FindItem(List<Employee> items, Employee item)
+        {
+            Employee? parentCandidate;
+
+            for (int i = 0; i < items.Count; i++)
+            {
+                if (items[i].Id == item.Id)
+                {
+                    FoundChildItemIndex = i;
+                    FoundChildItem = item;
+                    return;
+                }
+
+                if (items[i].Items?.Count > 0)
+                {
+                    parentCandidate = items[i];
+                    FindItem(items[i].Items!, item);
+
+                    if (FoundChildItem != null)
+                    {
+                        if (parentCandidate.Items!.Contains(FoundChildItem))
+                        {
+                            FoundParentItem = parentCandidate;
+                        }
+
+                        return;
+                    }
+                }
+            }
+        }
+
+        private void PopulateItems(List<Employee> items, int level)
+        {
+            for (int i = 1; i <= (level == 1 ? RootItemCount : ChildItemCount); i++)
+            {
+                var itemId = ++LastId;
+
+                var newItem = new Employee()
+                {
+                    Id = itemId,
+                    HasChildren = level < TreeLevelCount,
+                    Name = $"Employee Name {itemId}", // {level}-{i}
+                    Notes = $"Multi-line\nnotes {itemId}",
+                    Salary = Rnd.Next(1_000, 10_000) * 1.23m,
+                    HireDate = DateTime.Today.AddDays(-Rnd.Next(365, 3650)),
+                    IsDriver = itemId % 2 == 0
+                };
+
+                items.Add(newItem);
+            }
+
+            if (level < TreeLevelCount)
+            {
+                PopulateChildren(items, level + 1);
+            }
+        }
+
+        private void PopulateChildren(List<Employee> items, int level)
+        {
+            foreach (var item in items)
+            {
+                item.Items = new List<Employee>();
+
+                PopulateItems(item.Items, level);
+            }
+        }
+
+        public EmployeeService(int treeLevelCount = 3, int rootItemCount = 3, int childItemCount = 2)
+        {
+            TreeLevelCount = treeLevelCount;
+            RootItemCount = rootItemCount;
+            ChildItemCount = childItemCount;
+
+            List<Employee> items = new();
+            PopulateItems(items, 1);
+
+            Items = items;
+        }
+    }
+
+    #endregion Data Service
+#end
\ No newline at end of file
diff --git a/_contentTemplates/treelist/state.md b/_contentTemplates/treelist/state.md
index 98bf0a43e4..07ee74efe1 100644
--- a/_contentTemplates/treelist/state.md
+++ b/_contentTemplates/treelist/state.md
@@ -1,5 +1,5 @@
 #initial-state
->tip If you want to set an initial state to the TreeList, use a similar snippet, but in the [`OnStateInit event`](slug:treelist-state#set-default-initial-state)
+>tip If you want to set an initial state to the TreeList, use a similar snippet, but in the [`OnStateInit event`](slug:treelist-state#onstateinit)
 #end
 
 
@@ -407,6 +407,106 @@
 }
 #end
 
+#search-from-code
+@using Telerik.DataSource
+
+<TelerikTreeList @ref="@TreeListRef"
+                 Data="@TreeListData"
+                 IdField="@nameof(SampleModel.Id)"
+                 ParentIdField="@nameof(SampleModel.ParentId)"
+                 Pageable="true"
+                 Sortable="true">
+    <TreeListToolBarTemplate>
+        <TreeListSearchBox />
+        <TelerikButton Icon="@SvgIcon.Search"
+                       ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
+                       OnClick="@OnSearchButtonClick">Search Programmatically</TelerikButton>
+        <TelerikButton Icon="@SvgIcon.X"
+                       OnClick="@OnClearButtonClick">Clear Search</TelerikButton>
+    </TreeListToolBarTemplate>
+    <TreeListColumns>
+        <TreeListColumn Field="@nameof(SampleModel.Name)" Expandable="true" />
+        <TreeListColumn Field="@nameof(SampleModel.Description)" />
+    </TreeListColumns>
+</TelerikTreeList>
+
+@code {
+    private TelerikTreeList<SampleModel>? TreeListRef { get; set; }
+
+    private List<SampleModel> TreeListData { get; set; } = new();
+
+    private async Task OnSearchButtonClick()
+    {
+        if (TreeListRef != null)
+        {
+            var treelistState = TreeListRef.GetState();
+
+            var searchString = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)}";
+
+            var cfd = new CompositeFilterDescriptor();
+
+            cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
+            cfd.FilterDescriptors = new FilterDescriptorCollection();
+
+            // Add one FilterDesccriptor for each string column
+            cfd.FilterDescriptors.Add(new FilterDescriptor()
+            {
+                Member = nameof(SampleModel.Name),
+                MemberType = typeof(string),
+                Operator = FilterOperator.Contains,
+                Value = searchString
+            });
+            cfd.FilterDescriptors.Add(new FilterDescriptor()
+            {
+                Member = nameof(SampleModel.Description),
+                MemberType = typeof(string),
+                Operator = FilterOperator.Contains,
+                Value = searchString
+            });
+
+            treelistState.SearchFilter = cfd;
+
+            await TreeListRef.SetStateAsync(treelistState);
+        }
+    }
+
+    private async Task OnClearButtonClick()
+    {
+        if (TreeListRef != null)
+        {
+            var treelistState = TreeListRef.GetState();
+
+            (treelistState.SearchFilter as CompositeFilterDescriptor)?.FilterDescriptors.Clear();
+
+            await TreeListRef.SetStateAsync(treelistState);
+        }
+    }
+
+    protected override void OnInitialized()
+    {
+        for (int i = 1; i <= 500; i++)
+        {
+            TreeListData.Add(new SampleModel()
+            {
+                Id = i,
+                ParentId = i <= 5 ? null : Random.Shared.Next(1, 6),
+                Name = $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} " +
+                    $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} {i}",
+                Description = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} " +
+                    $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} {i}"
+            });
+        }
+    }
+
+    public class SampleModel
+    {
+        public int Id { get; set; }
+        public int? ParentId { get; set; }
+        public string Name { get; set; } = string.Empty;
+        public string Description { get; set; } = string.Empty;
+    }
+}
+#end
 
 #expand-items-from-code
 @*Expand a root level item on a button click*@
@@ -781,4 +881,8 @@
         return await Task.FromResult(data);
     }
 }
-#end
\ No newline at end of file
+#end
+
+#statechanged-possible-prop-values
+The possible values for the `PropertyName` are `SortDescriptors`, `FilterDescriptors`, `SearchFilter`, `Page`, `Skip`, `ColumnStates`, `ExpandedItems`, `InsertedItem`, `OriginalEditItem`, `EditItem`.
+#end
diff --git a/components/grid/columns/auto-generated.md b/components/grid/columns/auto-generated.md
index c3a26bebd3..02fb8b5023 100644
--- a/components/grid/columns/auto-generated.md
+++ b/components/grid/columns/auto-generated.md
@@ -192,7 +192,7 @@ This example shows how to:
 * Make multiple selection
 * Add paging to the Grid
 
->caption Observe the behavior of auto-generated columns with [Editing operations](slug:components/grid/editing/overview), [Selection](slug:grid-selection-overview), [Paging](slug:components/grid/features/paging) and using the custom attributes.
+>caption Observe the behavior of auto-generated columns with [Editing operations](slug:grid-editing-overview), [Selection](slug:grid-selection-overview), [Paging](slug:components/grid/features/paging) and using the custom attributes.
 
 ````RAZOR
 @using System.ComponentModel.DataAnnotations
diff --git a/components/grid/columns/bound.md b/components/grid/columns/bound.md
index 32f647d855..cfa8fbd76d 100644
--- a/components/grid/columns/bound.md
+++ b/components/grid/columns/bound.md
@@ -108,8 +108,8 @@ You can use the following properties on bound columns:
 
 ### Data Operations
 
-* `Editable` - (defaults to `true`) - set it to `true` or `false` to allow or prevent [editing](slug:components/grid/editing/overview) of this field. To edit data, you also need a [CommandColumn](slug:components/grid/columns/command).
-* `EditorType` - set the [editor component for `string` or `DateTime` columns](slug:components/grid/editing/overview#customize-the-editor-fields) when an [`EditorTemplate`](slug:grid-templates-editor) is not used.
+* `Editable` - (defaults to `true`) - set it to `true` or `false` to allow or prevent [editing](slug:grid-editing-overview) of this field. To edit data, you also need a [CommandColumn](slug:components/grid/columns/command).
+* `EditorType` - set the [editor component for `string` or `DateTime` columns](slug:grid-editing-overview#column-editors) when an [`EditorTemplate`](slug:grid-templates-editor) is not used.
 * `Filterable` - (defaults to `true`) - set this to `false` so a [filterable](slug:components/grid/filtering) Grid will not let the user filter that particular column.
 * `FilterEditorType` - (defaults to `GridFilterEditorType.DatePicker`) - determines if the default filtering component of a `DateTime` column will be a DatePicker or a DateTimePicker.
 * `FilterEditorFormat` - sets the `Format` of the filtering component as a `string`. Works for DateTime and numeric columns. Do not use a placeholder (e.g. set `"D"`, not `"{0:D}"`).
diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md
index 0ab46ac856..5d8fafd63e 100644
--- a/components/grid/columns/command.md
+++ b/components/grid/columns/command.md
@@ -10,7 +10,7 @@ position: 1
 
 # Grid Command Column
 
-The command column of a grid allows you to initiate [inline](slug:components/grid/editing/inline) or [popup](slug:components/grid/editing/popup) editing, or to execute your own commands.
+The command column of a grid allows you to initiate [inline](slug:grid-editing-inline) or [popup](slug:grid-editing-popup) editing, or to execute your own commands.
 
 To define it, add a `GridCommandColumn` in the `GridColumns` collection of a grid. The command column takes a collection of `GridCommandButton` instances that invoke the commands. It also provides the data item `context` and a `Title` property to set its header text.
 
@@ -33,22 +33,22 @@ The `GridCommandButton` tag offers the following features:
 
 * `Command` - the command that will be invoked. Can be one of the built-in commands (see below), or a custom command name.
 * `Icon` - the command button icon, which can be a font icon, an SVG icon or a custom icon. Use in the same way as the [Button component `Icon`](slug:button-icons).
-* `OnClick` - the event handler that the button will fire. If used on a built-in command, this handler will fire before the [corresponding CRUD event](slug:components/grid/editing/overview). Cancelling it will prevent the built-in CRUD event from firing.
+* `OnClick` - the event handler that the button will fire. If used on a built-in command, this handler will fire before the [corresponding CRUD event](slug:grid-editing-overview). Cancelling it will prevent the built-in CRUD event from firing.
 * `ShowInEdit` - a boolean property indicating whether the button is visible only in edit mode or only in display mode.
 * `ChildContent` - the text the button will render. You can also place it between the command button's opening and closing tags.
 * You can customize the appearance of the `GridCommandButton` by applying the [appearance attributes available for the TelerikButton](slug:button-appearance).
 
 ### Built-in Commands
 
-There are four built-in commands:
+There are five built-in commands:
 
 * `Add` - initiates the creation of a new item.
 * `Edit` - initiates the inline or popup editing (depending on the GridEditMode configuration of the grid).
-* `Delete` - initiates the deletion of an existing item. You can also enable a [delete confirmation dialog](slug:grid-delete-confirmation).
+* `Delete` - initiates the [deletion of an existing item](slug:grid-editing-overview#delete-operations).
 * `Save` - performs the actual update operation after the data has been changed. Triggers the `OnUpdate` or `OnCreate` event so you can perform the data source operation. Which event is triggered depends on whether the item was created or edited.
 * `Cancel` - aborts the current operation (edit or insert).
 
-> The `Add` and `Edit` commands require [enabled editing](slug:components/grid/editing/overview).
+> All commands, except `Delete` require [enabled editing](slug:grid-editing-overview).
 
 ### The OnClick handler
 
diff --git a/components/grid/columns/visible.md b/components/grid/columns/visible.md
index 34d158eadb..1eb6c67f93 100644
--- a/components/grid/columns/visible.md
+++ b/components/grid/columns/visible.md
@@ -67,7 +67,7 @@ To hide a Grid column set its `Visible` parameter to `false`. To hide a column b
 
 Non-visible columns (`Visible="false"`) will have the following behavior:
 
-* Will not be [editable](slug:components/grid/editing/overview).
+* Will not be [editable](slug:grid-editing-overview).
 * Will not be exported in [excel export](slug:grid-export-excel).
 * Will not be visible when the data is [grouped](slug:components/grid/features/grouping).
 * [Templates](slug:components/grid/features/templates) will not be rendered.
diff --git a/components/grid/data-binding.md b/components/grid/data-binding.md
index d8cb6d8b57..ce24d1a9ab 100644
--- a/components/grid/data-binding.md
+++ b/components/grid/data-binding.md
@@ -5,7 +5,7 @@ description: Data bind the Blazor Grid to any of the supported data sources.
 slug: grid-data-binding
 tags: telerik,blazor,grid,data,binding,databind,databinding
 published: true
-position: 11
+position: 7
 ---
 
 # Grid Data Binding
@@ -43,7 +43,7 @@ The following list of resources provides examples for data binding a grid in var
 
 * **OData** data source - an extension method we provide lets you make OData v4 queries as shown in the following example: [Grid and OData](https://github.com/telerik/blazor-ui/tree/master/grid/odata).
 
-* **DataTable**, **ExpandoObject** collection - If you don't have actual strongly typed models (yet) and you use `ExpandoObject`, or your backend comes from an older technology and still returns `DataTable`s, the grid can accommodate such dynamic data types. You can get started from our examples on how to [bind the Grid to ExpandoObject collection](slug:grid-kb-binding-to-expando-object) and [bind the Grid to a DataTable](https://demos.telerik.com/blazor-ui/grid/data-table), which also support [editing](slug:components/grid/editing/overview).
+* **DataTable**, **ExpandoObject** collection - If you don't have actual strongly typed models (yet) and you use `ExpandoObject`, or your backend comes from an older technology and still returns `DataTable`s, the grid can accommodate such dynamic data types. You can get started from our examples on how to [bind the Grid to ExpandoObject collection](slug:grid-kb-binding-to-expando-object) and [bind the Grid to a DataTable](https://demos.telerik.com/blazor-ui/grid/data-table), which also support [editing](slug:grid-editing-overview).
 
 * **gRPC** - the gRPC tooling supports .NET Core, and as of mid-June 2020, there is a package that brings it to WebAssembly. You can find a basic example and more resources to get you started with gRPC in Blazor in the [Grid Data from gRPC Sample Project](https://github.com/telerik/blazor-ui/tree/master/common/grpc-example).
 
diff --git a/components/grid/editing/built-in-dialogs/delete-confirmation.md b/components/grid/editing/built-in-dialogs/delete-confirmation.md
deleted file mode 100644
index 2d472e92ad..0000000000
--- a/components/grid/editing/built-in-dialogs/delete-confirmation.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Delete Confirmation
-page_title: Grid - Delete Confirmation Dialog
-description: Enable delete confirmation dialog in Grid for Blazor.
-slug: grid-delete-confirmation
-tags: telerik,blazor,grid,delete,confirmation,dialog
-published: True
-position: 3
----
-
-# Delete Confirmation Dialog
-
-This article provides information on how to enable the built-in delete confirmation dialog and how you can create a custom dialog:
-* [Basics](#basics)
-* [Custom Delete Confirmation Dialog](#custom-delete-confirmation-dialog)
-
-## Basics
-
-The built-in delete confirmation dialog triggers before item deletion. You can enable it by setting the `ConfirmDelete` parameter of the Grid to `true`.
-
->caption Enabling of the Delete Confirmation Dialog
-
-````RAZOR
-@* Grid with enabled Delete Confirmation Dialog *@
-
-@using System.ComponentModel.DataAnnotations
-
-<TelerikGrid Data=@MyData Pageable="true" Height="400px"
-             OnDelete="@DeleteHandler" ConfirmDelete="true">
-    <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" />
-        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
-        <GridCommandColumn>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-        </GridCommandColumn>
-    </GridColumns>
-</TelerikGrid>
-
-@code {
-    async Task DeleteHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
-
-        await MyService.Delete(item);
-
-        await GetGridData();
-    }
-
-    public class SampleData
-    {
-        public int ID { get; set; }
-        [Required]
-        public string Name { get; set; }
-    }
-
-    List<SampleData> MyData { get; set; }
-
-    async Task GetGridData()
-    {
-        MyData = await MyService.Read();
-    }
-
-    protected override async Task OnInitializedAsync()
-    {
-        await GetGridData();
-    }
-
-    public static class MyService
-    {
-        private static List<SampleData> _data { get; set; } = new List<SampleData>();
-
-        public static async Task<List<SampleData>> Read()
-        {
-            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 Delete(SampleData itemToDelete)
-        {
-            _data.Remove(itemToDelete);
-        }
-    }
-}
-````
-
-## Custom Delete Confirmation Dialog
-
-@[template](/_contentTemplates/grid/built-in-dialogs.md#delete-confirmation)
-
-
-## 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)
-* [Customize the Delete Confirmation Dialog](slug:grid-kb-customize-delete-confirmation-dialog)
-* [Blazor Grid](slug:grid-overview)
-
diff --git a/components/grid/editing/built-in-dialogs/overview.md b/components/grid/editing/built-in-dialogs/overview.md
deleted file mode 100644
index d53a3209de..0000000000
--- a/components/grid/editing/built-in-dialogs/overview.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: Overview
-page_title: Editing - Built-in Dialogs Overview
-description: Enable built-in dialogs in Grid for Blazor.
-slug: components/grid/features/built-in-dialogs
-tags: telerik,blazor,grid,built,in,dialogs
-published: True
-previous_url: /grid/built-in-dialogs
-position: 0
----
-
-# Grid Built-in Dialogs
-You can enable built-in dialogs in Grid to provide an extra step for the end-user before a Grid operation.
-
-The Grid component can use built-in dialogs for: 
-
-* [delete confirmation](slug:grid-delete-confirmation) - displays a confirmation dialog when the user clicks the "**delete**" command button.
-
-The default texts of the dialogs are exposed in the [localization](slug:globalization-localization) messages of the component, and you can customize them.
-
-## 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)
-* [How to show a Cancel Confirmation Dialog](slug:grid-kb-show-confirm-cancel-dialog)
-* [Blazor Grid](slug:grid-overview)
-
diff --git a/components/grid/editing/images/incell-editing.gif b/components/grid/editing/images/incell-editing.gif
deleted file mode 100644
index 5b67f85ea0..0000000000
Binary files a/components/grid/editing/images/incell-editing.gif and /dev/null differ
diff --git a/components/grid/editing/images/inline-editing.png b/components/grid/editing/images/inline-editing.png
deleted file mode 100644
index b124f7a3e8..0000000000
Binary files a/components/grid/editing/images/inline-editing.png and /dev/null differ
diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md
index 1bc7ed992c..570f0a1c36 100644
--- a/components/grid/editing/incell.md
+++ b/components/grid/editing/incell.md
@@ -2,241 +2,166 @@
 title: InCell Editing
 page_title: Grid - InCell Editing
 description: In-cell editing of data in Grid for Blazor.
-slug: components/grid/editing/incell
-tags: telerik,blazor,grid,in cell,editing
+slug: grid-editing-incell
+tags: telerik, blazor, grid, editing, incell
 published: True
 position: 4
 ---
 
-# Grid InCell Editing
+# Grid In-Cell Editing
 
-In Cell editing allows the user to click cells and type new values immediately like in Excel. There is no need for Edit, Update and Cancel buttons.
+In-cell editing allows users to click Grid data cells and type new values like in Excel. There is no need for command buttons to enter and exit edit mode. Users can quickly move between the editable cells and rows by using keyboard navigation.
 
-Users can use the `Tab`, `Shift+Tab` and `Enter` keys to move between edited cells quickly. If validation is not satisfied, the user cannot exit edit mode, unless they satisfy validation, or cancel changes by pressing `Esc`.
-
-Command columns and non-editable columns are skipped while tabbing.
-
-The InCell edit mode provides a specific user experience and behaves differently than other edit modes. Please review the notes below to get a better understanding of these specifics.
-
-
-#### Sections in this article
-
-* [Basics](#basics)
-* [Event Sequence](#event-sequence)
-* [Incell Editing and Selection](#incell-editing-and-selection)
-* [Editor Template](#editor-template)
+The in-cell edit mode provides a different user experience, compared to the inline and popup edit modes. In-cell edit mode can be more convenient for advanced users, fast users, or users who prefer keyboard navigation rather than clicking command buttons.
 
+@[template](/_contentTemplates/grid/editing.md#overview-required)
 
 ## Basics
 
-To enable InCell editing mode, set the `EditMode` property of the grid to `Telerik.Blazor.GridEditMode.Incell`. You can handle the `OnUpdate`, `OnCreate` and `OnDelete` events to perform the CUD operations, as shown in the example below. 
+To use in-cell Grid editing, [set the Grid `EditMode` parameter to `GridEditMode.Incell`](slug:grid-editing-overview#edit-modes). During in-cell editing, only one table cell is in edit mode at a time. Users can:
 
-To add a new item, you must add a [toolbar](slug:components/grid/features/toolbar) with an `Add` command. `OnCreate` will fire immediately when you click the `Add` button - see [Event Sequence](#event-sequence) below.
+* 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 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.
 
-It is up to the data access logic to save the data once it is changed in the data collection. The example below 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.
+Command columns and non-editable columns are skipped while tabbing.
 
->caption Incell Editing Example. See the code comments for details.
+## Commands
 
-````RAZOR
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
+In-cell add, edit, and delete operations use the following [command buttons](slug:grid-editing-overview#commands):
 
-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.
-<br />
-<strong>Editing is prevented for the first two items.</strong>
+* **Add**
+* **Delete**
 
-<TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px"
-             OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@OnCancelHandler">
-    <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
-    </GridToolBarTemplate>
-    <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
-        <GridColumn Field=@nameof(SampleData.FirstName) Title="Name" />
-        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" />
-        <GridCommandColumn>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-        </GridCommandColumn>
-    </GridColumns>
-</TelerikGrid>
+@[template](/_contentTemplates/grid/editing.md#without-commands)
 
-@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
-        }
+Unlike [inline editing](slug:grid-editing-inline), the in-cell edit mode does not use **Edit**, **Save**, and **Cancel** command buttons.
 
-        Console.WriteLine("Edit event is fired.");
-    }
+## Events
 
-    async Task UpdateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+Users enter and exit in-cell edit mode cell by cell, so the [`OnEdit`, `OnCancel`, and `OnUpdate` events](slug:grid-editing-overview#events) also fire cell by cell.
 
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
+In in-cell edit mode, the `OnAdd` and `OnCreate` events fire immediately one after the other, unless `OnAdd` is cancelled. This means that:
 
-        // update the local view-model data with the service data
-        await GetGridData();
+* The new row is added to the Grid data source before users start editing it.
+* Valid [default values](slug:grid-kb-default-value-for-new-row) are recommended.
+* Users are always editing existing rows, not adding new ones.
+* The [`InsertedItem` property](slug:grid-state#information-in-the-grid-state) of the [Grid state](slug:grid-state) is not used and is always `null`.
+* To [add a new row programmatically and put it in edit mode](slug:grid-kb-add-edit-state), use the `OriginalEditItem`, `EditItem`, and `EditField` properties of the Grid state.
 
-        Console.WriteLine("Update event is fired.");
-    }
+The above algorithm is different from [inline](slug:grid-editing-inline) and [popup](slug:grid-editing-popup) editing where new rows are only added to the data source after users populate them with valid values.
 
-    async Task DeleteHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+## Integration with Other Features
 
-        // perform actual data source operation here through your service
-        await MyService.Delete(item);
+Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:grid-editing-overview#integration-with-other-features).
 
-        // update the local view-model data with the service data
-        await GetGridData();
+### Add, Edit
 
-        Console.WriteLine("Delete event is fired.");
-    }
+This section explains what happens when the component is already in add or edit mode, and the user tries to add or edit another cell.
 
-    async Task CreateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+* If the validation is not satisfied, the component blocks the user action until they complete or cancel the current add or edit operation.
+* If the validation is satisfied, then editing completes and the component fires `OnUpdate`.
 
-        // perform actual data source operation here through your service
-        await MyService.Create(item);
+### Delete, Filter, Group, Page, Search, Sort
 
-        // update the local view-model data with the service data
-        await GetGridData();
+This section explains what happens when the user tries to perform another data operation, while the component is already in add or edit mode.
 
-        Console.WriteLine("Create event is fired.");
-    }
+* If the validation is satisfied, then editing completes and the component fires `OnUpdate`.
+* If the validation is not satisfied, then editing aborts and the component fires `OnCancel`.
 
-    void OnCancelHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
-        Console.WriteLine("Cancel event is fired. Can be useful when people decide to not satisfy validation");
-    }
+### Selection
 
+To enable [row selection](slug:grid-selection-row) with in-cell edit mode, use a [checkbox column](slug:components/grid/columns/checkbox). More information on that can be read in the [Row Selection](slug:grid-selection-row#selection-and-editing-modes) article.
 
-    // 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; }
-    }
+To see how to select the row that is currently in in-cell edit mode without using a `<GridCheckboxColumn />`, see the [Row Selection in Edit with InCell EditMode](slug:grid-kb-row-select-incell-edit) Knowledge Base article.
 
-    public List<SampleData> MyData { get; set; }
+[Cell selection](slug:grid-selection-cell) is not supported with in-cell edit mode.
 
-    async Task GetGridData()
-    {
-        MyData = await MyService.Read();
-    }
+## Examples
 
-    protected override async Task OnInitializedAsync()
-    {
-        await GetGridData();
-    }
+### Basic
 
-    // 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<SampleData> _data { get; set; } = new List<SampleData>();
+The example below shows how to:
 
-        public static async Task Create(SampleData itemToInsert)
-        {
-            itemToInsert.ID = _data.Count + 1;
-            _data.Insert(0, itemToInsert);
-        }
+* Implement in-cell Grid CRUD operations with the simplest and minimal required setup.
+@[template](/_contentTemplates/grid/editing.md#basic-example-description)
 
-        public static async Task<List<SampleData>> Read()
-        {
-            if (_data.Count < 1)
-            {
-                for (int i = 1; i < 50; i++)
-                {
-                    _data.Add(new SampleData()
-                    {
-                        ID = i,
-                        FirstName = "Name " + i.ToString(),
-                        LastName = "Last Name " + i.ToString()
-                    });
-                }
-            }
+>caption Basic Grid in-cell editing configuration
 
-            return await Task.FromResult(_data);
-        }
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikGrid OnRead="@OnGridRead"
+             TItem="@Product"
+             EditMode="@GridEditMode.Incell"
+@[template](/_contentTemplates/grid/editing.md#basic-example-parameters-columns)
+        <GridCommandColumn Width="180px">
+            <GridCommandButton Command="Delete">Delete</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
 
-        public static async Task Update(SampleData itemToUpdate)
-        {
-            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
-            if (index != -1)
-            {
-                _data[index] = itemToUpdate;
-            }
-        }
+@code {
+@[template](/_contentTemplates/grid/editing.md#basic-example-code)
 
-        public static async Task Delete(SampleData itemToDelete)
-        {
-            _data.Remove(itemToDelete);
-        }
-    }
+@[template](/_contentTemplates/grid/editing.md#crud-service-and-model)
 }
 ````
 
->caption InCell editing behavior
+### Advanced
 
-![Blazor Grid Incell Editing](images/incell-editing.gif)
+The example below shows how to:
 
+* Implement in-cell Grid CRUD operations with all available events and various built-in customizations.
+@[template](/_contentTemplates/grid/editing.md#advanced-example-description)
 
-## Event Sequence
+>caption Advanced Grid in-cell editing configuration
 
-* The `OnCreate` event will fire as soon as you click the `Add` button. The Grid will render the new row and enter edit mode for the first editable column (to fire `OnEdit` and let the user alter the column). This means you should have [default values](slug:grid-kb-default-value-for-new-row) that satisfy any initial validation and requirements your models may have.
-
-    * This means that there is no actual inserted item, an item in InCell editing is always in Edit mode, never in Insert mode. Thus, you cannot use the `InsertedItem` field of the Grid [State](slug:grid-state). If you want to insert items programmatically in the Grid, alter the `Data` collection, and use the `OriginalEditItem` feature of the state (see the [Initiate Editing or Inserting of an Item](slug:grid-kb-add-edit-state) example - it can put the InLine and Popup edit modes in Insert mode, but this cannot work for InCell editing).
-
-* The `OnEdit` event fires every time a cell is opened for editing. Until version **2.27**, the event fired **once per row** - when the user edits a cell from a different row.
-
-* The `OnUpdate` event fires every time an edited cell is closed. Until version **2.27**, the event fired **once per row** - when the currently edited row loses focus.
-
-* If there is a cell that is being edited at the moment, clicking on another cell will first close the current cell and fire `OnUpdate`. To start editing the new cell, you need a second click. When the user removes focus from the Grid or the current row, the `OnUpdate` event fires, where the data-access logic can move it to the actual data source. 
-
-* The `OnCancel` event works only when pressing `Esc`. The `Cancel` command button is not supported. Clicking outside the currently edited cell will trigger `OnUpdate` and thus, clicking on the `Cancel` command button will not fire the `OnCancel` event, because an update has already occured.
-
-
-## Incell Editing and Selection
-
-* To enable row selection with InCell Edit Mode, add a `<GridCheckboxColumn />` to the `<Columns>` collection. More information on that can be read in the [Row Selection](slug:grid-selection-row#selection-and-editing-modes) article.
-
-    * To see how to select the row that is being edited in InCell edit mode without using a `<GridCheckboxColumn />` check out the [Row Selection in Edit with InCell EditMode](slug:grid-kb-row-select-incell-edit) Knowledge Base article.
-
-
-## Editor Template
-
-The incell editor template requires a focusable element to maintain the tab order when using the keyboard. If you prevent editing based on a runtime condition, you must provide some focusable element. (Setting `Editable=false` for the entire column does not require a focusable element.) Here is one way to add a focusable non-editable element:
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikGrid Data="@GridData"
+             EditMode="@GridEditMode.Incell"
+@[template](/_contentTemplates/grid/editing.md#advanced-example-parameters)
+@[template](/_contentTemplates/grid/editing.md#advanced-example-toolbar)
+    <GridColumns>
+        <GridColumn Field="@nameof(Product.Id)" Editable="false" Width="60px" />
+        <GridColumn Field="@nameof(Product.Name)" />
+        <GridColumn Field="@nameof(Product.Description)" EditorType="@GridEditorType.TextArea">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <div style="white-space:pre">@dataItem.Description</div>
+            </Template>
+        </GridColumn>
+@[template](/_contentTemplates/grid/editing.md#advanced-example-columns)
+        <GridCommandColumn Title="Commands" Width="180px">
+            @{ var dataItem = (Product)context; }
+            @if (dataItem.Discontinued)
+            {
+                <GridCommandButton Command="Delete" ThemeColor="@DeleteButtonThemeColor">Delete</GridCommandButton>
+            }
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
 
-<div class="skip-repl"></div>
+@code {
+@[template](/_contentTemplates/grid/editing.md#advanced-example-code)
 
-````RAZOR
-<EditorTemplate>
-    @{
-        if (myCurrentEditCondition)
-        {
-            <MyCustomEditor />
-        }
-        else
-        {
-            <div tabindex="0">editing not allowed</div>
-        }
-    }
-</EditorTemplate>
+@[template](/_contentTemplates/grid/editing.md#crud-service-and-model)
+}
 ````
 
 ## See Also
 
 * [Live Demo: Grid InCell Editing](https://demos.telerik.com/blazor-ui/grid/editing-incell)
+* [Grid Editor Template](slug:grid-templates-editor)
+* [Start and End Editing through the Grid State](slug:grid-kb-add-edit-state)
 * [Grid Selection Documentation](slug:grid-selection-overview)
 * [Blazor Grid](slug:grid-overview)
diff --git a/components/grid/editing/inline.md b/components/grid/editing/inline.md
index 1edc97287f..047e99ba57 100644
--- a/components/grid/editing/inline.md
+++ b/components/grid/editing/inline.md
@@ -2,187 +2,145 @@
 title: Inline Editing
 page_title: Grid - Inline Editing
 description: Inline (row) editing of data in Grid for Blazor.
-slug: components/grid/editing/inline
-tags: telerik,blazor,grid,inline,editing
+slug: grid-editing-inline
+tags: telerik, blazor, grid, editing, inline
 published: True
 position: 1
 ---
 
 # Grid Inline Editing
 
-Inline editing lets the user click an [Edit command button](slug:components/grid/columns/command) on the row, and all its editable columns open up for changes. They can then click a `Save` command button to submit the changes to the data access layer. This fires the `OnUpdate` event of the grid where your code receives the updated model so you can work with the data (for example, to call the appropriate method of your service).
+Inline Grid editing lets users modify all values on a Grid row. The edit process starts and ends with clicking of command buttons on the respective row. Inline editing can be more intuitive for beginner users, compared to in-cell editing.
 
-In a similar fashion, the `Cancel` and `Delete` command buttons fire events on the grid to let you handle the data source operations.
+@[template](/_contentTemplates/grid/editing.md#overview-required)
 
-When validation is not satisfied, clicking the Save, Delete or Add buttons will not have effect, but you can still navigate between all fields in the row to complete editing.
+## Basics
 
-You can also cancel the events by setting the `IsCancelled` property of the event arguments to `true`. This lets you prevent the user from editing certain records, inserting or deleting items, based on your application logic.
+To use inline Grid editing, [set the Grid `EditMode` parameter to `GridEditMode.Inline`](slug:grid-editing-overview#edit-modes). During inline editing, only one table row is in edit mode at a time. Users can:
 
-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.
+* Press **Tab** or **Shift** + **Tab** to focus the next or previous editable cell.
+* 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.
 
+## Commands
 
->caption The Command buttons and the grid events let you handle data operations in Inline edit mode (see the code comments for details)
+Inline add, edit, and delete operations use the following [command buttons](slug:grid-editing-overview#commands):
 
-````RAZOR
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
-
-Use the command buttons to control the CUD operations.
-<br />
-<strong>Editing is cancelled for the first two records</strong>.
-
-<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
-             OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
-    <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
-    </GridToolBarTemplate>
-    <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
-        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
-        <GridCommandColumn>
-            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
-        </GridCommandColumn>
-    </GridColumns>
-</TelerikGrid>
+* **Add**
+* **Delete**
+* **Edit**
+* **Save**
+* **Cancel**
 
-@code {
-    void EditHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+@[template](/_contentTemplates/grid/editing.md#without-commands)
 
-        // prevent opening for edit based on condition
-        if (item.ID < 3)
-        {
-            args.IsCancelled = true;// the general approach for cancelling an event
-        }
+In inline edit mode, the Grid commands execute row by row and the corresponding [Grid events](slug:grid-editing-overview#events) also fire row by row. This is similar to [popup editing](slug:grid-editing-popup) and unlike [in-cell editing](slug:grid-editing-incell), where commands and events relate to cells.
 
-        Console.WriteLine("Edit event is fired.");
-    }
+When validation is not satisfied, clicking the **Save**, **Delete** or **Add** command buttons has no effect, but users can still navigate between all input components in the row to complete the editing.
 
-    async Task UpdateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+## Integration with Other Features
 
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
+Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:grid-editing-overview#integration-with-other-features).
 
-        // update the local view-model data with the service data
-        await GetGridData();
+### Add, Edit
 
-        Console.WriteLine("Update event is fired.");
-    }
+This section explains what happens when the component is already in add or edit mode, and the user tries to add or edit another row.
 
-    async Task DeleteHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+* If the validation is not satisfied, the component blocks the user action until they complete or cancel the current add or edit operation.
+* If the validation is satisfied, then editing aborts and the component fires `OnCancel`.
 
-        // perform actual data source operation here through your service
-        await MyService.Delete(item);
+### Delete, Filter, Group, Page, Search, Sort
 
-        // update the local view-model data with the service data
-        await GetGridData();
+If the component is already in add or edit mode, and the user tries to perform another data operation, then editing aborts and the component fires `OnCancel`.
 
-        Console.WriteLine("Delete event is fired.");
-    }
+## Examples
 
-    async Task CreateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+### Basic
 
-        // perform actual data source operation here through your service
-        await MyService.Create(item);
+The example below shows how to:
 
-        // update the local view-model data with the service data
-        await GetGridData();
+* Implement inline Grid CRUD operations with the simplest and minimal required setup.
+@[template](/_contentTemplates/grid/editing.md#basic-example-description)
 
-        Console.WriteLine("Create event is fired.");
-    }
-
-    async Task CancelHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
-
-        // if necessary, perform actual data source operation here through your service
-
-        Console.WriteLine("Cancel event is fired.");
-    }
+>caption Basic Grid inline editing configuration
 
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikGrid OnRead="@OnGridRead"
+             TItem="@Product"
+             EditMode="@GridEditMode.Inline"
+@[template](/_contentTemplates/grid/editing.md#basic-example-parameters-columns)
+        <GridCommandColumn Width="180px">
+            <GridCommandButton Command="Edit">Edit</GridCommandButton>
+            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
+            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+            <GridCommandButton Command="Delete">Delete</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
 
-    // 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; }
-    }
+@code {
+@[template](/_contentTemplates/grid/editing.md#basic-example-code)
 
-    public List<SampleData> MyData { get; set; }
+@[template](/_contentTemplates/grid/editing.md#crud-service-and-model)
+}
+````
 
-    async Task GetGridData()
-    {
-        MyData = await MyService.Read();
-    }
+### Advanced
 
-    protected override async Task OnInitializedAsync()
-    {
-        await GetGridData();
-    }
+The example below shows how to:
 
-    // 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<SampleData> _data { get; set; } = new List<SampleData>();
+* Implement inline Grid CRUD operations with all available events and various built-in customizations.
+@[template](/_contentTemplates/grid/editing.md#advanced-example-description)
 
-        public static async Task Create(SampleData itemToInsert)
-        {
-            itemToInsert.ID = _data.Count + 1;
-            _data.Insert(0, itemToInsert);
-        }
+>caption Advanced Grid inline editing configuration
 
-        public static async Task<List<SampleData>> Read()
-        {
-            if (_data.Count < 1)
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikGrid Data="@GridData"
+             EditMode="@GridEditMode.Inline"
+@[template](/_contentTemplates/grid/editing.md#advanced-example-parameters)
+@[template](/_contentTemplates/grid/editing.md#advanced-example-toolbar)
+    <GridColumns>
+        <GridColumn Field="@nameof(Product.Id)" Editable="false" Width="60px" />
+        <GridColumn Field="@nameof(Product.Name)" />
+        <GridColumn Field="@nameof(Product.Description)" EditorType="@GridEditorType.TextArea">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <div style="white-space:pre">@dataItem.Description</div>
+            </Template>
+        </GridColumn>
+@[template](/_contentTemplates/grid/editing.md#advanced-example-columns)
+        <GridCommandColumn Title="Commands" Width="180px">
+            @{ var dataItem = (Product)context; }
+            <GridCommandButton Command="Edit" ThemeColor="@AddEditButtonThemeColor">Edit</GridCommandButton>
+            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
+            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+            @if (dataItem.Discontinued)
             {
-                for (int i = 1; i < 50; i++)
-                {
-                    _data.Add(new SampleData()
-                    {
-                        ID = i,
-                        Name = "Name " + i.ToString()
-                    });
-                }
+                <GridCommandButton Command="Delete" ThemeColor="@DeleteButtonThemeColor">Delete</GridCommandButton>
             }
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
 
-            return await Task.FromResult(_data);
-        }
-
-        public static async Task Update(SampleData itemToUpdate)
-        {
-            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
-            if (index != -1)
-            {
-                _data[index] = itemToUpdate;
-            }
-        }
+@code {
+@[template](/_contentTemplates/grid/editing.md#advanced-example-code)
 
-        public static async Task Delete(SampleData itemToDelete)
-        {
-            _data.Remove(itemToDelete);
-        }
-    }
+@[template](/_contentTemplates/grid/editing.md#crud-service-and-model)
 }
 ````
 
->caption The result from the code snippet above, after the Edit button was clicked on the fourth row
-
-![Blazor Grid Inline Editing](images/inline-editing.png)
-
->note It is up to the data access logic to save the data once it is changed in the data collection, or to revert changes. The example above showcases the events that allow you to do that. In a real application, the code for handling data operations may be entirely different.
-
 ## See Also
 
-  * [Live Demo: Grid Inline Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline)
-  * [Blazor Grid](slug:grid-overview)
+* [Live Demo: Grid Inline Editing](https://demos.telerik.com/blazor-ui/grid/editing-inline)
+* [Grid Editor Template](slug:grid-templates-editor)
+* [Start and End Editing through the Grid State](slug:grid-kb-add-edit-state)
+* [Blazor Grid](slug:grid-overview)
diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md
index f893608479..5041bfbcc7 100644
--- a/components/grid/editing/overview.md
+++ b/components/grid/editing/overview.md
@@ -2,463 +2,216 @@
 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
+slug: grid-editing-overview
+tags: telerik, blazor, grid, editing
 published: True
+previous_url: /components/grid/editing/built-in-dialogs/delete-confirmation, /components/grid/editing/built-in-dialogs/overview
 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) with different modes and user experience. The component also supports built-in `DataAnnotations` or custom validation. This page describes:
 
-This page explains how to enable editing, use the relevant events and command buttons. There is also a runnable code example.
-
-#### In this article:
-
-- [Basics](#basics)
-- [Events](#events)
-- [Customize The Editor Fields](#customize-the-editor-fields)
-- [Example](#example)
-- [Notes](#notes)
+* [How the create, update, and delete operations work in the Grid](#basics).
+* [What are the available edit modes and how to enable them](#edit-modes).
+* [The applicable Grid commands](#commands).
+* [The applicable Grid events](#events).
+* [How to change the built-in editors for certain data types](#column-editors).
+* [How to refresh the Grid data after add, edit, and delete operations](#rebinding-after-data-changes).
+* [How the Grid CRUD operations integrate with other component features](#integration-with-other-features).
 
 ## Basics
 
-The Grid offers several editing modes with different user experience. Set the `EditMode` property to a member of the `GridEditMode` enum:
-
-* `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 Grid CRUD operations rely on the following algorithm:
 
-## Events
-
-* `OnAdd` - fires when the `Add` [command button](slug:components/grid/columns/command) for a newly added item is clicked. The event is cancellable.
-* `OnCreate` - fires when the `Save` [command button](slug:components/grid/columns/command) for a newly added item is clicked. Cancellable (cancelling it keeps the grid in Insert mode).
-* `OnUpdate` - fires when the `Save` command button is clicked on an existing item. Cancellable (cancelling it keeps the grid in Edit mode). The model reference is a copy of the original data source item.
-* `OnDelete` - fires when the `Delete` command button is clicked. You can also display a [delete confirmation dialog](slug:grid-delete-confirmation) before the deletion.
-* `OnEdit` - fires when the user is about to enter edit mode for an existing row. Cancellable (cancelling it prevents the item from opening for editing).
-* `OnCancel` - fires when the user clicks the `Cancel` command button. Allows you to undo the changes to the data in the view data. Cancellable (keeps the grid in Edit/Insert mode).
-* `OnRead` - fires when the grid needs data - after any data source operation like updating, creating, deleting, filtering, sorting. If you cancel the CUD events, the [OnRead](slug:components/grid/manual-operations) event will not fire.
+1. Users execute [Grid commands (**Edit**, **Save**, **Delete**, and more)](#commands) with the mouse or keyboard.
+1. The Grid fires [events (`OnCreate`, `OnDelete`, `OnUpdate` and more)](#events), which provide information what the user did or how the component data changed.
+1. The application applies the changes to the Grid data source in the above event handlers.
+1. The Grid rebinds to display the latest data.
 
-The CUD event handlers receive an argument of type `GridCommandEventArgs` that exposes the following fields:
+### Model Requirements
 
-* `IsCancelled` - a boolean field indicating whether the grid operation is to be prevented (for example, prevent a row from opening for edit, or from updating the data layer).
-* `IsNew` - a boolean field indicating whether the item was just added through the grid. Lets you differentiate a data source Create operation from Update operation in the `OnClick` event of a command button.
-* `Item` - an object you can cast to your model class to obtain the current data item.
-* `Field` - specific to [InCell editing](slug:components/grid/editing/incell) - indicates which is the model field the user changed when updating data.
-* `Value` - specific to [InCell editing](slug:components/grid/editing/incell) - indicates what is the new value the user changed when updating data.
+Adding or editing rows in the Grid sets the following requirements on the Grid model:
 
-You can initiate editing or inserting of an item from anywhere on the page (buttons outside of the grid, or components in a column template) through the [grid state](slug:grid-kb-add-edit-state).
+* 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 [when the Grid needs to create one](#item-instances). 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`.
+* Self-referencing or inherited properties must not cause `StackOverflowException` or `AmbiguousMatchException` during [programmatic model instance creation](#item-instances).
 
-## Customize The Editor Fields
+## Edit Modes
 
-You can customize the editors rendered in the Grid by providing the `EditorType` attribute, exposed on the `<GridColumn>`, or by using the [Editor Template](slug:grid-templates-editor). The `EditorType` attribute accepts a member of the `GridEditorType` enum:
+The Grid offers several ways to add and edit rows with a different user experience:
 
-| Field data type | GridEditorType enum members              |
-|-----------------|------------------------------------------|
-| **Text**            | `GridEditorType.TextArea`<br> `GridEditorType.TextBox` |
-| **Boolean**         | `GridEditorType.CheckBox`<br> `GridEditorType.Switch` |
-| **DateTime**        | `GridEditorType.DatePicker`<br> `GridEditorType.DateTimePicker`<br> `GridEditorType.TimePicker` |
+* [*In-Cell*](slug:grid-editing-incell)&mdash;users modify the Grid content cell by cell.
+* [*Inline*](slug:grid-editing-inline)&mdash;users modify the Grid content row by row.
+* [*Popup*](slug:grid-editing-popup)&mdash;users modify the Grid content row by row in a modal popup form.
 
+To allow users to add or edit values in the Grid:
 
-````RAZOR
-@* The usage of the EditorType parameter *@
+1. Set the `EditMode` parameter to a [member of the `GridEditMode` enum](slug:telerik.blazor.grideditmode). The default `EditMode` parameter value is `None` and the built-in [`Add` and `Edit` commands](slug://components/grid/columns/command#built-in-commands) don't work.
+1. Define the required [command buttons](#commands) and [events](#events) for the selected edit mode and operations.
 
-@using System.ComponentModel.DataAnnotations
+>caption Set up Grid popup edit mode
 
-<TelerikGrid Data=@MyData 
-             EditMode="@GridEditMode.Inline" 
-             Pageable="true" 
-             Height="400px"
-             OnUpdate="@UpdateHandler" 
-             OnDelete="@DeleteHandler" 
-             OnCreate="@CreateHandler" 
-             OnCancel="@CancelHandler">
-    <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
-    </GridToolBarTemplate>
+````RAZOR.skip-repl
+<TelerikGrid EditMode="@GridEditMode.Popup"
+             OnUpdate="@OnGridUpdate">
     <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
-        <GridColumn Field=@nameof(SampleData.Name) 
-                    EditorType="@GridEditorType.TextArea"
-                    Title="Name" />
         <GridCommandColumn>
-            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+            <GridCommandButton Command="Edit">Edit</GridCommandButton>
         </GridCommandColumn>
     </GridColumns>
 </TelerikGrid>
-
-
-@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<SampleData> MyData { get; set; }
-
-    async Task GetGridData()
-    {
-        MyData = await MyService.Read();
-    }
-
-    protected override async Task OnInitializedAsync()
-    {
-        await GetGridData();
-    }
-
-    public static class MyService
-    {
-        private static List<SampleData> _data { get; set; } = new List<SampleData>();
-
-        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<List<SampleData>> 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
+>tip See the Grid add and edit operations in action in the complete examples for Grid [inline](slug:grid-editing-inline#examples), [in-cell](slug:grid-editing-incell#examples), and [popup](slug:grid-editing-popup#examples) editing.
 
-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.
+> Editing multiple rows at the same time is not supported. You can [render editors in all Grid data cells through column `<Template>`s](slug:grid-kb-edit-all-rows-cells) as an alternative.
 
->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.
+### Delete Operations
 
->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)
+Delete operations provide the same user experience in all Grid edit modes and require the same configuration:
 
-````RAZOR
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@ 
+* [**Delete** command button](#commands).
+* [`OnDelete` event](#events).
+* Optional `ConfirmDelete` Grid parameter. It determines if the component will show a Dialog before firing `OnDelete`, so that users can abort the operation.
 
-Editing is cancelled for the first two records.
-<br />
-<strong>There is a deliberate delay</strong> in the data source operations in this example to mimic real life delays and to showcase the async nature of the calls.
-
-<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="400px"
-             OnAdd="@AddHandler" OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
-    <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
-    </GridToolBarTemplate>
-    <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
-        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
-        <GridCommandColumn>
-            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
-        </GridCommandColumn>
-    </GridColumns>
-</TelerikGrid>
+Delete operations can work even if the Grid `EditMode` parameter value is `None`.
 
-@logger
+>tip See the delete operations in action in the complete examples for Grid [inline](slug:grid-editing-inline#examples), [in-cell](slug:grid-editing-incell#examples), and [popup](slug:grid-editing-popup#examples) editing. Also check how to [customize the Delete Confirmation Dialog](slug:grid-kb-customize-delete-confirmation-dialog).
 
-@code {
-    async Task AddHandler(GridCommandEventArgs args)
-    {
-        //Set default values for new items
-        ((SampleData)args.Item).Name = "New Item Name";
+## Commands
 
-        //Cancel if needed
-        //args.IsCancelled = true;
-    }
+The Grid provides the following built-in commands, which enable users to add, delete, and edit rows:
 
-    async Task EditHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+* `Add`&mdash;adds a new row and puts it in edit mode. Fires the `OnAdd` [event](#events).
+* `Cancel`&mdash;cancels the [row or cell](#edit-modes) changes and exits edit mode. Fires the `OnCancel` event.
+* `Delete`&mdash;deletes a row. Fires the `OnDelete` event.
+* `Edit`&mdash;puts a Grid row or cell in edit mode. Fires the `OnEdit` event.
+* `Save`&mdash;confirms the row or cell changes and exits edit mode, if the user input is valid. Fires the `OnUpdate` event.
 
-        //prevent opening for edit based on condition
-        if (item.ID < 3)
-        {
-            args.IsCancelled = true;//the general approach for cancelling an event
-        }
+Users execute commands in the following ways:
 
-        AppendToLog("Edit", args);
-    }
+* By clicking on [command buttons](slug:components/grid/columns/command#the-gridcommandbutton-tag).
+* By clicking on editable cells in [in-cell edit mode](slug:grid-editing-incell) and then anywhere else on the page.
+* By using the [Grid keyboard navigation](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation).
 
-    async Task UpdateHandler(GridCommandEventArgs args)
-    {
-        AppendToLog("Update", args);
+Command buttons can only reside in a [Grid Command Column](slug:components/grid/columns/command) or the [Grid ToolBar](slug:components/grid/features/toolbar). You can also [trigger add and edit operations programmatically](slug:grid-kb-add-edit-state) from anywhere on the web page through the [Grid State](slug:grid-state).
 
-        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);
+## Events
 
-        SampleData item = (SampleData)args.Item;
+The following table describes the Grid events, which are related to adding, deleting, and editing items. Also check the sections about [item instances](#item-instances) and [event arguments](#gridcommandeventargs) below.
 
-        // perform actual data source operation here through your service
-        await MyService.Create(item);
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-        // update the local view-model data with the service data
-        await GetGridData();
-    }
+| Event | Required | Description | [Item Instance](#gridcommandeventargs) | If&nbsp;Cancelled |
+| --- | --- | --- | --- | --- |
+| `OnAdd` | No | Fires on `Add` [command button](slug://components/grid/columns/command) click, before the Grid enters add mode. This event preceeds `OnCreate` or `OnCancel`. | [New](#item-instances) | Grid remains in read mode. |
+| `OnCancel` | No | Fires on `Cancel` command invocation. | [New or cloned](#item-instances) | Grid remains in add or edit mode. |
+| `OnCreate` | To add new items. | Fires on `Save` command invocation for new items. This event succeeds `OnAdd`. | [New](#item-instances) | Grid remains in add mode. |
+| `OnDelete` | To [delete items](#delete-operations). | Fires on `Delete` command button click. | Original | Grid won't rebind. Deletion depends on the app itself. |
+| `OnEdit` | No | Fires on `Edit` command invocation, before the Grid actually enters edit mode. This event preceeds `OnCreate` or `OnCancel`. | Original | Grid remains in read mode. |
+| `OnModelInit` | [Depends on the Grid model type](slug:grid-events#onmodelinit) | Fires when the Grid requires a [new model instance](#item-instances), which is immediately before `OnAdd` or immediately after `OnEdit`. <br /> Use this event when the Grid model type is an [interface, abstract class, or has no parameterless constructor](slug:grid-events#onmodelinit). | No event arguments | Not cancellable |
+| `OnUpdate` | To edit existing items. | Fires on `Save` command invocation for existing items. This event succeeds `OnEdit`. | [Cloned](#item-instances) | Grid remains in edit mode. |
 
-    async Task CancelHandler(GridCommandEventArgs args)
-    {
-        AppendToLog("Cancel", args);
+The following considerations apply for the Grid CRUD events:
 
-        SampleData item = (SampleData)args.Item;
+* Most events provide a [`GridCommandEventArgs` argument](#gridcommandeventargs) in the handler. `OnModelInit` has no event argument.
+* All events, except `OnModelInit`, are cancellable and the user action can be prevented. Cancelling `OnDelete` does not automatically prevent item deletion from the Grid data source. This depends entirely on the executed application code.
+* The `OnCreate`, `OnDelete`, and `OnUpdate` events are required when using add, delete, and edit operations, respectively. The app must use these events to modify the Grid data source. [The Grid does not modify its data directly](#item-instances).
 
-        // if necessary, perform actual data source operation here through your service
+Some events always fire in the same sequence, based on the user actions. In the list below, the value input and [validation](slug:grid-editing-validation) occur between the second and third event:
 
-        await Task.Delay(1000); //simulate actual long running async operation
-    }
+* `OnModelInit`, `OnAdd`, and `OnCreate` for add operations
+* `OnEdit`, `OnModelInit`, and `OnUpdate` for edit operations
 
-    // this method and field just display what happened for visual cues in this example
+Both user workflows can end with the `OnCancel` event instead of `OnCreate` or `OnUpdate`.
 
-    MarkupString logger;
-    void AppendToLog(string commandName, GridCommandEventArgs args)
-    {
-        string currAction = string.Format(
-            "<br />Command: <strong>{0}</strong>; is cancelled: <strong>{1}</strong>; is the item new: <strong>{2}</strong>",
-                commandName,
-                args.IsCancelled,
-                args.IsNew
-            );
-        logger = new MarkupString(logger + currAction);
-    }
+> Use `async Task` instead of `async void` for event handlers that execute awaitable operations. Otherwise the Grid may show incorrect data, or the app may throw exceptions related to disposed objects or concurrency.
 
+### Item Instances
 
-    // 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; }
-    }
+The Grid does not expose or modify its data items directly in add or edit mode. Instead, the component creates a new item instance or clones an existing one. The user is always changing the values of the separate item instance. The Grid uses [`Activator.CreateInstance<TItem>()`](https://learn.microsoft.com/en-us/dotnet/api/system.activator.createinstance) and [`PropertyInfo.SetValue()`](https://learn.microsoft.com/en-us/dotnet/api/system.reflection.propertyinfo.setvalue) to create and populate items for add and edit mode. This approach:
 
-    List<SampleData> MyData { get; set; }
-
-    async Task GetGridData()
-    {
-        MyData = await MyService.Read();
-    }
+* Allows users to cancel their changes and revert to the original data item values.
+* Provides the app with full control over the data source.
+* Sets some requirements [for the Grid model class](#model-requirements) and for [updating Entity Framework models](slug:grid-kb-entity-framework-model-update).
 
-    protected override async Task OnInitializedAsync()
-    {
-        await GetGridData();
-    }
+### GridCommandEventArgs
 
+All events in the [Events table](#events), except `OnModelInit`, provide a [`GridCommandEventArgs`](slug:telerik.blazor.components.gridcommandeventargs) event argument. It exposes the following properties:
 
-    // 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<SampleData> _data { get; set; } = new List<SampleData>();
+| Property&nbsp;Name | Type | Description |
+| --- | --- | --- |
+| `Field` | `string` | The [column `Field` name](slug:components/grid/columns/bound#data-binding). Applicable only for [in-cell edit mode](slug:grid-editing-incell). |
+| `IsCancelled` | `bool` | Defines if the user action should be prevented. See the [Comparison table](#comparison) below for details. |
+| `IsNew` | `bool` | Defines if `Item` is a newly added row or an existing row. |
+| `Item` | `object` | The data item, which the user is adding, deleting, or editing. Cast it to the Grid model type. |
+| `Value` | `object` | The data item value, which the user is editing. You can cast it to the correct type, based on the `Field`. Applicable only for [in-cell edit mode](slug:grid-editing-incell). |
 
-        public static async Task Create(SampleData itemToInsert)
-        {
-            await Task.Delay(1000); // simulate actual long running async operation
+## Column Editors
 
-            itemToInsert.ID = _data.Count + 1;
-            _data.Insert(0, itemToInsert);
-        }
+You can customize the column editors through the [column `EditorType` parameter](slug:components/grid/columns/bound#data-operations), or by using an [editor template](slug:grid-templates-editor). The `EditorType` parameter accepts a member of the `GridEditorType` enum:
 
-        public static async Task<List<SampleData>> Read()
-        {
-            await Task.Delay(1000); // simulate actual long running async operation
+| Column Field Type | Valid `GridEditorType` Enum Members |
+| --- | --- |
+| `bool` | `CheckBox` (default) <br /> `Switch` |
+| `DateTime` | `DatePicker` (default) <br /> `DateTimePicker` <br> `TimePicker` |
+| `string` | `TextArea` <br /> `TextBox` (default) |
 
-            if (_data.Count < 1)
-            {
-                for (int i = 1; i < 50; i++)
-                {
-                    _data.Add(new SampleData()
-                    {
-                        ID = i,
-                        Name = "Name " + i.ToString()
-                    });
-                }
-            }
+>caption Setting column editor type
 
-            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);
-        }
-    }
-}
+````RAZOR.skip-repl
+<GridColumn Field="@nameof(Race.StartDateTime)"
+            EditorType="@GridEditorType.DateTimePicker" />
 ````
 
->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 <MethodName>(GridCommandEventArgs args)`.
-
-## Notes
-
-There are a few considerations to keep in mind with the CUD operations of the grid. They are explained in the following list:
+## Rebinding After Data Changes
 
-* 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.
-    
-    * For example, you may want to update the view-model only on success of the data service with the model returned from the server. Another thing you may want to do is to inform the user for server (async, remote) validation errors such as duplicates. You can find examples of both in the [Remote Validation sample project](https://github.com/telerik/blazor-ui/tree/master/grid/remote-validation).
+During add, edit, and delete operations, the Grid expects the application to make changes to the data source (database) and then provide the latest data to the component. Reloading the Grid can happen in different ways, depending on the current Grid [data binding mechanism](slug:common-features-data-binding-overview#how-to-provide-data).
 
-* The CRUD event handlers must be `async Task` and **not** `async void`. A Task can be properly awaited and allows working with services and contexts, and lets the grid update after the actual data source operations complete.
+### Data Parameter
 
-    * When the method returns `void`, the execution of the context operations is not actually awaited, and you may get errors from the context (such as "Cannot access a disposed object. A common cause of this error is disposing a context that was resolved from dependency injection and then later trying to use the same context instance elsewhere in your application" or "A second operation started on this context before a previous operation completed. This is usually caused by different threads using the same instance of DbContext"). The grid may also re-render before the actual data update happens and you may not see the result.
+In the `OnCreate`, `OnDelete`, and `OnUpdate` event handler, the application must do one of the following:
 
-* 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.
+* Make a read request to the database. Retrieve the latest data and set it as the new value of the Grid `Data` parameter. The Grid will rebind automatically. The following examples demonstrate this approach:
+    * [Inline Grid Editing](slug:grid-editing-inline#advanced)
+    * [Popup Grid Editing](slug:grid-editing-popup#advanced)
+    * [In-Cell Grid Editing](slug:grid-editing-incell#advanced)
+* [Use the event arguments to update the local item collection in the `Data` parameter manually](slug:grid-kb-load-cached-data-after-crud-operations#data-parameter).
 
-* The Grid uses `Activator.CreateInstance<TItem>();` 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.
+### OnRead Event
 
-* 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.
+The Grid automatically fires [`OnRead`](slug://components/grid/manual-operations) immediately after the following events, unless they are cancelled:
 
-* 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.
+* `OnCancel`
+* `OnCreate`
+* `OnDelete`
+* `OnUpdate`
 
-* 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:
-    
-    1.  Find the object in your database by Id (you can use `dbContext.Find()` or similar method depending on your infrastructure).
-    1. Apply all the changes you need to it one by one - assign the values of all of its properties - `dbObject.Property1 = argsItem.Property1...`
-    1. Call `dbContext.SaveChanges()`
+In this way, the Grid receives the latest data after each operation is complete. If you need to skip the database read request, you can [cache the Grid data in the `OnRead` handler, modify it manually, and reuse it](slug:grid-kb-load-cached-data-after-crud-operations#onread-event).
 
-* The [Grid validation](slug:grid-editing-validation) is based on the <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#validator-components" target="_blank">`DataAnnotationValidator`</a> and creates its own `EditContext` for a row that is in edit/insert mode. When the row is not in edit/insert mode, the `EditContext` is `null`. The `EditContext` is a cascading parameter and overrides any cascading parameters from parent components (such as an `<EditForm>` that may wrap the grid).
+## Integration with Other Features
 
-    * The validation will not be enabled for Grids bound to Expando objects or Dictionaries (such as DataTable).
+Updated rows comply with the current filter, group, search, and sort settings, just like all other rows. As a result, an updated row may render at a different place or disappear. To prevent this temporarily, you can [bind the component with `OnRead` and provide cached data after the edit operation](slug:grid-kb-load-cached-data-after-crud-operations#onread-event).
 
-    * When an input receives an `EditContext` (usually comes down as a cascading parameter), the framework also requires a `ValueExpression`. If you use two-way binding (the `@bind-Value` syntax), the `ValueExpression` is deducted from there. However, if you use only the `Value` property, you have to pass the `ValueExpression` yourself. This is a lambda expression that tells the framework what field in the model to update. The following sample demonstrates how to achieve that. You can also check the [Requires a value for ValueExpression](slug:common-kb-requires-valueexpression) knowledge base article for more details.
+When editing a master row in a [hierarchy Grid](slug://components/grid/features/hierarchy), the respective `DetailTemplate` will collapse unless you [override the `Equals()` method of the master data item class](slug://grid-kb-editing-in-hierarchy).
 
-    <div class="skip-repl"></div>
-    ````RAZOR
-    <EditorTemplate>
-        <TelerikTextBox Value="@myModel.MyField"
-                        ValueExpression="@( () => myModel.MyField )">
-        </TelerikTextBox>
-    </EditorTemplate>
+Learn more integration details for the [inline](slug:grid-editing-inline#integration-with-other-features) and [in-cell](slug:grid-editing-incell#integration-with-other-features) edit modes.
 
-    @* Applies to the other input type components as well *@
-    ````
-    
-* If you want to perform other data operations while the component is in Edit mode (applicable for [InCell](slug:components/grid/editing/incell) and [Inline](slug:components/grid/editing/inline) editing) the following behavior will occur:
+## Examples
 
-@[template](/_contentTemplates/common/grid-treelist-editing-notes.md#grid-treelist-data-operations-while-editing)
+See Grid CRUD operations in action at:
 
-* When editing a master row in a [hierarchy Grid](slug:components/grid/features/hierarchy), the respective `DetailTemplate` will collapse unless you [override the `Equals()` method of the master data item class](slug:grid-kb-editing-in-hierarchy).
+* [Grid Inline Editing](slug:grid-editing-inline#examples)
+* [Grid Popup Editing](slug:grid-editing-popup#examples)
+* [Grid In-Cell Editing](slug:grid-editing-incell#examples)
+* [Online Grid Demos](https://demos.telerik.com/blazor-ui/grid/editing-inline)
 
 ## 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
+* [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 Rows in Hierarchy Grid](slug://grid-kb-editing-in-hierarchy)
+* [Edit All Grid Rows and Cells at the Same Time](slug:grid-kb-edit-all-rows-cells)
+* [Blazor Grid](slug:grid-overview)
diff --git a/components/grid/editing/popup.md b/components/grid/editing/popup.md
index ff91e5b79d..478596d2a7 100644
--- a/components/grid/editing/popup.md
+++ b/components/grid/editing/popup.md
@@ -2,286 +2,163 @@
 title: Popup Editing
 page_title: Grid - Popup Editing
 description: Popup editing of data in Grid for Blazor.
-slug: components/grid/editing/popup
-tags: telerik,blazor,grid,Popup,editing
+slug: grid-editing-popup
+tags: telerik, blazor, grid, editing, popup
 published: True
 position: 2
 ---
 
 # Grid Popup Editing
 
-In this article:
+Grid popup editing allows the app to render a larger form with customizable dimensions and layout. The popup edit mode is also more suitable for mobile devices with small screens. The popup edit form may contain editable fields from hidden columns in the Grid table.
 
-* [Basics](#basics)
-* [Customization](#customization)
-    * [Editing of Hidden Columns](#editability-of-hidden-columns)
-    * [Popup Customization](#popup-customization)
-    * [Edit Form Customization](#edit-form-customization)
-    * [Popup Form Customization](#popup-form-customization)
-    * [Popup Buttons Customization](#popup-buttons-customization)
+@[template](/_contentTemplates/grid/editing.md#overview-required)
 
 ## Basics
 
-Grid popup editing lets the user click an [Edit command button](slug:components/grid/columns/command) on the row, and a popup shows up with all its editable columns open up for changes. They can then click the **Save** button in the dialog to submit the changes to the model. This fires the `OnUpdate` event of the grid where your code receives the updated model so you can work with the data (for example, to call the appropriate method of your service).
+To use popup Grid editing, set the Grid `EditMode` parameter to `GridEditMode.Popup`. During popup editing, only one table row is in edit mode. The user can:
 
-In a similar fashion, the **Cancel** and **Delete** command buttons, and the **Add** toolbar command button fire events in the Grid to let you handle the data source operations.
+* 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.
 
-You can also cancel the events by setting the `IsCancelled` property of the `GridCommandEventArgs` event argument to `true`. This lets you prevent the user from editing certain records, inserting or deleting items, based on your application logic.
+The popup edit mode can display a [Telerik Validation Summary component](slug:validation-tools-summary) if the Grid model is configured for validation.
 
-To enable Popup editing in the grid, set its `EditMode` property to `Telerik.Blazor.GridEditMode.Popup`, then handle the CRUD events as shown in the example below.
+## Commands
 
-The Popup editing mode supports [validation](slug:common-features/input-validation). To use it, all you need to do is decorate your model with the desired annotations. Validation errors will be shown in the popup and will prevent the Update operation.
+Popup add, edit, and delete operations use the following [command buttons](slug:grid-editing-overview#commands):
 
->caption Grid popup editing example. Please review the code comments
+* **Add**
+* **Delete**
+* **Edit**
 
-````RAZOR
-@using System.ComponentModel.DataAnnotations
-
-<strong>Editing is cancelled for the fifth item conditionally.</strong>
-
-<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px"
-             OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
-    <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
-    </GridToolBarTemplate>
-    <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" Width="80px" />
-        <GridColumn Field=@nameof(SampleData.FirstName) Title="First Name" />
-        <GridColumn Field=@nameof(SampleData.MiddleName) Title="Middle Name" Visible="false" />
-        <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" />
-        <GridCommandColumn>
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-        </GridCommandColumn>
-    </GridColumns>
-</TelerikGrid>
+@[template](/_contentTemplates/grid/editing.md#without-commands)
 
-@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
-        }
-
-        Console.WriteLine("Edit event is fired.");
-    }
-
-    private async Task UpdateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+Popup edit mode does not use **Save** and **Cancel** command buttons in the [Grid command column](slug:grid-columns-command). The Grid renders them automatically in the popup, unless you define a [Buttons Template](slug:grid-templates-popup-buttons) or a [Form Template](slug:grid-templates-popup-form).
 
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
+In popup edit mode, the Grid commands execute row by row and the corresponding [Grid events](slug:grid-editing-overview#events) also fire row by row.
 
-        // update the local view-model data with the service data
-        await GetGridData();
-
-        Console.WriteLine("Update event is fired.");
-    }
-
-    private async Task DeleteHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+## Customization
 
-        // perform actual data source operation here through your service
-        await MyService.Delete(item);
+The Grid exposes options to customize the edit popup and its form. Define the desired configuration in the `GridPopupEditSettings` and `GridPopupEditFormSettings` tags under the `GridSettings` tag.
 
-        // update the local view-model data with the service data
-        await GetGridData();
+### Edit Hidden Columns
 
-        Console.WriteLine("Delete event is fired.");
-    }
+Starting with version 7.0, the Grid allows users to edit [hidden columns](slug:grid-columns-visible) by default. To disable editing of a hidden column, set `Editable="false"` to the respective `<GridColumn>` tag.
 
-    private async Task CreateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+### Popup Dimensions and Styles
 
-        // perform actual data source operation here through your service
-        await MyService.Create(item);
+The `GridPopupEditSettings` nested tag exposes the following parameters to allow popup customization:
 
-        // update the local view-model data with the service data
-        await GetGridData();
+@[template](/_contentTemplates/common/popup-edit-customization.md#popup-settings)
 
-        Console.WriteLine("Create event is fired.");
-    }
+For example, here is [how to set the Grid popup edit form's title, so that it matches a property value of the edited data item](slug:grid-kb-popup-edit-title).
 
-    private async Task CancelHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+### Form Layout
 
-        // if necessary, perform actual data source operation here through your service
+The `GridPopupEditFormSettings` nested tag exposes the following parameters to allow edit form customization:
 
-        Console.WriteLine("Cancel event is fired.");
-    }
+@[template](/_contentTemplates/common/popup-edit-customization.md#edit-form-settings)
 
-    // 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; }
+>important These settings are not applicable if you are using a `<FormTemplate>` with a custom Form component. See more details in [Form Template - Specifics](slug:grid-templates-popup-form#specifics).
 
-        [Required]
-        public string FirstName { get; set; }
+### Form Template
 
-        [Required]
-        public string MiddleName { get; set; }
+In the `GridPopupEditFormSettings`, you can declare a `FormTemplate`. This template enables you to fully customize the appearance and content of the create/edit Popup window in the Grid. For more information and examples on customizing the Grid Popup window, refer to the [Popup Form Template](slug:grid-templates-popup-form) article.
 
-        [Required]
-        public string LastName { get; set; }
-    }
+### Buttons Template
 
-    public List<SampleData> MyData { get; set; }
+You can specify a `ButtonsTemplate` in the `GridPopupEditFormSettings` to customize how the buttons look in the create/edit Popup window of the Grid. To learn more and see an example of customizing the Grid Popup buttons, refer to the [Popup Buttons Template](slug:grid-templates-popup-buttons) article.
 
-    private async Task GetGridData()
-    {
-        MyData = await MyService.Read();
-    }
+## Examples
 
-    protected override async Task OnInitializedAsync()
-    {
-        await GetGridData();
-    }
+### Basic
 
-    // 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<SampleData> _data { get; set; } = new List<SampleData>();
+The example below shows how to:
 
-        public static async Task Create(SampleData itemToInsert)
-        {
-            itemToInsert.ID = _data.Count + 1;
-            _data.Insert(0, itemToInsert);
-        }
+* Implement popup Grid CRUD operations with the simplest and minimal required setup.
+@[template](/_contentTemplates/grid/editing.md#basic-example-description)
 
-        public static async Task<List<SampleData>> Read()
-        {
-            if (_data.Count < 1)
-            {
-                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(),
-                    });
-                }
-            }
+>caption Basic Grid popup editing configuration
 
-            return await Task.FromResult(_data);
-        }
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikGrid OnRead="@OnGridRead"
+             TItem="@Product"
+             EditMode="@GridEditMode.Popup"
+@[template](/_contentTemplates/grid/editing.md#basic-example-parameters-columns)
+        <GridCommandColumn Width="180px">
+            <GridCommandButton Command="Edit">Edit</GridCommandButton>
+            <GridCommandButton Command="Delete">Delete</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
 
-        public static async Task Update(SampleData itemToUpdate)
-        {
-            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
-            if (index != -1)
-            {
-                _data[index] = itemToUpdate;
-            }
-        }
+@code {
+@[template](/_contentTemplates/grid/editing.md#basic-example-code)
 
-        public static async Task Delete(SampleData itemToDelete)
-        {
-            _data.Remove(itemToDelete);
-        }
-    }
+@[template](/_contentTemplates/grid/editing.md#crud-service-and-model)
 }
 ````
 
->note It is up to the data access logic to save the data once it is changed in the data collection, or to revert changes. The example above showcases the events that allow you to do that. In a real application, the code for handling data operations may be entirely different.
-
-## Customization
-
-The Grid exposes options to customize the edit popup and its form. Define the desired configuration in the `GridPopupEditSettings` and `GridPopupEditFormSettings` tags under the `GridSettings` tag.
-
-### Editability of Hidden Columns
+### Advanced
 
-Starting with version 7.0, the Grid allows users to edit [hidden columns](slug:grid-columns-visible) by default. To disable editing of a hidden column, set `Editable="false"` to the respective `<GridColumn>` tag.
-
-### Popup Customization
-
-The `GridPopupEditSettings` nested tag exposes the following parameters to allow popup customization:
+The example below shows how to:
 
-@[template](/_contentTemplates/common/popup-edit-customization.md#popup-settings)
-
-For example, here is [how to set the Grid popup edit form's title, so that it matches a property value of the edited data item](slug:grid-kb-popup-edit-title).
+* Implement popup Grid CRUD operations with all available events and various built-in customizations.
+@[template](/_contentTemplates/grid/editing.md#advanced-example-description)
+* Edit the `Description` column that is not visible in the Grid.
+* Customize the popup edit form dimensions and layout.
 
-### Edit Form Customization
-
-The `GridPopupEditFormSettings` nested tag exposes the following parameters to allow edit form customization:
-
-@[template](/_contentTemplates/common/popup-edit-customization.md#edit-form-settings)
-
->important These settings are not applicable if you are using a `<FormTemplate>` with a custom Form component. See more details in [Form Template - Specifics](slug:grid-templates-popup-form#specifics).
-
->caption Customize the popup edit form
+>caption Advanced Grid popup editing configuration
 
 ````RAZOR
-@*The snippet focuses on the popup edit form customization. CRUD events are not handled for brevity*@
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
 
-<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px">
+<TelerikGrid Data="@GridData"
+             EditMode="@GridEditMode.Popup"
+@[template](/_contentTemplates/grid/editing.md#advanced-example-parameters)
     <GridSettings>
-        <GridPopupEditSettings MaxWidth="600px"
-                               MaxHeight="300px"
-                               Class="custom-popup">
-        </GridPopupEditSettings>
-        <GridPopupEditFormSettings Orientation="@FormOrientation.Horizontal"
-                                   ButtonsLayout="FormButtonsLayout.Center"
-                                   Columns="2">
-        </GridPopupEditFormSettings>
+        <GridPopupEditSettings Width="600px" MaxWidth="90vw" Height="400px" MaxHeight="90vh" />
+        <GridPopupEditFormSettings Columns="2" ColumnSpacing="2em" ButtonsLayout="@FormButtonsLayout.Stretch" />
     </GridSettings>
-    <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
-    </GridToolBarTemplate>
+@[template](/_contentTemplates/grid/editing.md#advanced-example-toolbar)
     <GridColumns>
-        <GridColumn Field=@nameof(SampleData.Id) />
-        <GridColumn Field=@nameof(SampleData.Name) />
-        <GridColumn Field=@nameof(SampleData.Team) />
-        <GridColumn Field=@nameof(SampleData.HireDate) />
-        <GridCommandColumn>
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
+        <GridColumn Field="@nameof(Product.Id)" Editable="false" Width="60px" />
+        <GridColumn Field="@nameof(Product.Name)" />
+        <GridColumn Field="@nameof(Product.Description)" EditorType="@GridEditorType.TextArea" Visible="false">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <div style="white-space:pre">@dataItem.Description</div>
+            </Template>
+        </GridColumn>
+@[template](/_contentTemplates/grid/editing.md#advanced-example-columns)
+        <GridCommandColumn Title="Commands" Width="180px">
+            @{ var dataItem = (Product)context; }
+            <GridCommandButton Command="Edit" ThemeColor="@AddEditButtonThemeColor">Edit</GridCommandButton>
+            @if (dataItem.Discontinued)
+            {
+                <GridCommandButton Command="Delete" ThemeColor="@DeleteButtonThemeColor">Delete</GridCommandButton>
+            }
         </GridCommandColumn>
     </GridColumns>
 </TelerikGrid>
 
 @code {
+@[template](/_contentTemplates/grid/editing.md#advanced-example-code)
 
-    // 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; }
-        public string Name { get; set; }
-        public string Team { get; set; }
-        public DateTime HireDate { get; set; }
-    }
-
-    public List<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
-        {
-            Id = x,
-            Name = "name " + x,
-            Team = "team " + x % 5,
-            HireDate = DateTime.Now.AddDays(-x).Date
-        }).ToList();
+@[template](/_contentTemplates/grid/editing.md#crud-service-and-model)
 }
 ````
 
-### Popup Form Customization
-
-In the `GridPopupEditFormSettings`, you can declare a `FormTemplate`. This template enables you to fully customize the appearance and content of the create/edit Popup window in the Grid. For more information and examples on customizing the Grid Popup window, refer to the [Popup Form Template](slug:grid-templates-popup-form) article.
-
-### Popup Buttons Customization
-
-You can specify a `ButtonsTemplate` in the `GridPopupEditFormSettings` to customize how the buttons look in the create/edit Popup window of the Grid. To learn more and see an example of customizing the Grid Popup buttons, refer to the [Popup Buttons Template](slug:grid-templates-popup-buttons) article.
-
 ## See Also
 
 * [Live Demo: Grid Popup Editing](https://demos.telerik.com/blazor-ui/grid/editing-popup)
-* [Custom Editor Template Per Field](slug:grid-templates-editor)
-* [Custom Editor Layout](https://github.com/telerik/blazor-ui/tree/master/grid/custom-popup-form)
-* [Blazor Grid](slug:grid-overview)
\ No newline at end of file
+* [Grid Editor Template](slug:grid-templates-editor)
+* [Start and End Editing through the Grid State](slug:grid-kb-add-edit-state)
+* [Blazor Grid](slug:grid-overview)
diff --git a/components/grid/editing/validation.md b/components/grid/editing/validation.md
index d4167e0306..3fb61ebc01 100644
--- a/components/grid/editing/validation.md
+++ b/components/grid/editing/validation.md
@@ -3,322 +3,164 @@ title: Validation
 page_title: Grid Validation
 description: Built-in validation in the Grid and how to customize the validation behavior.
 slug: grid-editing-validation
-tags: telerik,blazor,grid,validation,editing
+tags: telerik, blazor, grid, validation, editing
 published: True
 position: 40
 ---
 
 # Grid Validation
 
-The Telerik UI for Blazor Grid supports built-in validation that is enabled by default. The Grid passes an `EditContext` as a cascading value to the editable cells. When you use [inline](slug:components/grid/editing/inline) or [incell](slug:components/grid/editing/incell) editing, if any validation messages are present, the Grid will render them as [Validation Tooltips](slug:validation-tools-tooltip) on hover of the edited input. 
+The Telerik Grid for Blazor supports built-in validation that is enabled by default. This article describes how the Grid validation works and how to customize or disable it.
 
-#### In this Article:
+@[template](/_contentTemplates/grid/editing.md#overview-required)
 
-* [Disable the validation](#disable-validation)
-* [Use a custom validator](#use-a-custom-validator)
+## Basics
 
-## Disable Validation
-
-To disable the built-in validation, add a `<GridValidationSettings>` tag to the `<GridSettings>` and set the `Enabled` parameter to `false`.
-
-````RAZOR
-@* Disable the built-in validation in the Grid *@
-
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
-
-<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
-             OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
-    <GridSettings>
-        <GridValidationSettings Enabled="false">
-        </GridValidationSettings>
-    </GridSettings>
-    <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
-    </GridToolBarTemplate>
-    <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
-        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
-        <GridCommandColumn>
-            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
-        </GridCommandColumn>
-    </GridColumns>
-</TelerikGrid>
-
-@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
-        }
-
-        Console.WriteLine("Edit event is fired.");
-    }
-
-    async Task UpdateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+By default, the Grid validation uses a [`DataAnnotationValidator`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator) and creates an `EditContext` for the row that is in add or edit mode. When you use [inline](slug:grid-editing-inline) or [in-cell](slug:grid-editing-incell) editing, the Grid renders validation messages in [Validation Tooltips](slug:validation-tools-tooltip) on hover of the invalid inputs. In popup edit mode, the Grid shows a [Validation Summary](slug:validation-tools-summary) in the popup.
 
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
+When a row is not in edit mode, the `EditContext` is `null`. The Grid `EditContext` is a cascading parameter, which can overrides any cascading parameters from parent components, such as an `<EditForm>` that may wrap the Grid.
 
-        // update the local view-model data with the service data
-        await GetGridData();
+The built-in Grid validation is not supported with dynamic data such as `ExpandoObject`, `DataTable`, or `Dictionary`.
 
-        Console.WriteLine("Update event is fired.");
-    }
+@[template](/_contentTemplates/common/form-validation.md#note-telerik-role-in-validation)
 
-    async Task DeleteHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+## Disable Validation
 
-        // perform actual data source operation here through your service
-        await MyService.Delete(item);
+To disable the built-in Grid validation:
 
-        // update the local view-model data with the service data
-        await GetGridData();
+1. Add `<GridSettings>` as a child tag inside the Grid.
+1. Add a `<GridValidationSettings>` tag inside `<GridSettings>`.
+1. Set the `Enabled` parameter of `GridValidationSettings` to false.
 
-        Console.WriteLine("Delete event is fired.");
-    }
+See the [example](#example) below.
 
-    async Task CreateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+## Use Custom Validator
 
-        // perform actual data source operation here through your service
-        await MyService.Create(item);
+You can validate the Grid with any validator that uses the `EditContext`. To change the default validator:
 
-        // update the local view-model data with the service data
-        await GetGridData();
+1. Add `<GridSettings>` as a child tag inside the Grid.
+1. Add a `<GridValidationSettings>` tag inside `<GridSettings>`.
+1. Define the custom validator in the `<ValidatorTemplate>` `RenderFragment` inside `<GridValidationSettings>`.
 
-        Console.WriteLine("Create event is fired.");
-    }
+Third party validation tools are not part of Telerik UI for Blazor. Reference the required NuGet packages explicitly.
 
-    async Task CancelHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
+## Example
 
-        // if necessary, perform actual data source operation here through your service
+The example below shows how to:
 
-        Console.WriteLine("Cancel event is fired.");
-    }
+* Enable and disable validation in the Grid.
+* Validate the user input with a custom validator instead of the default `DataAnnotationsValidator`.
 
+Install the [`Blazored.FluentValidation`](https://www.nuget.org/packages/Blazored.FluentValidation) NuGet package to run the following code and refer to the [FluentValidation documentation](https://docs.fluentvalidation.net/en/latest/built-in-validators.html).
 
-    // 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; }
-    }
+>caption Use Telerik Grid for Blazor with FluentValidation
 
-    public List<SampleData> MyData { get; set; }
+````RAZOR.skip-repl
+@* Requires the Blazored.FluentValidation NuGet package *@
 
-    async Task GetGridData()
-    {
-        MyData = await MyService.Read();
-    }
-
-    protected override async Task OnInitializedAsync()
-    {
-        await GetGridData();
-    }
-
-    // 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<SampleData> _data { get; set; } = new List<SampleData>();
-
-        public static async Task Create(SampleData itemToInsert)
-        {
-            itemToInsert.ID = _data.Count + 1;
-            _data.Insert(0, itemToInsert);
-        }
-
-        public static async Task<List<SampleData>> Read()
-        {
-            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)
-        {
-            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
-            if (index != -1)
-            {
-                _data[index] = itemToUpdate;
-            }
-        }
-
-        public static async Task Delete(SampleData itemToDelete)
-        {
-            _data.Remove(itemToDelete);
-        }
-    }
-}
-````
-
-## Use a Custom Validator
-
-You can validate the Grid with any validator that uses the `EditContext`. To change the default validator, add a `<ValidatorTemplate>` tag in `<GridValidationSettings>`. Define the custom validator in the `ValidatorTemplate`. 
-
->note Such third party tools are not included in the Telerik UI for Blazor package. Your project must reference their NuGet packages explicitly. The code snippet below will not run unless you install an appropriate package first. You can find such in the <a href="https://docs.fluentvalidation.net/en/latest/blazor.html" target="_blank">official FluentValidation documentation</a>.
-
-<div class="skip-repl"></div>
-````RAZOR
 @using Blazored.FluentValidation
 @using FluentValidation
 
 <TelerikGrid Data="@GridData"
-             Pageable="true"
              EditMode="@GridEditMode.Inline"
-             OnCreate="@CreateHandler"
-             OnUpdate="@UpdateHandler"
-             Height="500px">
+             OnCreate="@OnGridCreate"
+             OnUpdate="@OnGridUpdate">
     <GridSettings>
-        <GridValidationSettings>
+        <GridValidationSettings Enabled="@GridValidationEnabled">
             <ValidatorTemplate>
-                <FluentValidationValidator Validator="@Validator" />
+                <FluentValidationValidator Validator="@GridFluentValidator" />
             </ValidatorTemplate>
         </GridValidationSettings>
     </GridSettings>
     <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
+        <GridCommandButton Command="Add">Add Item</GridCommandButton>
+        <label class="k-checkbox-label">
+            <TelerikCheckBox @bind-Value="@GridValidationEnabled" />
+            Enable Validation
+        </label>
     </GridToolBarTemplate>
     <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" Width="80px" />
-        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
-        <GridCommandColumn Width="240px">
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
-            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+        <GridColumn Field="@nameof(Product.Name)" />
+        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
+        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
+        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" />
+        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px" />
+        <GridCommandColumn Width="180px">
+            <GridCommandButton Command="Edit">Edit</GridCommandButton>
+            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
+            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
         </GridCommandColumn>
     </GridColumns>
 </TelerikGrid>
 
 @code {
-    private List<SampleData> GridData { get; set; } = new();
+    private List<Product> GridData { get; set; } = new();
 
-    private SampleDataValidator Validator = new();
+    private FluentProductValidator GridFluentValidator = new();
 
-    public class SampleDataValidator : AbstractValidator<SampleData>
+    public class FluentProductValidator : AbstractValidator<Product>
     {
-        public SampleDataValidator()
+        public FluentProductValidator()
         {
-            RuleFor(item => item.Name).NotEmpty().MaximumLength(50);
+            RuleFor(item => item.Name).NotEmpty().MinimumLength(3).MaximumLength(24);
+            RuleFor(item => item.Price).NotNull().GreaterThan(0);
+            RuleFor(item => item.ReleaseDate).NotEmpty().GreaterThanOrEqualTo(DateTime.Today.AddYears(-10));
         }
     }
 
-    private async Task UpdateHandler(GridCommandEventArgs 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();
-
-        Console.WriteLine("Update event is fired.");
-    }
-
-    private async Task CreateHandler(GridCommandEventArgs 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();
-
-        Console.WriteLine("Create event is fired.");
-    }
+    private bool GridValidationEnabled { get; set; } = true;
 
-    private async Task GetGridData()
-    {
-        GridData = await MyService.Read();
-    }
+    private int LastId { get; set; }
 
-    protected override async Task OnInitializedAsync()
+    private void OnGridCreate(GridCommandEventArgs args)
     {
-        await GetGridData();
-    }
+        var createdItem = (Product)args.Item;
 
-    public class SampleData
-    {
-        public int ID { get; set; }
+        createdItem.Id = ++LastId;
 
-        public string Name { get; set; } = string.Empty;
+        GridData.Insert(0, createdItem);
     }
 
-    // The following static class mimics an actual data service.
-    public static class MyService
+    private void OnGridUpdate(GridCommandEventArgs args)
     {
-        private static List<SampleData> _data { get; set; } = new List<SampleData>();
+        var updatedItem = (Product)args.Item;
+        int originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
 
-        public static async Task Create(SampleData itemToInsert)
+        if (originalItemIndex != -1)
         {
-            itemToInsert.ID = _data.Count + 1;
-            _data.Insert(0, itemToInsert);
-        }
-
-        public static async Task<List<SampleData>> Read()
-        {
-            if (_data.Count < 1)
-            {
-                for (int i = 1; i <= 50; i++)
-                {
-                    _data.Add(new SampleData()
-                    {
-                        ID = i,
-                        Name = $"Name {i}"
-                    });
-                }
-            }
-
-            return await Task.FromResult(_data);
+            GridData[originalItemIndex] = updatedItem;
         }
+    }
 
-        public static async Task Update(SampleData itemToUpdate)
+    protected override void OnInitialized()
+    {
+        for (int i = 1; i <= 5; i++)
         {
-            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
-            if (index != -1)
+            GridData.Add(new Product()
             {
-                _data[index] = itemToUpdate;
-            }
+                Id = ++LastId,
+                Name = $"Product {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 static async Task Delete(SampleData itemToDelete)
-        {
-            _data.Remove(itemToDelete);
-        }
+    public class Product
+    {
+        public int Id { get; set; }
+        public string Name { get; set; } = string.Empty;
+        public decimal? Price { get; set; }
+        public int Quantity { get; set; }
+        public DateTime? ReleaseDate { get; set; }
+        public bool Discontinued { get; set; }
     }
 }
-`````
-
-@[template](/_contentTemplates/common/form-validation.md#note-telerik-role-in-validation)
+````
 
 ## See Also
 
-* [Grid Editing](slug:components/grid/editing/overview)
 * [Custom Grid `DataAnnotations` Validation](slug:validation-kb-custom-dataannotations-validator)
-* [Blazor Grid](slug:grid-overview)
+* [Remote Validation](https://github.com/telerik/blazor-ui/tree/master/grid/remote-validation)
diff --git a/components/grid/events.md b/components/grid/events.md
index 8d698fc090..14a8ad6c05 100644
--- a/components/grid/events.md
+++ b/components/grid/events.md
@@ -37,7 +37,7 @@ The `OnAdd`, `OnCreate`, `OnUpdate` and `OnDelete` events let you get the data i
 
 The `OnEdit` and `OnCancel` events let you respond to user actions - when they want to edit an item and when the want to cancel changes on an item they have been editing. You can use them to, for example, prevent editing of certain items based on some condition.
 
-You can read more about the CUD events in the [Editing Overview](slug:components/grid/editing/overview) article.
+You can read more about the CUD events in the [Editing Overview](slug:grid-editing-overview) article.
 
 ## Read Event
 
@@ -1069,7 +1069,7 @@ Visit the [Grid Cell Selection article to see an example](slug:grid-selection-ce
 ## See Also
 
   * [Grid Overview](slug:grid-overview)
-  * [Grid Editing Overview](slug:components/grid/editing/overview)
+  * [Grid Editing Overview](slug:grid-editing-overview)
   * [Grid Column Events](slug:grid-column-events)
   * [Manual Data Source Operations](slug:components/grid/manual-operations)
   * [Blazor Grid](slug:grid-overview)
diff --git a/components/grid/grouping/aggregates.md b/components/grid/grouping/aggregates.md
index 724e6c5b1c..a8069810f0 100644
--- a/components/grid/grouping/aggregates.md
+++ b/components/grid/grouping/aggregates.md
@@ -189,7 +189,7 @@ To enable aggregates:
 * If you try to use an aggregate that is not defined, you will get a `null` value.
 * If you try to use an aggregate that is not compatible with `Field` type, a runtime error will occur.
 
-* If you update a field of a model the `Data` collection in the view-model, aggregates will not be updated automatically - the grid needs to re-evaluate that data first, and since this is an expensive operation a UI render does not trigger it. You can [update the data collection](slug:grid-refresh-data) yourself, or fetching it anew from the service (example [here](slug:components/grid/editing/overview), see how the Create/Update/Delete events fetch data anew).
+* If you update a field of a model the `Data` collection in the view-model, aggregates will not be updated automatically - the grid needs to re-evaluate that data first, and since this is an expensive operation a UI render does not trigger it. You can [update the data collection](slug:grid-refresh-data) yourself, or fetching it anew from the service (example [here](slug:grid-editing-overview), see how the Create/Update/Delete events fetch data anew).
 
 * If you [bind the Grid via `OnRead` event](slug:components/grid/manual-operations), make sure to set `AggregateResults` in the `GridReadEventArgs` event argument object. Otherwise the Grid will calculate aggregates from the data on the current page only.
 
diff --git a/components/grid/loading-animation.md b/components/grid/loading-animation.md
index 008ff35a0e..bd32bbd2cb 100644
--- a/components/grid/loading-animation.md
+++ b/components/grid/loading-animation.md
@@ -23,7 +23,7 @@ The Grid `EnableLoaderContainer` parameter determines if the component will show
 * [Sorting](slug:components/grid/features/sorting)
 * [Grouping](slug:components/grid/features/grouping) 
 * [Expanding groups with load-on-demand](slug:grid-group-lod)
-* [Creating, deleting or editing records](slug:components/grid/editing/overview)
+* [Creating, deleting, or editing records](slug:grid-editing-overview)
 
 ## Show LoaderContainer on Initial Load
 
diff --git a/components/grid/manual-operations.md b/components/grid/manual-operations.md
index bca7f1f807..0bf949d25c 100644
--- a/components/grid/manual-operations.md
+++ b/components/grid/manual-operations.md
@@ -12,14 +12,14 @@ position: 55
 
 By default, the Grid will receive the entire collection of data, and it will perform the necessary operations (like [paging](slug:components/grid/features/paging), [sorting](slug:components/grid/features/sorting), [filtering](slug:components/grid/filtering)) internally.
 
-You can perform all data operations yourself (e.g. on the server) and load data on demand by using the `OnRead` event of the Grid. The data source will be read after each [CUD operation](slug:components/grid/editing/overview) as well, to ensure fresh data.
+You can perform all data operations yourself (e.g. on the server) and load data on demand by using the `OnRead` event of the Grid. The data source will be read after each [CUD operation](slug:grid-editing-overview) as well, to ensure fresh data.
 
 >tip Make sure to get familiar with all the general [`OnRead` event documentation](slug:common-features-data-binding-onread) first.
 
 
 ## Examples
 
-Below you can find a few examples of using the `OnRead` event to perform custom data source operations. They may not implement all operations for brevity. They showcase the basics only, and it is up to the application's data access layer to implement them. You can read more about implementing the CUD operations in the [CRUD Operations Overview](slug:components/grid/editing/overview) article.
+Below you can find a few examples of using the `OnRead` event to perform custom data source operations. They may not implement all operations for brevity. They showcase the basics only, and it is up to the application's data access layer to implement them. You can read more about implementing the CUD operations in the [CRUD Operations Overview](slug:grid-editing-overview) article.
 
 The comments in the code provide explanations on what is done and why.
 
@@ -376,7 +376,7 @@ With a few simple loops, you can extract information from the DataSourceRequest
 
 ## See Also
 
-* [CRUD Operations Overview](slug:components/grid/editing/overview)
+* [CRUD Operations Overview](slug:grid-editing-overview)
 * [Live Demo: Manual Data Source Operations](https://demos.telerik.com/blazor-ui/grid/manual-operations)
 * [Use OData Service](https://github.com/telerik/blazor-ui/tree/master/grid/odata)
 * [Custom Server Operations](https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server)
diff --git a/components/grid/overview.md b/components/grid/overview.md
index fc43b2ed3c..8014e47a60 100644
--- a/components/grid/overview.md
+++ b/components/grid/overview.md
@@ -112,7 +112,7 @@ The Grid can perform CRUD operations on its current data - add, edit and delete
 
 The Grid offers several editing modes with different user experience - incell, inline and popup.
 
-See [Grid CRUD Operations Overview](slug:components/grid/editing/overview) for more details.
+See [Grid CRUD Operations Overview](slug:grid-editing-overview) for more details.
 
 
 ## Virtualization
diff --git a/components/grid/refresh-data.md b/components/grid/refresh-data.md
index 63d255b8d2..9525e38f5d 100644
--- a/components/grid/refresh-data.md
+++ b/components/grid/refresh-data.md
@@ -260,7 +260,7 @@ You can refresh the Grid data by using the `Rebind` method exposed to the refere
 
 ## Call OnRead
 
-If you are [using the `OnRead` event to optimize the data requests](slug:components/grid/manual-operations), you may want to call that to fetch fresh data from the server. The Grid does that automatically after the [edit operations](slug:components/grid/editing/overview), yet you may need to do it on your own.
+If you are [using the `OnRead` event to optimize the data requests](slug:components/grid/manual-operations), you may want to call that to fetch fresh data from the server. The Grid does that automatically after the [edit operations](slug:grid-editing-overview), yet you may need to do it on your own.
 
 To make the Grid fire `OnRead`, execute its [`SetStateAsync` method](slug:grid-state)
 
@@ -365,7 +365,7 @@ The reason for such behavior is that the `Data` collection of the grid is a sepa
 
 This means that you need to ensure that the view-model will be updated as well, so that the `Data` parameter of the grid changes too. There are, generally, two ways to do this:
 
-* Use the [`OnRead` event to perform the grid data operations](slug:components/grid/manual-operations) - the grid will call it after the [CUD events like `OnUpdate`, `OnDelete`, `OnCreate`](slug:components/grid/editing/overview#notes) and it will let you query the database that was already update (which will also bring in other updates that other uses may have made).
+* Use the [`OnRead` event to perform the grid data operations](slug:components/grid/manual-operations) - the grid will call it after the [CUD events like `OnUpdate`, `OnDelete`, `OnCreate`](slug:grid-editing-overview#notes) and it will let you query the database that was already update (which will also bring in other updates that other uses may have made).
 
 * Update the local view-model data yourself with the information the grid event gives you (e.g., insert the new item in it, or remove a deleted item, or update the fields of an edited item). You can find similar code used in the [Grid - Inline Editing Live Demo](https://demos.telerik.com/blazor-ui/grid/editing-inline).
 
diff --git a/components/grid/selection/cells.md b/components/grid/selection/cells.md
index 590bedcdb6..d57d3fd55e 100644
--- a/components/grid/selection/cells.md
+++ b/components/grid/selection/cells.md
@@ -188,9 +188,9 @@ The `GridSelectedCellDescriptor` type exposes the following properties:
 
 When the Grid `Data` collection changes, the `SelectedCells` collection has the following behavior:
 
-* When the user updates a selected cell and the item instance is replaced, you have to also replace the `DataItem` object in the `SelectedCells` collection. Do that in the [Grid `OnUpdate` event](slug:components/grid/editing/overview#events).
+* When the user updates a selected cell and the item instance is replaced, you have to also replace the `DataItem` object in the `SelectedCells` collection. Do that in the [Grid `OnUpdate` event](slug:grid-editing-overview#events).
 * When the user deletes a row with selected cells, update the `SelectedCells` collection in the the Grid `OnDelete` event handler.
-* To select cells from a new item in the Grid you can use the [`OnCreate` event](slug:components/grid/editing/overview#events) to update the `SelectedCells` collection.
+* To select cells from a new item in the Grid you can use the [`OnCreate` event](slug:grid-editing-overview#events) to update the `SelectedCells` collection.
 
 ### Equals Comparison
 
@@ -209,8 +209,8 @@ The selection feature behavior may vary when the Grid configuration combines cel
 
 When you want to edit a Grid item, the cell selection has the following behavior:
 
-* Cell selection is not supported with [`Incell` edit mode](slug:components/grid/editing/incell) due to the overlapping pointer events that trigger selection and editing.
-* [`Inline` edit mode](slug:components/grid/editing/inline) and [`Popup` edit mode](slug:components/grid/editing/popup) integrate with cell selection without limitations.
+* Cell selection is not supported with [`Incell` edit mode](slug:grid-editing-incell) due to the overlapping pointer events that trigger selection and editing.
+* [`Inline` edit mode](slug:grid-editing-inline) and [`Popup` edit mode](slug:grid-editing-popup) integrate with cell selection without limitations.
 
 ### Selection and Virtual Scrolling
 
diff --git a/components/grid/selection/rows.md b/components/grid/selection/rows.md
index eba9643318..567060fce3 100644
--- a/components/grid/selection/rows.md
+++ b/components/grid/selection/rows.md
@@ -158,9 +158,9 @@ You can respond to user selection actions through the `SelectedItemsChanged` eve
 
 When the Grid `Data` collection changes, the `SelectedItems` collection has the following behavior:
 
-* When the user updates a selected item and the item instance is replaced, you have to also replace the selected item object in the `SelectedItems` collection. Do that in the [Grid `OnUpdate` event](slug:components/grid/editing/overview#events).
+* When the user updates a selected item and the item instance is replaced, you have to also replace the selected item object in the `SelectedItems` collection. Do that in the [Grid `OnUpdate` event](slug:grid-editing-overview#events).
 * When the user deletes a selected item, the Grid automatically deletes it from the `SelectedItems` collection and the [`SelectedItemsChanged` event](#selecteditemschanged-event) fires.
-* To select a new item in the Grid you can use the [`OnCreate` event](slug:components/grid/editing/overview#events) to update the `SelectedItems` collection.
+* To select a new item in the Grid you can use the [`OnCreate` event](slug:grid-editing-overview#events) to update the `SelectedItems` collection.
 
 ## Equals Comparison
 
@@ -179,8 +179,8 @@ The selection behavior may vary when other Grid features are enabled, such as ed
 
 When users edit rows, the row selection has the following behavior:
 
-* In [`Incell` edit mode](slug:components/grid/editing/incell) the row selection can work only through a [checkbox column](slug:components/grid/columns/checkbox). This is required due to the overlapping pointer events that trigger selection and editing. To see how to select the row that is being edited in `InCell` edit mode without using a `<GridCheckboxColumn />` check out the [Row Selection in Edit with InCell EditMode](slug:grid-kb-row-select-incell-edit) KB article.
-* [`Inline` edit mode](slug:components/grid/editing/inline) and [`Popup` edit mode](slug:components/grid/editing/popup) integrate with row selection without limitations.
+* In [`Incell` edit mode](slug:grid-editing-incell) the row selection can work only through a [checkbox column](slug:components/grid/columns/checkbox). This is required due to the overlapping pointer events that trigger selection and editing. To see how to select the row that is being edited in `InCell` edit mode without using a `<GridCheckboxColumn />` check out the [Row Selection in Edit with InCell EditMode](slug:grid-kb-row-select-incell-edit) KB article.
+* [`Inline` edit mode](slug:grid-editing-inline) and [`Popup` edit mode](slug:grid-editing-popup) integrate with row selection without limitations.
 
 ### Selection and Virtual Scrolling
 
diff --git a/components/grid/state.md b/components/grid/state.md
index 57b9998918..049bc989f1 100644
--- a/components/grid/state.md
+++ b/components/grid/state.md
@@ -31,12 +31,12 @@ The Grid state is a generic [class `GridState<TItem>`](slug:Telerik.Blazor.Compo
 | --- | --- | --- |
 | `CollapsedGroups` | `ICollection<int>` | The indexes of all collapsed [groups](slug:components/grid/features/grouping) when `LoadGroupsOnDemand="false"`, i.e. when not [loading groups on demand](slug:grid-group-lod). |
 | `ColumnStates` | `ICollection<GridColumnState>` | Information about each [column's reorder index, width, visibility, locked state, `Id` parameter value and `Field`](slug:components/grid/columns/bound). The column order in the collection matches the column order in the Grid declaration. On the other hand, the `Index` property matches the current column's position in the UI. **`Id` and `Field` are always `null` after deserialization, because these properties have no public setters.** |
-| `EditField` | `string` | The currently edited data item property in [`Incell` edit mode](slug:components/grid/editing/incell). |
-| `EditItem` | `TItem`* | The currently edited data item in [any edit mode](slug:components/grid/editing/overview). |
+| `EditField` | `string` | The currently edited data item property in [`Incell` edit mode](slug:grid-editing-incell). |
+| `EditItem` | `TItem`* | The currently edited data item in [any edit mode](slug:grid-editing-overview). |
 | `ExpandedItems` | `ICollection<TItem>` | The expanded data items, when [using `<DetailTemplate>` (hierarchy)](slug:components/grid/features/hierarchy). |
 | `FilterDescriptors` | `ICollection<IFilterDescriptor>` | A collection of [`CompositeFilterDescriptor`](slug:common-features-descriptors#filtering), except the ones that relate to the [`GridSearchBox`](slug:grid-searchbox). |
 | `GroupDescriptors` | `ICollection<GroupDescriptor>` | Information about currently applied [grouping](slug:components/grid/features/grouping). |
-| `InsertedItem` | `TItem`* | The data item that is being added in `Inline` or `Popup` edit mode. [Not applicable for `Incell` editing](slug:components/grid/editing/incell#event-sequence). |
+| `InsertedItem` | `TItem`* | The data item that is being added in `Inline` or `Popup` edit mode. [Not applicable for `Incell` editing](slug:grid-editing-incell#event-sequence). |
 | `OriginalEditItem` | `TItem`* | The original copy of the data item that is currently in edit mode. This `GridState` property holds the unmodified data item values. |
 | `Page` | `int?` | The current [page index](slug:components/grid/features/paging). Some user actions reset the page index to 1, such as filtering or changing the page size. |
 | `SearchFilter` | `IFilterDescriptor` | The [`CompositeFilterDescriptor`](slug:common-features-descriptors#filtering) that holds the filter descriptors for the [`GridSearchBox`](slug:grid-searchbox). |
@@ -166,7 +166,7 @@ The example below shows how to apply initial sorting, filtering and grouping.
 Here is some additional information about certain `PropertyName` values:
 
 * `EditItem` is used when the user starts editing an existing item.
-* `InsertedItem` signifies the user adding a new item in inline or popup edit mode. It's [not applicable for `Incell` editing](slug:components/grid/editing/incell#event-sequence).
+* `InsertedItem` signifies the user adding a new item in inline or popup edit mode. It's [not applicable for `Incell` editing](slug:grid-editing-incell#event-sequence).
 * `OriginalEditItem` is used when the user exits edit or insert mode via save or cancel.
 * `ColumnStates` is used for several column actions such as hiding, showing, locking, reordering and resizing.
 
@@ -376,7 +376,7 @@ If you want to make changes to the current Grid state:
 
 > Do not use `GetState()` in the [`OnStateInit`](#onstateinit) or [`OnStateChanged`](#onstatechanged) events. Do not use `SetStateAsync()` in `OnStateInit`. Instead, get or set the `GridState` property of the event argument.
 >
-> Avoid calling `SetStateAsync` in the Grid [CRUD methods](slug:components/grid/editing/overview) (such as [`OnRead`](slug:components/grid/manual-operations), `OnUpdate`, `OnEdit`, `OnCreate`, `OnCancel`). Doing so may lead to unexpected results because the Grid has more logic to execute after these events. Setting the Grid state fires `OnRead`, so calling `SetStateAsync()` in this handler can lead to an endless loop.
+> Avoid calling `SetStateAsync` in the Grid [CRUD methods](slug:grid-editing-overview) (such as [`OnRead`](slug:components/grid/manual-operations), `OnUpdate`, `OnEdit`, `OnCreate`, `OnCancel`). Doing so may lead to unexpected results because the Grid has more logic to execute after these events. Setting the Grid state fires `OnRead`, so calling `SetStateAsync()` in this handler can lead to an endless loop.
 
 >tip To reset the Grid state to its initial markup configuration, call `SetStateAsync(null)`.
 >
diff --git a/components/grid/templates/column.md b/components/grid/templates/column.md
index 9fdb62d154..18d094995b 100644
--- a/components/grid/templates/column.md
+++ b/components/grid/templates/column.md
@@ -14,7 +14,7 @@ By default, each Grid cell renders the value of the respective column `Field` of
 
 ## Basics
 
-To define a column template, use a `<Template>` tag inside the `<GridColumn>` tag. The Grid uses the defined `Template` to show the "view" representation of all cells in that column. This also includes cells from [columns that are marked as `Editable="false"`](slug:components/grid/columns/bound#data-operations), while the cells' parent row is in [inline edit mode](slug:components/grid/editing/inline).
+To define a column template, use a `<Template>` tag inside the `<GridColumn>` tag. The Grid uses the defined `Template` to show the "view" representation of all cells in that column. This also includes cells from [columns that are marked as `Editable="false"`](slug:components/grid/columns/bound#data-operations), while the cells' parent row is in [inline edit mode](slug:grid-editing-inline).
 
 Visual Studio tends to autocomplete the `<Template>` tag with a lowercase `t` which breaks the template logic and does not allow you to access the `context`. Ensure the `Template` tag uses a capital `T`. 
 
diff --git a/components/grid/templates/editor.md b/components/grid/templates/editor.md
index c36bcd0e52..88c46218e8 100644
--- a/components/grid/templates/editor.md
+++ b/components/grid/templates/editor.md
@@ -10,15 +10,29 @@ position: 15
 
 # Editor Template
 
-The column's `EditorTemplate` defines the inline template or component that will be rendered when the user is [editing](slug:components/grid/editing/overview) the field. It is also used when inserting a new item.
+The column's `EditorTemplate` defines the inline template or component that will be rendered when the user is [editing](slug:grid-editing-overview) the field. It is also used when inserting a new item.
 
 You can data bind components in the editor template to the current `context`. This is the data item instance, which is bound to the currently edited Grid row. Cast `context` to the data item type and store it in a global or local variable. Then, use this variable for one-way or two-way binding in the `EditorTemplate`.
 
-The template receives a **copy** of the original model, so that changes can be canceled with the `Cancel` command. See the [**Notes** section in the Grid Editing Overview](slug:components/grid/editing/overview#notes) for more details on how and when that copy is created.
+The template receives a copy of the original data item. This allows users to cancel their edits and restore the original property value. The [CRUD Events section](slug:grid-editing-overview#events) provides more information about this programmatic item creation.
 
 If you need more complex logic inside the editor template, compared to simple data binding, use the `change` event of the custom editor component. You can also use a [custom Grid edit form](slug:grid-kb-custom-edit-form).
 
->tip The Editor Template works in all edit modes (Inline, Popup, InCell). Before using it with InCell mode, review the [pertinent notes](slug:components/grid/editing/incell#editor-template).
+>tip The Editor Template works in all edit modes (Inline, Popup, InCell). Before using it with InCell mode, review the [pertinent notes](slug:grid-editing-incell#editor-template).
+
+When an input receives an `EditContext` (usually comes down as a cascading parameter), the framework also requires a `ValueExpression`. If you use two-way binding (the `@bind-Value` syntax), the `ValueExpression` is deducted from there. However, if you use only the `Value` property, you have to pass the `ValueExpression` yourself. This is a lambda expression that tells the framework what field in the model to update. The following sample demonstrates how to achieve that. You can also check the [Requires a value for ValueExpression](slug://common-kb-requires-valueexpression) knowledge base article for more details.
+
+<div class="skip-repl"></div>
+````RAZOR
+<EditorTemplate>
+    <TelerikTextBox Value="@myModel.MyField"
+                    ValueExpression="@( () => myModel.MyField )">
+    </TelerikTextBox>
+</EditorTemplate>
+
+@* Applies to the other input type components as well *@
+````
+
 
 **In this article:**
 
@@ -32,7 +46,7 @@ If you need more complex logic inside the editor template, compared to simple da
 
 * @[template](/_contentTemplates/common/inputs.md#edit-debouncedelay)
 
-* The Grid row creates an `EditContext` and passes it to the `EditorTemplate`. You can read more about it in the [**Notes** section of the Editing Overview](slug:components/grid/editing/overview#notes) article.
+* The Grid row creates an `EditContext` and passes it to the `EditorTemplate`. You can read more about it in the [**Notes** section of the Editing Overview](slug:grid-editing-overview#notes) article.
 
 * We recommend casting the Editor Template context to your model and storing it in a local or a dedicated global variable. Do not share a global variable within multiple templates, like column (cell) template and editor template. Variable sharing can lead to unexpected behavior.
 
@@ -407,6 +421,27 @@ Also check the [Grid Foreign Key Column](slug:grids-foreign-key) knowledge base
 
 ![Editor Template for a foreign key](images/edit-template-foreign-key.png)
 
+## In-Cell Editor Templates
+
+The incell editor template requires a focusable element to maintain the tab order when using the keyboard. If you prevent editing based on a runtime condition, you must provide some focusable element. (Setting `Editable=false` for the entire column does not require a focusable element.) Here is one way to add a focusable non-editable element:
+
+<div class="skip-repl"></div>
+
+````RAZOR
+<EditorTemplate>
+    @{
+        if (myCurrentEditCondition)
+        {
+            <MyCustomEditor />
+        }
+        else
+        {
+            <div tabindex="0">editing not allowed</div>
+        }
+    }
+</EditorTemplate>
+````
+
 ## See Also
 
 * [Live Demo: Grid Templates](https://demos.telerik.com/blazor-ui/grid/templates)
diff --git a/components/grid/templates/popup-form-template.md b/components/grid/templates/popup-form-template.md
index c69ea9d255..641052d1b8 100644
--- a/components/grid/templates/popup-form-template.md
+++ b/components/grid/templates/popup-form-template.md
@@ -27,10 +27,10 @@ With the `FormTemplate` feature, you can customize the appearance and content of
 ## Specifics
 
 When using the template, the default Popup form is replaced by the declared content within the `FormTemplate` tag. This introduces the following specifics:
-* The default **Update** and **Cancel** buttons are removed. This means that the [`OnUpdate` and `OnCancel`](slug:components/grid/editing/overview#events) events cannot be triggered. To modify or cancel the update of a record, you need to include custom controls to manage these actions. 
+* The default **Update** and **Cancel** buttons are removed. This means that the [`OnUpdate` and `OnCancel`](slug:grid-editing-overview#events) events cannot be triggered. To modify or cancel the update of a record, you need to include custom controls to manage these actions. 
 * The popup footer remains empty by design. You can [either hide it or place your custom buttons in it](slug:grid-kb-handle-empty-popup-footer).
 * The `FormTemplate` disables the [built-in validation](slug:grid-editing-validation) of the Grid. Implement a [Form Validation](slug:form-validation) instead.
-* The [`<GridPopupEditFormSettings>` parameters](slug:components/grid/editing/popup#edit-form-customization) do not apply to a custom `TelerikForm` that you may render inside the `<FormTemplate>` tag. Set the desired Form configurations such as `Columns`, `Orientation`, and more on the [Form component](slug:form-overview#form-parameters).
+* The [`<GridPopupEditFormSettings>` parameters](slug:grid-editing-popup#form-layout) do not apply to a custom `TelerikForm` that you may render inside the `<FormTemplate>` tag. Set the desired Form configurations such as `Columns`, `Orientation`, and more on the [Form component](slug:form-overview#form-parameters).
 
 ## Example
 
diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md
index 0b891a409b..e550ff93dc 100644
--- a/components/grid/toolbar.md
+++ b/components/grid/toolbar.md
@@ -22,7 +22,7 @@ The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) provides se
 
 | Tool Name | Tool Tag | Description |
 | --- | --- | --- |
-| Add | `GridToolBarAddTool` | An add command that fires the [`OnAdd` event](slug:components/grid/editing/overview#events). |
+| Add | `GridToolBarAddTool` | An add command that fires the [`OnAdd` event](slug:grid-editing-overview#events). |
 | CsvExport | `GridToolBarCsvExportTool` | An export command for CSV files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
 | ExcelExport | `GridToolBarExcelExportTool` | An export command for Excel files that fires the [`OnBeforeExport` event](slug:grid-export-events#onbeforeexport). |
 | SearchBox | `GridToolBarSearchBoxTool` | A searchbox that filters multiple Grid columns simultaneously. |
diff --git a/components/scheduler/manual-operations.md b/components/scheduler/manual-operations.md
index 27883c3b1e..4e71b60cb0 100644
--- a/components/scheduler/manual-operations.md
+++ b/components/scheduler/manual-operations.md
@@ -196,7 +196,7 @@ Using Telerik DataSource extension methods to manipulate all the data into paged
 
 ## See Also
 
-  * [CRUD Operations Overview](slug:components/grid/editing/overview)
+  * [CRUD Operations Overview](slug:grid-editing-overview)
   * [Live Demo: Manual Data Source Operations](https://demos.telerik.com/blazor-ui/grid/manual-operations)
   * [Use OData Service](https://github.com/telerik/blazor-ui/tree/master/grid/odata)
   
diff --git a/components/treelist/editing/built-in-dialogs/delete-confirmation.md b/components/treelist/editing/built-in-dialogs/delete-confirmation.md
deleted file mode 100644
index 2da27ddfc5..0000000000
--- a/components/treelist/editing/built-in-dialogs/delete-confirmation.md
+++ /dev/null
@@ -1,188 +0,0 @@
----
-title: Delete Confirmation
-page_title: TreeList - Delete Confirmation Dialog
-description: Enable delete confirmation dialog in TreeList for Blazor.
-slug: treelist-delete-confirmation
-tags: telerik,blazor,treelist,delete,confirmation,dialog
-published: True
-position: 3
----
-
-# Delete Confirmation Dialog
-
-This article provides information on how to enable the built-in delete confirmation dialog and how you can create a custom dialog:
-* [Basics](#basics)
-* [Custom Delete Confirmation Dialog](#custom-delete-confirmation-dialog)
-
-## Basics
-
-The built-in delete confirmation dialog triggers before item deletion. You can enable it by setting the `ConfirmDelete` parameter of the TreeList to `true`.
-
->caption Enabling of the Delete Confirmation Dialog
-
-````RAZOR
-@* TreeList with enabled Delete Confirmation Dialog *@
-
-@using System.ComponentModel.DataAnnotations
-
-<TelerikTreeList Data="@Data"
-                 OnDelete="@DeleteItem"
-                 Pageable="true" Height="400px" 
-                 ConfirmDelete="true">
-    <TreeListColumns>
-        <TreeListCommandColumn>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-        </TreeListCommandColumn>
-        <TreeListColumn Field="Name" Expandable="true" />
-        <TreeListColumn Field="Id" />
-        <TreeListColumn Field="EmailAddress" />
-        <TreeListColumn Field="HireDate" />
-    </TreeListColumns>
-</TelerikTreeList>
-
-@code {
-    public List<Employee> Data { get; set; }
-
-    async Task DeleteItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-
-        await MyService.Delete(item);
-
-        await GetTreeListData();
-    }
-
-    public class Employee
-    {
-        public int Id { get; set; }
-
-        [Required]
-        public string Name { get; set; }
-        public string EmailAddress { get; set; }
-        public DateTime HireDate { get; set; }
-
-        public List<Employee> DirectReports { get; set; }
-        public bool HasChildren { get; set; }
-
-        public override bool Equals(object obj)
-        {
-            if (obj is Employee)
-            {
-                return this.Id == (obj as Employee).Id;
-            }
-            return false;
-        }
-    }
-
-    async Task GetTreeListData()
-    {
-        Data = await MyService.Read();
-    }
-
-    protected override async Task OnInitializedAsync()
-    {
-        await GetTreeListData();
-    }
-
-    public static class MyService
-    {
-        private static List<Employee> _data { get; set; } = new List<Employee>();
-        private static int LastId { get; set; } = 1;
-
-        public static async Task<List<Employee>> 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<Employee>(),
-                        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<Employee>(),
-                            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++;
-                        }
-                    }
-                }
-            }
-
-            return await Task.FromResult(_data);
-        }
-
-        public static async Task Delete(Employee itemToDelete)
-        {
-            RemoveChildRecursive(_data, itemToDelete);
-        }
-
-        static void RemoveChildRecursive(List<Employee> 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;
-                    }
-                }
-            }
-        }
-    }
-}
-````
-
-## Custom Delete Confirmation Dialog
-
-@[template](/_contentTemplates/grid/built-in-dialogs.md#delete-confirmation)
-
-
-## See Also
-
-* [Live Demo: TreeList Inline Editing](https://demos.telerik.com/blazor-ui/treelist/editing-inline)
-* [Live Demo: TreeList Popup Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup)
-* [Live Demo: TreeList InCell Editing](https://demos.telerik.com/blazor-ui/treelist/editing-incell)
-* [Live Demo: TreeList Custom Editor Template](https://demos.telerik.com/blazor-ui/treelist/custom-editor)
-* [Live Demo: TreeList Custom Edit Form](https://demos.telerik.com/blazor-ui/treelist/editing-custom-form)
-* [Customize the Delete Confirmation Dialog](slug:grid-kb-customize-delete-confirmation-dialog)
-
-
diff --git a/components/treelist/editing/built-in-dialogs/overview.md b/components/treelist/editing/built-in-dialogs/overview.md
deleted file mode 100644
index ce2d83c343..0000000000
--- a/components/treelist/editing/built-in-dialogs/overview.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Overview
-page_title: Editing - Built-in Dialogs Overview
-description: Enable built-in dialogs in TreeList for Blazor.
-slug: components/treelist/features/built-in-dialogs
-tags: telerik,blazor,treelist,built,in,dialogs
-published: True
-previous_url: /treelist/built-in-dialogs
-position: 0
----
-
-# TreeList Built-in Dialogs
-You can enable built-in dialogs in TreeList to provide an extra step for the end-user before a TreeList operation.
-
-The TreeList component can use built-in dialogs for: 
-
-* [delete confirmation](slug:treelist-delete-confirmation) - displays a confirmation dialog when the user clicks the "**delete**" command button.
-
-The default texts of the dialogs are exposed in the [localization](slug:globalization-localization) messages of the component, and you can customize them.
-
-## See Also
-
-* [Live Demo: TreeList Inline Editing](https://demos.telerik.com/blazor-ui/treelist/editing-inline)
-* [Live Demo: TreeList Popup Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup)
-* [Live Demo: TreeList InCell Editing](https://demos.telerik.com/blazor-ui/treelist/editing-incell)
-* [Live Demo: TreeList Custom Editor Template](https://demos.telerik.com/blazor-ui/treelist/custom-editor)
-* [Live Demo: TreeList Custom Edit Form](https://demos.telerik.com/blazor-ui/treelist/editing-custom-form)
-
diff --git a/components/treelist/editing/images/incell-editing.png b/components/treelist/editing/images/incell-editing.png
deleted file mode 100644
index d208a01a17..0000000000
Binary files a/components/treelist/editing/images/incell-editing.png and /dev/null differ
diff --git a/components/treelist/editing/images/inline-editing.png b/components/treelist/editing/images/inline-editing.png
deleted file mode 100644
index 5826ce659a..0000000000
Binary files a/components/treelist/editing/images/inline-editing.png and /dev/null differ
diff --git a/components/treelist/editing/images/popup-editing.png b/components/treelist/editing/images/popup-editing.png
deleted file mode 100644
index 1f76283a82..0000000000
Binary files a/components/treelist/editing/images/popup-editing.png and /dev/null differ
diff --git a/components/treelist/editing/incell.md b/components/treelist/editing/incell.md
index e5fff9b21e..105f325630 100644
--- a/components/treelist/editing/incell.md
+++ b/components/treelist/editing/incell.md
@@ -1,365 +1,123 @@
 ---
 title: InCell Editing
 page_title: TreeList - InCell Editing
-description: In-cell editing of data in treelist for Blazor.
+description: In-cell editing of data in TreeList for Blazor.
 slug: treelist-editing-incell
-tags: telerik,blazor,treelist,in cell,editing
+tags: telerik, blazor, treelist, editing, incell
 published: True
 position: 4
 ---
 
-# TreeList InCell Editing
+# TreeList In-Cell Editing
 
-In Cell editing allows the user to click cells and type new values immediately like in Excel. There is no need for Edit, Update and Cancel buttons.
+In-cell editing allows users to click TreeList data cells and type new values like in Excel. There is no need for command buttons to enter and exit edit mode. Users can quickly move between the editable cells and rows by using keyboard navigation.
 
-Users can use the `Tab`, `Shift+Tab` and `Enter` keys to move between edited cells quickly. If validation is not satisfied, the user cannot exit edit mode, unless they satisfy validation, or cancel changes by pressing `Esc`.
-
-Command columns and non-editable columns are skipped while tabbing.
-
-The InCell edit mode provides a specific user experience and behaves differently than other edit modes. Please review the notes below to get a better understanding of these specifics.
-
-
-#### Sections in this article
-
-* [Basics](#basics)
-* [Event Sequence](#event-sequence)
-* [Incell Editing and Selection](#incell-editing-and-selection)
-* [Adding Children to Collapsed Items](#adding-children-to-collapsed-items)
-* [Editor Template](#editor-template)
+The in-cell edit mode provides a different user experience, compared to the inline and popup edit modes. In-cell edit mode can be more convenient for advanced users, fast users, or users who prefer keyboard navigation rather than clicking command buttons.
 
+@[template](/_contentTemplates/treelist/editing.md#overview-required)
 
 ## Basics
 
-To enable InCell editing mode, set the `EditMode` property of the TreeList to `Telerik.Blazor.TreeListEditMode.Incell`. You can handle the `OnUpdate`, `OnCreate` and `OnDelete` events to perform the CUD operations, as shown in the example below.
+To use in-cell TreeList editing, [set the TreeList `EditMode` parameter to `TreeListEditMode.Incell`](slug:treelist-editing-overview#edit-modes). During in-cell editing, only one table cell is in edit mode at a time. Users can:
 
-To add a new item, you must add a [toolbar](slug:treelist-toolbar) with an `Add` command. `OnCreate` will fire immediately when you click the `Add` button - see [Event Sequence](#event-sequence) below.
+* 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 on another cell to confirm the current value and edit the new cell.
+* Click outside the TreeList to confirm the current value and exit edit mode.
+* Peform another TreeList operation, for example, paging or sorting, to cancel the current edit operation.
 
-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.
+Command columns and non-editable columns are skipped while tabbing.
 
->caption Incell Editing Example. See the code comments for details.
+## Commands
 
-````RAZOR
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
+In-cell add, edit, and delete operations use the following [command buttons](slug:treelist-editing-overview#commands):
 
-Click a cell, edit it and click outside of the treelist to see the change. You can also use Tab, Shift+Tab and Enter to navigate between the cells.
-<br />
-Editing is cancelled for the first record.
-<br />
+* **Add**
+* **Delete**
 
-<TelerikTreeList Data="@Data"
-                 EditMode="@TreeListEditMode.Incell"
-                 OnUpdate="@UpdateItem"
-                 OnDelete="@DeleteItem"
-                 OnCreate="@CreateItem"
-                 OnEdit="@OnEditHandler"
-                 OnCancel="@OnCancelHandler"
-                 Pageable="true" ItemsField="@(nameof(Employee.DirectReports))"
-                 Width="850px">
-    <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</TreeListCommandButton>
-    </TreeListToolBarTemplate>
-    <TreeListColumns>
-        <TreeListCommandColumn Width="200px">
-            <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-        </TreeListCommandColumn>
+@[template](/_contentTemplates/treelist/editing.md#without-commands)
 
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="120px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate" Width="220px" />
-    </TreeListColumns>
-</TelerikTreeList>
+Unlike [inline editing](slug:treelist-editing-inline), the in-cell edit mode does not use **Edit**, **Save**, and **Cancel** command buttons.
 
-@code {
-    public List<Employee> Data { get; set; }
-
-    // Sample CUD operations for the local data
-    async Task UpdateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-    }
-
-    async Task CreateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-        var parentItem = args.ParentItem as Employee;
-
-        // perform actual data source operations here through your service
-        await MyService.Create(item, parentItem);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-    }
-
-    async Task DeleteItem(TreeListCommandEventArgs args)
-    {
-        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();
-    }
-
-    // OnEdit handler
-
-    async Task OnEditHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-        if (empl.Id == 1)
-        {
-            // prevent opening for edit based on condition
-            args.IsCancelled = true;
-            Console.WriteLine("You cannot edit this item");
-        }
-    }
-
-    // OnCancel handler
-
-    async Task OnCancelHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-        // if necessary, perform actual data source operation here through your service
-    }
-
-
-    // sample model
-
-    public class Employee
-    {
-        public int Id { get; set; }
-        [Required]
-        public string Name { get; set; }
-        public string EmailAddress { get; set; }
-        public DateTime HireDate { get; set; }
-
-        public List<Employee> DirectReports { get; set; }
-        public bool HasChildren { get; set; }
-
-        // 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;
-        }
-    }
-
-    // data generation
-
-    async Task GetTreeListData()
-    {
-        Data = await MyService.Read();
-    }
-
-    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<Employee> _data { get; set; } = new List<Employee>();
-        // 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;
-
-        public static async Task Create(Employee itemToInsert, Employee parentItem)
-        {
-            InsertItemRecursive(_data, itemToInsert, parentItem);
-        }
-
-        public static async Task<List<Employee>> 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<Employee>(),
-                        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<Employee>(),
-                            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++;
-                        }
-                    }
-                }
-
-                _data[0].Name += " (non-editable, see OnEdit)";
-            }
-
-            return await Task.FromResult(_data);
-        }
-
-        public static async Task Update(Employee itemToUpdate)
-        {
-            UpdateItemRecursive(_data, itemToUpdate);
-        }
-
-        public static async Task Delete(Employee itemToDelete)
-        {
-            RemoveChildRecursive(_data, itemToDelete);
-        }
-
-        // sample helper methods for handling the view-model data hierarchy
-        static void UpdateItemRecursive(List<Employee> 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);
-                }
-            }
-        }
-
-        static void RemoveChildRecursive(List<Employee> 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;
-                    }
-                }
-            }
-        }
-
-        static void InsertItemRecursive(List<Employee> Data, Employee insertedItem, Employee parentItem)
-        {
-            insertedItem.Id = LastId++;
-            if (parentItem != null)
-            {
-                parentItem.HasChildren = true;
-                if (parentItem.DirectReports == null)
-                {
-                    parentItem.DirectReports = new List<Employee>();
-                }
-
-                parentItem.DirectReports.Insert(0, insertedItem);
-            }
-            else
-            {
-                Data.Insert(0, insertedItem);
-            }
-        }
-    }
-}
-````
+## Events
 
->caption The result from the code snippet above, after the user clicks in the Name column of the row with ID 4
+Users enter and exit in-cell edit mode cell by cell, so the [`OnEdit`, `OnCancel`, and `OnUpdate` events](slug:treelist-editing-overview#events) also fire cell by cell.
 
-![Blazor TreeList Incell Editing](images/incell-editing.png)
+In in-cell edit mode, the `OnAdd` and `OnCreate` events fire immediately one after the other, unless `OnAdd` is cancelled. This means that:
 
+* The new row is added to the TreeList data source before users start editing it.
+* Valid [default values](slug:grid-kb-default-value-for-new-row) are recommended.
+* Users are always editing existing rows, not adding new ones.
+* The [`InsertedItem` property](slug:treelist-state#information-in-the-treelist-state) of the [TreeList state](slug:treelist-state) is not used and is always `null`.
+* To [add a new row programmatically and put it in edit mode](slug:grid-kb-add-edit-state), use the `OriginalEditItem`, `EditItem`, and `EditField` properties of the TreeList state.
 
-## Event Sequence
+The above algorithm is different from [inline](slug:treelist-editing-inline) and [popup](slug:treelist-editing-popup) editing where new rows are only added to the data source after users populate them with valid values.
 
-* The `OnCreate` event will fire as soon as you click the `Add` button. The Grid will render the new row and enter edit mode for the first editable column (to fire `OnEdit` and let the user alter the column). This means you should have [default values](slug:grid-kb-default-value-for-new-row) that satisfy any initial validation and requirements your models may have.
+## Integration with Other Features
 
-    * This means that there is no actual inserted item, an item in InCell editing is always in Edit mode, never in Insert mode. Thus, you cannot use the `InsertedItem` field of the TreeList [State](slug:treelist-state). If you want to insert items programmatically in the TreeList, alter the `Data` collection, and use the `OriginalEditItem` feature of the state (see the [Initiate Editing or Inserting of an Item](slug:treelist-state#initiate-editing-or-inserting-of-an-item) example - it can put the InLine and Popup edit modes in Insert mode, but this cannot work for InCell editing).
+Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:treelist-editing-overview#integration-with-other-features).
 
-* The `OnEdit` event fires every time a cell is opened for editing. Until version **2.27**, the event fired **once per row** - when the user edits a cell from a different row.
+### Add, Edit
 
-* The `OnUpdate` event fires every time an edited cell is closed. Until version **2.27**, the event fired **once per row** - when the currently edited row loses focus.
+This section explains what happens when the component is already in add or edit mode, and the user tries to add or edit another cell.
 
-* If there is a cell that is being edited at the moment, clicking on another cell will first close the current cell and fire `OnUpdate`. To start editing the new cell, you need a second click. When the user removes focus from the TreeList or the current row, the `OnUpdate` event fires, where the data-access logic can move it to the actual data source.
+* If the validation is not satisfied, the component blocks the user action until they complete or cancel the current add or edit operation.
+* If the validation is satisfied, then editing completes and the component fires `OnUpdate`.
 
-* The `OnCancel` event works only when pressing `Esc`. The `Cancel` command button is not supported. Clicking outside the currently edited cell will trigger `OnUpdate` and thus, clicking on the `Cancel` command button will not fire the `OnCancel` event, because an update has already occurred.
+### Delete, Filter, Page, Search, Sort
 
+This section explains what happens when the user tries to perform another data operation, while the component is already in add or edit mode.
 
-## Incell Editing and Selection
+* If the validation is satisfied, then editing completes and the component fires `OnUpdate`.
+* If the validation is not satisfied, then editing aborts and the component fires `OnCancel`.
 
-* To enable item selection with InCell Edit Mode, add a `<TreeListCheckboxColumn />` to the `<Columns>` collection. More information on that can be read in the [Selection](slug:treelist-selection-row#selection-and-editing-modes ) article.
+### Selection
 
+To enable [row selection](slug:treelist-selection-row) with in-cell edit mode, use a [checkbox column](slug:treelist-columns-checkbox). More information on that can be read in the [Row Selection](slug:treelist-selection-row#selection-and-editing-modes) article.
 
-## Adding Children to Collapsed Items
+To see how to select the row that is currently in in-cell edit mode without using a `<TreeListCheckboxColumn />`, see the [Row Selection in Edit with InCell EditMode](slug:grid-kb-row-select-incell-edit) Knowledge Base article.
 
-If you click the "Add" button on a row that is not expanded, you will not see the new child row in the UI. There will be an `OnCreate` call to insert a record, but editing (and inserting) items is a separate operation from expanding items and the TreeList should not invoke these changes arbitrarily. There can be other handlers, business logic or load-on-demand attached to that action, and that changes the users state. This also applies to items that currently have no child items - they will now have a child item, but it will not expand and open for editing.
+[Cell selection](slug:treelist-selection-cell) is not supported with in-cell edit mode.
 
+## Example
 
-## Editor Template
+The example below shows how to:
 
-The incell editor template requires a focusable element to maintain the tab order when using the keyboard. If you prevent editing based on a runtime condition, you must provide some focusable element. (Setting `Editable=false` for the entire column does not require a focusable element.) Here is one way to add a focusable non-editable element:
+* Implement in-cell TreeList CRUD operations with the minimal required number of events.
+* Bind an editable TreeList to [flat data](slug:treelist-data-binding-flat-data). Check the [popup editing example] for an implementation with [hierarchical data](slug:treelist-data-binding-hierarchical-data).
+@[template](/_contentTemplates/treelist/editing.md#basic-example-description)
 
-<div class="skip-repl"></div>
+>caption Basic TreeList in-cell editing configuration
 
 ````RAZOR
-    <EditorTemplate>
-    @{
-        if (myCurrentEditCondition)
-        {
-            <MyCustomEditor />
-        }
-        else
-        {
-            <div tabindex="0">editing not allowed</div>
-        }
-    }
-</EditorTemplate>
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikTreeList Data="@TreeListData"
+                 IdField="@nameof(Employee.Id)"
+                 ParentIdField="@nameof(Employee.ParentId)"
+                 ConfirmDelete="true"
+                 EditMode="@TreeListEditMode.Incell"
+@[template](/_contentTemplates/treelist/editing.md#basic-example-parameters-columns)
+        <TreeListCommandColumn Width="120px">
+            <TreeListCommandButton Command="Add">Add</TreeListCommandButton>
+            <TreeListCommandButton Command="Delete">Delete</TreeListCommandButton>
+        </TreeListCommandColumn>
+    </TreeListColumns>
+</TelerikTreeList>
+
+@code {
+@[template](/_contentTemplates/treelist/editing.md#basic-example-code)
+
+@[template](/_contentTemplates/treelist/editing.md#flat-crud-service-and-model)
+}
 ````
 
 ## See Also
 
 * [Live Demo: TreeList InCell Editing](https://demos.telerik.com/blazor-ui/treelist/editing-incell)
+* [TreeList Editor Template](slug:treelist-templates-editor)
+* [Start and End Editing through the TreeList State](slug:grid-kb-add-edit-state)
 * [TreeList Selection Documentation](slug:treelist-selection-overview)
diff --git a/components/treelist/editing/inline.md b/components/treelist/editing/inline.md
index 68600d5f2f..c3179862a5 100644
--- a/components/treelist/editing/inline.md
+++ b/components/treelist/editing/inline.md
@@ -1,308 +1,99 @@
 ---
 title: Inline Editing
 page_title: TreeList - Inline Editing
-description: Inline (row) editing of data in treelist for Blazor.
+description: Inline (row) editing of data in TreeList for Blazor.
 slug: treelist-editing-inline
-tags: telerik,blazor,treelist,inline,editing
+tags: telerik, blazor, treelist, editing, inline
 published: True
 position: 1
 ---
 
 # TreeList Inline Editing
 
-Inline editing lets the user click an [Edit command button](slug:treelist-columns-command) on the row, and all its editable columns open up for changes. They can then click a `Save` command button to submit the changes to the data access layer. This fires the `OnUpdate` event of the treelist where your code receives the updated model so you can work with the data (for example, to call the appropriate method of your service). 
+Inline TreeList editing lets users modify all values on a TreeList row. The edit process starts and ends with clicking of command buttons on the respective row. Inline editing can be more intuitive for beginner users, compared to in-cell editing.
 
+@[template](/_contentTemplates/treelist/editing.md#overview-required)
 
-In a similar fashion, the `Cancel` and `Delete` command buttons fire events on the treelist to let you handle the data source operations.
+## Basics
 
-When validation is not satisfied, clicking the Save, Delete or Add buttons will not have effect, but you can still navigate between all fields in the row to complete editing.
+To use inline TreeList editing, [set the TreeList `EditMode` parameter to `TreeListEditMode.Inline`](slug:treelist-editing-overview#edit-modes). During inline editing, only one table row is in edit mode at a time. Users can:
 
-You can also cancel the events by setting the `IsCancelled` property of the event arguments to `true`. This lets you prevent the user from editing certain records, inserting or deleting items, based on your application logic.
+* Press **Tab** or **Shift** + **Tab** to focus the next or previous editable cell.
+* 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 TreeList operation, for example, paging or sorting, to cancel the current edit operation.
 
-To enable Inline editing in the treelist, set its `EditMode` property to `Telerik.Blazor.TreeListEditMode.Inline`, then handle the CRUD events as shown in the example below.
+## Commands
 
+Inline add, edit, and delete operations use the following [command buttons](slug:treelist-editing-overview#commands):
 
->caption The Command buttons and the treelist events let you handle data operations in Inline edit mode
+* **Add**
+* **Delete**
+* **Edit**
+* **Save**
+* **Cancel**
 
-````RAZOR
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
-
-Editing is cancelled for the first record.
-<br />
-
-<TelerikTreeList Data="@Data"
-                 EditMode="@TreeListEditMode.Inline"
-                 OnUpdate="@UpdateItem"
-                 OnDelete="@DeleteItem"
-                 OnCreate="@CreateItem"
-                 OnEdit="@OnEditHandler"
-                 OnCancel="@OnCancelHandler"
-                 Pageable="true" ItemsField="@(nameof(Employee.DirectReports))"
-                 Width="850px">
-    <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</TreeListCommandButton>
-    </TreeListToolBarTemplate>
-    <TreeListColumns>
-        <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
-        </TreeListCommandColumn>
-
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="120px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate" Width="220px" />
-    </TreeListColumns>
-</TelerikTreeList>
-
-
-@code {
-    public List<Employee> Data { get; set; }
-
-    // Sample CUD operations for the local data
-    async Task UpdateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-    }
-
-    async Task CreateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-        var parentItem = args.ParentItem as Employee;
-
-        // perform actual data source operations here through your service
-        await MyService.Create(item, parentItem);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-    }
-
-    async Task DeleteItem(TreeListCommandEventArgs args)
-    {
-        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();
-    }
-
-    // OnEdit handler
+@[template](/_contentTemplates/treelist/editing.md#without-commands)
 
-    async Task OnEditHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-        if (empl.Id == 1)
-        {
-            // prevent opening for edit based on condition
-            args.IsCancelled = true;
-            Console.WriteLine("You cannot edit this item");
-        }
-    }
+In inline edit mode, the TreeList commands execute row by row and the corresponding [TreeList events](slug:treelist-editing-overview#events) also fire row by row. This is similar to [popup editing](slug:treelist-editing-popup) and unlike [in-cell editing](slug:treelist-editing-incell), where commands and events relate to cells.
 
-    // OnCancel handler
+When validation is not satisfied, clicking the **Save**, **Delete** or **Add** command buttons has no effect, but users can still navigate between all input components in the row to complete the editing.
 
-    async Task OnCancelHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-        // if necessary, perform actual data source operation here through your service
-    }
+## Integration with Other Features
 
+Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:treelist-editing-overview#integration-with-other-features).
 
-    // sample model
+### Add, Edit
 
-    public class Employee
-    {
-        public int Id { get; set; }
-        [Required]
-        public string Name { get; set; }
-        public string EmailAddress { get; set; }
-        public DateTime HireDate { get; set; }
+This section explains what happens when the component is already in add or edit mode, and the user tries to add or edit another row.
 
-        public List<Employee> DirectReports { get; set; }
-        public bool HasChildren { get; set; }
+* If the validation is not satisfied, the component blocks the user action until they complete or cancel the current add or edit operation.
+* If the validation is satisfied, then editing aborts and the component fires `OnCancel`.
 
-        // 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;
-        }
-    }
+### Delete, Filter, Group, Page, Search, Sort
 
-    // data generation
+If the component is already in add or edit mode, and the user tries to perform another data operation, then editing aborts and the component fires `OnCancel`.
 
-    async Task GetTreeListData()
-    {
-        Data = await MyService.Read();
-    }
+## Example
 
-    protected override async Task OnInitializedAsync()
-    {
-        await GetTreeListData();
-    }
+The example below shows how to:
 
-    // 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<Employee> _data { get; set; } = new List<Employee>();
-        // 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;
+* Implement inline TreeList CRUD operations with the minimal required number of events.
+* Bind an editable TreeList to [flat data](slug:treelist-data-binding-flat-data). Check the [popup editing example] for an implementation with [hierarchical data](slug:treelist-data-binding-hierarchical-data).
+@[template](/_contentTemplates/treelist/editing.md#basic-example-description)
 
-        public static async Task Create(Employee itemToInsert, Employee parentItem)
-        {
-            InsertItemRecursive(_data, itemToInsert, parentItem);
-        }
+>caption TreeList inline editing
 
-        public static async Task<List<Employee>> 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<Employee>(),
-                        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<Employee>(),
-                            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++;
-                        }
-                    }
-                }
-
-                _data[0].Name += " (non-editable, see OnEdit)";
-            }
-
-            return await Task.FromResult(_data);
-        }
-
-        public static async Task Update(Employee itemToUpdate)
-        {
-            UpdateItemRecursive(_data, itemToUpdate);
-        }
-
-        public static async Task Delete(Employee itemToDelete)
-        {
-            RemoveChildRecursive(_data, itemToDelete);
-        }
-
-        // sample helper methods for handling the view-model data hierarchy
-        static void UpdateItemRecursive(List<Employee> 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);
-                }
-            }
-        }
-
-        static void RemoveChildRecursive(List<Employee> 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;
-                    }
-                }
-            }
-        }
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikTreeList Data="@TreeListData"
+                 IdField="@nameof(Employee.Id)"
+                 ParentIdField="@nameof(Employee.ParentId)"
+                 ConfirmDelete="true"
+                 EditMode="@TreeListEditMode.Inline"
+@[template](/_contentTemplates/treelist/editing.md#basic-example-parameters-columns)
+        <TreeListCommandColumn Width="200px">
+            <TreeListCommandButton Command="Add">Add</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" ShowInEdit="true">Save</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            <TreeListCommandButton Command="Delete">Delete</TreeListCommandButton>
+        </TreeListCommandColumn>
+    </TreeListColumns>
+</TelerikTreeList>
 
-        static void InsertItemRecursive(List<Employee> Data, Employee insertedItem, Employee parentItem)
-        {
-            insertedItem.Id = LastId++;
-            if (parentItem != null)
-            {
-                parentItem.HasChildren = true;
-                if (parentItem.DirectReports == null)
-                {
-                    parentItem.DirectReports = new List<Employee>();
-                }
+@code {
+@[template](/_contentTemplates/treelist/editing.md#basic-example-code)
 
-                parentItem.DirectReports.Insert(0, insertedItem);
-            }
-            else
-            {
-                Data.Insert(0, insertedItem);
-            }
-        }
-    }
+@[template](/_contentTemplates/treelist/editing.md#flat-crud-service-and-model)
 }
 ````
 
->caption The result from the code snippet above, after the Edit button was clicked on the record with ID 4
-
-![Blazor TreeList Inline Editing](images/inline-editing.png)
-
->note It is up to the data access logic to save the data once it is changed in the data collection, or to revert changes. The example above showcases the events that allow you to do that. In a real application, the code for handling data operations may be entirely different.
-
 ## See Also
 
-  * [Live Demo: TreeList Inline Editing](https://demos.telerik.com/blazor-ui/treelist/editing-inline)
-   
+* [Live Demo: TreeList Inline Editing](https://demos.telerik.com/blazor-ui/treelist/editing-inline)
+* [TreeList Editor Template](slug:treelist-templates-editor)
+* [Start and End Editing through the TreeList State](slug:grid-kb-add-edit-state)
diff --git a/components/treelist/editing/overview.md b/components/treelist/editing/overview.md
index e385f886bc..30d3d38ca7 100644
--- a/components/treelist/editing/overview.md
+++ b/components/treelist/editing/overview.md
@@ -1,668 +1,203 @@
 ---
 title: Overview
 page_title: TreeList - CRUD Overview
-description: CRUD basics for the treelist for Blazor.
+description: CRUD basics for the TreeList for Blazor.
 slug: treelist-editing-overview
-tags: telerik,blazor,treelist,editing,overview
+tags: telerik, blazor, treelist, editing
 published: True
+previous_url: /components/treelist/editing/built-in-dialogs/delete-confirmation, /components/treelist/editing/built-in-dialogs/overview
 position: 0
 ---
 
-# Blazor TreeList CRUD Operations Overview
+# Blazor TreeList CRUD Operations
 
-CRUD operations with the TreeList for Blazor support validation and
-are done through the dedicated CRUD events it exposes for data editing. You can use them to transfer the changes to the underlying data source (for example, call a service that will actually work with the database, and not only with the view data).
+The Telerik TreeList for Blazor supports create, update, and delete operations (CRUD) with different modes and user experience. The component also supports built-in `DataAnnotations` or custom validation. This page describes:
 
-To enable TreeList editing, set the [`EditMode` attribute](slug:treelist-overview#editing) to the desired edit mode.
+* [How the create, update, and delete operations work in the TreeList](#basics).
+* [What are the available edit modes and how to enable them](#edit-modes).
+* [The applicable TreeList commands](#commands).
+* [The applicable TreeList events](#events).
+* [How to change the built-in editors for certain data types](#column-editors).
+* [How to refresh the TreeList data after add, edit, and delete operations](#rebinding-after-data-changes).
+* [How the TreeList CRUD operations integrate with other component features](#integration-with-other-features).
 
-Sections in this article:
+## Basics
 
-* [Basics](#basics)
-* [Events](#events)
-* [Customize The Editor Fields](#customize-the-editor-fields)
-* [Example](#example)
-* [Notes](#notes)
+The TreeList CRUD operations rely on the following algorithm:
 
-## Basics
+1. Users execute [TreeList commands (**Edit**, **Save**, **Delete**, and more)](#commands) with the mouse or keyboard.
+1. The TreeList fires [events (`OnCreate`, `OnDelete`, `OnUpdate` and more)](#events), which provide information what the user did or how the component data changed.
+1. The application applies the changes to the TreeList data source in the above event handlers.
+1. The TreeList rebinds to display the latest data.
 
-The TreeList offers several editing modes with different user experience through the `EditMode` property that is a member of the `TreeListEditMode` enum:
+### Model Requirements
 
-* `None` - the default `TreeListEditMode` value. The built-in [`Add` and `Edit` commands](slug:treelist-columns-command#built-in-commands) don't work in this mode.
-* `Incell` - editing is done [in the current cell](slug:treelist-editing-incell) with a double click
-* `Inline` - editing is done for the [entire row](slug:treelist-editing-inline) with an [Edit Command Button](slug:treelist-columns-command)
-* `Popup` - editing is done in a [popup](slug:treelist-editing-popup) for the entire row with an [Edit Command Button](slug:treelist-columns-command), and model Validation through Data Annotation attributes is available.
+Adding or editing rows in the TreeList sets the following requirements on the TreeList model:
 
+* The TreeList model class must have a parameterless constructor. Otherwise, use the [TreeList `OnModelInit` event](slug:treelist-events#onmodelinit) to provide a data item instance [when the TreeList needs to create one](#item-instances). 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`.
+* Self-referencing or inherited properties must not cause `StackOverflowException` or `AmbiguousMatchException` during [programmatic model instance creation](#item-instances).
 
-## Events
+## Edit Modes
 
-Here are the available events and command buttons that you need to use for editing records in a TreeList.
+The TreeList offers several ways to add and edit rows with a different user experience:
 
-* `OnAdd` - fires when the `Add` [command button](slug:treelist-columns-command) for a newly added item is clicked. Cancellable.
-* `OnCreate` - fires when the `Save` [command button](slug:treelist-columns-command) for a newly added item is clicked. Cancellable.
-* `OnUpdate` - fires when the `Save` command button is clicked on an existing item. Cancellable. The model reference is a copy of the original data source item.
-* `OnDelete` - fires when the `Delete` command button is clicked. The event is cancellable, and you can also display a [delete confirmation dialog](slug:treelist-delete-confirmation) before the deletion.
-* `OnEdit` - fires when the user is about to enter edit mode for an existing row. Cancellable.
-* `OnCancel` - fires when the user clicks the `Cancel` command button. Allows you to undo the changes to the data in the view data. Cancellable.
+* [*In-Cell*](slug:treelist-editing-incell)&mdash;users modify the TreeList content cell by cell.
+* [*Inline*](slug:treelist-editing-inline)&mdash;users modify the TreeList content row by row.
+* [*Popup*](slug:treelist-editing-popup)&mdash;users modify the TreeList content row by row in a modal popup form.
 
-The CUD event handlers receive an argument of type `TreeListCommandEventArgs` that exposes the following fields:
+To allow users to add or edit values in the TreeList:
 
-* `IsCancelled` - a boolean field indicating whether the treelist operation is to be prevented. You can use it to prevent the user action from affecting the treelist (for example, prevent a row from opening for edit, or the user from cancelling an edit operation). 
-* `IsNew` - a boolean field indicating whether the item was just added through the treelist. Lets you differentiate a data source Create operation from Update operation in the `OnClick` event of a command button.
-* `Item` - an object you can cast to your model class to obtain the current data item.
-* `ParentItem` - an object you can cast to your model class to obtain the parent of current data item. Will be `null` if the current item is at the root level.
-* `Field` - specific to [InCell editing](slug:treelist-editing-incell) - indicates which is the model field the user changed when updating data.
-* `Value` - specific to [InCell editing](slug:treelist-editing-incell) - indicates what is the new value the user changed when updating data.
+1. Set the `EditMode` parameter to a [member of the `TreeListEditMode` enum](slug:telerik.blazor.treelisteditmode). The default `EditMode` parameter value is `None` and the built-in [`Add` and `Edit` commands](slug://treelist-columns-command#built-in-commands) don't work.
+1. Define the required [command buttons](#commands) and [events](#events) for the selected edit mode and operations.
 
-You can initiate editing or inserting of an item from anywhere on the page (buttons outside of the treelist, or components in a column template) through the [treelist state](slug:treelist-state#initiate-editing-or-inserting-of-an-item).
+>caption Set up TreeList popup edit mode
 
-## Customize The Editor Fields
+````RAZOR.skip-repl
+<TelerikTreeList EditMode="@TreeListEditMode.Popup"
+                 OnUpdate="@OnTreeListUpdate">
+    <TreeListColumns>
+        <TreeListCommandColumn>
+            <TreeListCommandButton Command="Edit">Edit</TreeListCommandButton>
+        </TreeListCommandColumn>
+    </TreeListColumns>
+</TelerikTreeList>
+````
 
-You can customize the editors rendered in the TreeList by providing the `EditorType` attribute, exposed on the `<TreeListColumn>`, or by using the [Editor Template](slug:treelist-templates-editor). The `EditorType` attribute accepts a member of the `TreeListEditorType` enum:
+>tip See the TreeList add and edit operations in action in the complete examples for TreeList [inline](slug:treelist-editing-inline#example), [in-cell](slug:treelist-editing-incell#example), and [popup](slug:treelist-editing-popup#example) editing.
 
-| Field data type | TreeListEditorType enum members              |
-|-----------------|------------------------------------------|
-| **Text**            | `TreeListEditorType.TextArea`<br> `TreeListEditorType.TextBox` |
-| **Boolean**         | `TreeListEditorType.CheckBox`<br> `TreeListEditorType.Switch` |
-| **DateTime**        | `TreeListEditorType.DatePicker`<br> `TreeListEditorType.DateTimePicker`<br> `TreeListEditorType.TimePicker` |
+> Editing multiple rows at the same time is not supported. You can [render editors in all TreeList data cells through column `<Template>`s](slug:grid-kb-edit-all-rows-cells) as an alternative.
 
+### Delete Operations
 
-````RAZOR
-@* The usage of the EditorType parameter *@
+Delete operations provide the same user experience in all TreeList edit modes and require the same configuration:
 
-@using System.ComponentModel.DataAnnotations
+* [**Delete** command button](#commands).
+* [`OnDelete` event](#events).
+* Optional `ConfirmDelete` TreeList parameter. It determines if the component will show a Dialog before firing `OnDelete`, so that users can abort the operation.
 
-<TelerikTreeList Data="@Data"
-                 EditMode="@TreeListEditMode.Inline"
-                 OnUpdate="@UpdateItem"
-                 OnDelete="@DeleteItem"
-                 OnCreate="@CreateItem"
-                 OnCancel="@OnCancelHandler"
-                 Pageable="true" ItemsField="@(nameof(Employee.DirectReports))"
-                 Width="850px">
+Delete operations can work even if the TreeList `EditMode` parameter value is `None`.
 
-    <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</TreeListCommandButton>
-    </TreeListToolBarTemplate>
-    <TreeListColumns>
-        <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
-        </TreeListCommandColumn>
+>tip See the delete operations in action in the complete examples for TreeList [inline](slug:treelist-editing-inline#example), [in-cell](slug:treelist-editing-incell#example) and [popup](slug:treelist-editing-popup#example) editing. Also check how to [customize the Delete Confirmation Dialog](slug:grid-kb-customize-delete-confirmation-dialog).
 
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="120px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate"
-                        EditorType="@TreeListEditorType.DateTimePicker"
-                        Width="220px" />
-    </TreeListColumns>
-</TelerikTreeList>
+## Commands
 
-@code {
-    public List<Employee> Data { get; set; }
-
-    async Task UpdateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-
-        await MyService.Update(item);
-
-        await GetTreeListData();
-    }
-
-    async Task CreateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-        var parentItem = args.ParentItem as Employee;
-
-        await MyService.Create(item, parentItem);
-
-        await GetTreeListData();
-    }
-
-    async Task DeleteItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-
-        await MyService.Delete(item);
-
-        await GetTreeListData();
-    }
-
-    async Task OnCancelHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-    }
-
-    public class Employee
-    {
-        public int Id { get; set; }
-
-        [Required]
-        public string Name { get; set; }
-        public string EmailAddress { get; set; }
-        public DateTime HireDate { get; set; }
-
-        public List<Employee> DirectReports { get; set; }
-        public bool HasChildren { get; set; }
-
-        public override bool Equals(object obj)
-        {
-            if (obj is Employee)
-            {
-                return this.Id == (obj as Employee).Id;
-            }
-            return false;
-        }
-    }
-
-    async Task GetTreeListData()
-    {
-        Data = await MyService.Read();
-    }
-
-    protected override async Task OnInitializedAsync()
-    {
-        await GetTreeListData();
-    }
-
-    public static class MyService
-    {
-        private static List<Employee> _data { get; set; } = new List<Employee>();
-
-        private static int LastId { get; set; } = 1;
-
-        public static async Task Create(Employee itemToInsert, Employee parentItem)
-        {
-            InsertItemRecursive(_data, itemToInsert, parentItem);
-        }
-
-        public static async Task<List<Employee>> 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<Employee>(),
-                        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<Employee>(),
-                            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++;
-                        }
-                    }
-                }
-
-                _data[0].Name += " (non-editable, see OnEdit)";
-            }
-
-            return await Task.FromResult(_data);
-        }
-
-        public static async Task Update(Employee itemToUpdate)
-        {
-            UpdateItemRecursive(_data, itemToUpdate);
-        }
-
-        public static async Task Delete(Employee itemToDelete)
-        {
-            RemoveChildRecursive(_data, itemToDelete);
-        }
-
-        // sample helper methods for handling the view-model data hierarchy
-        static void UpdateItemRecursive(List<Employee> 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);
-                }
-            }
-        }
-
-        static void RemoveChildRecursive(List<Employee> 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;
-                    }
-                }
-            }
-        }
-
-        static void InsertItemRecursive(List<Employee> Data, Employee insertedItem, Employee parentItem)
-        {
-            insertedItem.Id = LastId++;
-            if (parentItem != null)
-            {
-                parentItem.HasChildren = true;
-                if (parentItem.DirectReports == null)
-                {
-                    parentItem.DirectReports = new List<Employee>();
-                }
-
-                parentItem.DirectReports.Insert(0, insertedItem);
-            }
-            else
-            {
-                Data.Insert(0, insertedItem);
-            }
-        }
-    }
-}
-````
+The TreeList provides the following built-in commands, which enable users to add, delete, and edit rows:
 
-## Example
+* `Add`&mdash;adds a new row and puts it in edit mode. Fires the `OnAdd` [event](#events). If the command button is in the TreeList toolbar, the new row is created at root level. If the command button is in the command column, the new row is created as a child of the current row.
+* `Cancel`&mdash;cancels the [row or cell](#edit-modes) changes and exits edit mode. Fires the `OnCancel` event.
+* `Delete`&mdash;deletes a row. Fires the `OnDelete` event.
+* `Edit`&mdash;puts a TreeList row or cell in edit mode. Fires the `OnEdit` event.
+* `Save`&mdash;confirms the row or cell changes and exits edit mode, if the user input is valid. Fires the `OnUpdate` event.
 
-The example below shows how you can handle the events the treelist exposes, so you can Create, Update or Delete records in your data source and the view model.
+Users execute commands in the following ways:
 
->tip The treelist events use `EventCallback` and can be synchronous or asynchronous. The example below shows async versions, and the signature for synchronous events is `void <MethodName>(TreeListCommandEventArgs args)`.
+* By clicking on [command buttons](slug:treelist-columns-command#the-treelistcommandbutton-tag).
+* By clicking on editable cells in [in-cell edit mode](slug:treelist-editing-incell) and then anywhere else on the page.
+* By using the [TreeList keyboard navigation](https://demos.telerik.com/blazor-ui/treelist/keyboard-navigation).
 
->caption Handling the CRUD events of the treelist to save data to the actual data source
+Command buttons can only reside in a [TreeList Command Column](slug:treelist-columns-command) or the [TreeList ToolBar](slug:treelist-toolbar). You can also [trigger add and edit operations programmatically](slug:grid-kb-add-edit-state) from anywhere on the web page through the [TreeList State](slug:treelist-state).
 
-````RAZOR
-@using System.ComponentModel.DataAnnotations
-@* Used for the model annotations only *@
+## Events
 
-Editing is cancelled for the first record.
-<br />
+The following table describes the TreeList events, which are related to adding, deleting, and editing items. Also check the sections about [item instances](#item-instances) and [event arguments](#treelistcommandeventargs) below.
 
-<TelerikTreeList Data="@Data"
-                 EditMode="@TreeListEditMode.Inline"
-                 OnAdd="@AddItem"
-                 OnUpdate="@UpdateItem"
-                 OnDelete="@DeleteItem"
-                 OnCreate="@CreateItem"
-                 OnEdit="@OnEditHandler"
-                 OnCancel="@OnCancelHandler"
-                 Pageable="true" ItemsField="@(nameof(Employee.DirectReports))"
-                 Width="850px">
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-    <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</TreeListCommandButton>
-    </TreeListToolBarTemplate>
-    <TreeListColumns>
-        <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
-        </TreeListCommandColumn>
+| Event | Required | Description | [Item Instance](#treelistcommandeventargs) | If&nbsp;Cancelled |
+| --- | --- | --- | --- | --- |
+| `OnAdd` | No | Fires on `Add` [command button](slug://treelist-columns-command) click, before the TreeList enters add mode. This event preceeds `OnCreate` or `OnCancel`. | [New](#item-instances) | TreeList remains in read mode. |
+| `OnCancel` | No | Fires on `Cancel` command invocation. | [New or cloned](#item-instances) | TreeList remains in add or edit mode. |
+| `OnCreate` | To add new items. | Fires on `Save` command invocation for new items. This event succeeds `OnAdd`. | [New](#item-instances) | TreeList remains in add mode. |
+| `OnDelete` | To [delete items](#delete-operations). | Fires on `Delete` command button click. | Original | TreeList won't rebind. Deletion depends on the app itself. |
+| `OnEdit` | No | Fires on `Edit` command invocation, before the TreeList actually enters edit mode. This event preceeds `OnCreate` or `OnCancel`. | Original | TreeList remains in read mode. |
+| `OnModelInit` | [Depends on the TreeList model type](slug:treelist-events#onmodelinit) | Fires when the TreeList requires a [new model instance](#item-instances), which is immediately before `OnAdd` or immediately after `OnEdit`. <br /> Use this event when the TreeList model type is an [interface, abstract class, or has no parameterless constructor](slug:treelist-events#onmodelinit). | No event arguments | Not cancellable |
+| `OnUpdate` | To edit existing items. | Fires on `Save` command invocation for existing items. This event succeeds `OnEdit`. | [Cloned](#item-instances) | TreeList remains in edit mode. |
 
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="120px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate" Width="220px" />
-    </TreeListColumns>
-</TelerikTreeList>
+The following considerations apply for the TreeList CRUD events:
 
-@logger
+* Most events provide a [`TreeListCommandEventArgs` argument](#treelistcommandeventargs) in the handler. `OnModelInit` has no event argument.
+* All events, except `OnModelInit`, are cancellable and the user action can be prevented. Cancelling `OnDelete` does not automatically prevent item deletion from the TreeList data source. This depends entirely on the executed application code.
+* The `OnCreate`, `OnDelete`, and `OnUpdate` events are required when using add, delete, and edit operations, respectively. The app must use these events to modify the TreeList data source. [The TreeList does not modify its data directly](#item-instances).
 
-@code {
-    public List<Employee> Data { get; set; }
+Some events always fire in the same sequence, based on the user actions. In the list below, the value input and [validation](slug:treelist-editing-validation) occur between the second and third event:
 
-    // Sample CUD operations for the local data
-    async Task AddItem(TreeListCommandEventArgs args)
-    {
-        //Set default values for new items
-        ((Employee)args.Item).Name = "New Employee Name";
+* `OnModelInit`, `OnAdd`, and `OnCreate` for add operations
+* `OnEdit`, `OnModelInit`, and `OnUpdate` for edit operations
 
-        //Cancel if needed
-        //args.IsCancelled = true;
-    }
+Both user workflows can end with the `OnCancel` event instead of `OnCreate` or `OnUpdate`.
 
-    async Task UpdateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
+> Use `async Task` instead of `async void` for event handlers that execute awaitable operations. Otherwise the TreeList may show incorrect data, or the app may throw exceptions related to disposed objects or concurrency.
 
-        // update the local view-model data with the service data
-        await GetTreeListData();
+### Item Instances
 
-        AppendToLog("Update", args);
-    }
+The TreeList does not expose or modify its data items directly in add or edit mode. Instead, the component creates a new item instance or clones an existing one. The user is always changing the values of the separate item instance. The TreeList uses [`Activator.CreateInstance<TItem>()`](https://learn.microsoft.com/en-us/dotnet/api/system.activator.createinstance) and [`PropertyInfo.SetValue()`](https://learn.microsoft.com/en-us/dotnet/api/system.reflection.propertyinfo.setvalue) to create and populate items for add and edit mode. This approach:
 
-    async Task CreateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-        var parentItem = args.ParentItem as Employee;
+* Allows users to cancel their changes and revert to the original data item values.
+* Provides the app with full control over the data source.
+* Sets some requirements [for the TreeList model class](#model-requirements) and for [updating Entity Framework models](slug:grid-kb-entity-framework-model-update).
 
-        // perform actual data source operations here through your service
-        await MyService.Create(item, parentItem);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-
-        AppendToLog("Create", args);
-    }
-
-    async Task DeleteItem(TreeListCommandEventArgs args)
-    {
-        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();
-
-        AppendToLog("Delete", args);
-    }
-
-    // OnEdit handler
-
-    async Task OnEditHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-        if (empl.Id == 1)
-        {
-            // prevent opening for edit based on condition
-            args.IsCancelled = true;
-            Console.WriteLine("You cannot edit this item");
-        }
-
-        AppendToLog("Edit", args);
-    }
-
-    // OnCancel handler
-
-    async Task OnCancelHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-        // if necessary, perform actual data source operation here through your service
-
-        AppendToLog("Cancel", args);
-    }
-
-    // sample visualization of the results
-    MarkupString logger;
-    void AppendToLog(string commandName, TreeListCommandEventArgs args)
-    {
-        string currAction = string.Format(
-            "<br />Command: <strong>{0}</strong>; is cancelled: <strong>{1}</strong>; is the item new: <strong>{2}</strong>",
-                commandName,
-                args.IsCancelled,
-                args.IsNew
-            );
-        logger = new MarkupString(logger + currAction);
-    }
-
-
-    // sample model
-
-    public class Employee
-    {
-        public int Id { get; set; }
-
-        [Required]
-        public string Name { get; set; }
-        public string EmailAddress { get; set; }
-        public DateTime HireDate { get; set; }
-
-        public List<Employee> DirectReports { get; set; }
-        public bool HasChildren { get; set; }
-
-        // 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;
-        }
-    }
-
-    // data generation
-
-    async Task GetTreeListData()
-    {
-        Data = await MyService.Read();
-    }
-
-    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<Employee> _data { get; set; } = new List<Employee>();
-        // 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;
-
-        public static async Task Create(Employee itemToInsert, Employee parentItem)
-        {
-            InsertItemRecursive(_data, itemToInsert, parentItem);
-        }
-
-        public static async Task<List<Employee>> 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<Employee>(),
-                        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<Employee>(),
-                            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++;
-                        }
-                    }
-                }
-
-                _data[0].Name += " (non-editable, see OnEdit)";
-            }
-
-            return await Task.FromResult(_data);
-        }
-
-        public static async Task Update(Employee itemToUpdate)
-        {
-            UpdateItemRecursive(_data, itemToUpdate);
-        }
-
-        public static async Task Delete(Employee itemToDelete)
-        {
-            RemoveChildRecursive(_data, itemToDelete);
-        }
-
-        // sample helper methods for handling the view-model data hierarchy
-        static void UpdateItemRecursive(List<Employee> 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);
-                }
-            }
-        }
-
-        static void RemoveChildRecursive(List<Employee> 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;
-                    }
-                }
-            }
-        }
-
-        static void InsertItemRecursive(List<Employee> Data, Employee insertedItem, Employee parentItem)
-        {
-            insertedItem.Id = LastId++;
-            if (parentItem != null)
-            {
-                parentItem.HasChildren = true;
-                if (parentItem.DirectReports == null)
-                {
-                    parentItem.DirectReports = new List<Employee>();
-                }
-
-                parentItem.DirectReports.Insert(0, insertedItem);
-            }
-            else
-            {
-                Data.Insert(0, insertedItem);
-            }
-        }
-    }
-}
-````
+### TreeListCommandEventArgs
 
-## Notes
+All events in the [Events table](#events), except `OnModelInit`, provide a [`TreeListCommandEventArgs`](slug:telerik.blazor.components.treelistcommandeventargs) event argument. It exposes the following properties:
 
-There are a few considerations to keep in mind with the CUD operations of the treelist. They are explained in the following list:
+| Property&nbsp;Name | Type | Description |
+| --- | --- | --- |
+| `Field` | `string` | The [column `Field` name](slug:treelist-columns-bound#data-binding). Applicable only for [in-cell edit mode](slug:treelist-editing-incell). |
+| `IsCancelled` | `bool` | Defines if the user action should be prevented. See the [Comparison table](#comparison) below for details. |
+| `IsNew` | `bool` | Defines if `Item` is a newly added row or an existing row. |
+| `Item` | `object` | The data item, which the user is adding, deleting, or editing. Cast it to the TreeList model type. |
+| `ParentItem` | `object?` | The parent of the data item, which the user is adding. Available only in the `OnCreate` event. Cast the object to the TreeList model type. |
+| `Value` | `object` | The data item value, which the user is editing. You can cast it to the correct type, based on the `Field`. Applicable only for [in-cell edit mode](slug:treelist-editing-incell). |
 
-* 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.
+## Column Editors
 
-* The CRUD event handlers must be `async Task` and **not** `async void`. A Task can be properly awaited and allows working with services and contexts, and lets the treelist update after the actual data source operations complete.
+You can customize the column editors through the [column `EditorType` parameter](slug:treelist-columns-bound#data-operations), or by using an [editor template](slug:treelist-templates-editor). The `EditorType` parameter accepts a member of the `TreeListEditorType` enum:
 
-    * When the method returns `void`, the execution of the context operations is not actually awaited, and you may get errors from the context (such as "Cannot access a disposed object. A common cause of this error is disposing a context that was resolved from dependency injection and then later trying to use the same context instance elsewhere in your application" or "A second operation started on this context before a previous operation completed. This is usually caused by different threads using the same instance of DbContext"). The treelist may also re-render before the actual data update happens and you may not see the result.
+| Column Field Type | Valid `TreeListEditorType` Enum Members |
+| --- | --- |
+| `bool` | `CheckBox` (default) <br /> `Switch` |
+| `DateTime` | `DatePicker` (default) <br /> `DateTimePicker` <br> `TimePicker` |
+| `string` | `TextArea` <br /> `TextBox` (default) |
 
-* The treelist uses `Activator.CreateInstance<TItem>();` 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:treelist-events#onmodelinit) event.
+>caption Setting column editor type
 
-* While editing, the Treelist 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 treelist logic creates the copy. The built-in editors and [editor templates](slug:treelist-templates-editor) receive the copy for their `context` that the treelist will create after `OnEdit`.
+````RAZOR.skip-repl
+<TreeListColumn Field="@nameof(Race.StartDateTime)"
+                EditorType="@TreeListEditorType.DateTimePicker" />
+````
 
-* The validation the treelist provides is based on the <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#validator-components" target="_blank">`DataAnnotationValidator`</a> and creates its own `EditContext` for a row that is in edit/insert mode. When the row is not in edit/insert mode, the `EditContext` is `null`. The `EditContext` is a cascading parameter and overrides any cascading parameters from parent components (such as an `<EditForm>` that may wrap the treelist).
+## Rebinding After Data Changes
 
-* When an input receives an `EditContext` (usually comes down as a cascading parameter), the framework also requires a `ValueExpression`. If you use two-way binding (the `@bind-Value` syntax), the `ValueExpression` is deducted from there. However, if you use only the `Value` property, you have to pass the `ValueExpression` yourself. This is a lambda expression that tells the framework what field in the model to update. The following sample demonstrates how to achieve that. You can also check the [Requires a value for ValueExpression](slug:common-kb-requires-valueexpression) knowledge base article for more details.
+During add, edit, and delete operations, the TreeList expects the application to make changes to the data source (database) and then provide the latest data to the component.
 
-<div class="skip-repl"></div>
-````RAZOR
-<EditorTemplate>
-    <TelerikTextBox Value="@myModel.MyField"
-                    ValueExpression="@( () => myModel.MyField )">
-    </TelerikTextBox>
-</EditorTemplate>
+In the `OnCreate`, `OnDelete`, and `OnUpdate` event handler, the application must do one of the following:
 
-@* Applies to the other input type components as well *@
-````
+* Make a read request to the database. Retrieve the latest data and set it as the new value of the TreeList `Data` parameter. The TreeList will rebind automatically. The following examples demonstrate this approach:
+    * [Inline TreeList Editing](slug:treelist-editing-inline#example)
+    * [Popup TreeList Editing](slug:treelist-editing-popup#example)
+    * [In-Cell TreeList Editing](slug:treelist-editing-incell#example)
+* [Use the event arguments to update the local item collection in the `Data` parameter manually](slug:grid-kb-load-cached-data-after-crud-operations#data-parameter).
+
+## Integration with Other Features
+
+Updated rows comply with the current filter, search, and sort settings, just like all other rows. As a result, an updated row may render at a different place or disappear.
+
+When editing a row with child items, it will collapse unless you override the `Equals()` method of the TreeList model class.
 
-* If you want to perform other data operations while the component is in Edit mode (applicable for [InCell](slug:treelist-editing-incell) and [Inline](slug:treelist-editing-inline) editing) the following behavior will occur:
+Learn more integration details for the [inline](slug:treelist-editing-inline#integration-with-other-features) and [in-cell](slug:treelist-editing-incell#integration-with-other-features) edit modes.
 
-@[template](/_contentTemplates/common/grid-treelist-editing-notes.md#grid-treelist-data-operations-while-editing)
+## Examples
 
-<!-- * The validation will not be enabled for tree bound to Expando objects or Dictionaries (such as DataTable). -->
+See TreeList CRUD operations in action at:
 
+* [TreeList Inline Editing](slug:treelist-editing-inline#example)
+* [TreeList Popup Editing](slug:treelist-editing-popup#example)
+* [TreeList In-Cell Editing](slug:treelist-editing-incell#example)
+* [Online TreeList Demos](https://demos.telerik.com/blazor-ui/treelist/editing-inline)
 
 ## See Also
 
-  * [Live Demo: TreeList Inline Editing](https://demos.telerik.com/blazor-ui/treelist/editing-inline)
-  * [Live Demo: TreeList Popup Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup)
-  * [Live Demo: TreeList InCell Editing](https://demos.telerik.com/blazor-ui/treelist/editing-incell)
-  * [Live Demo: TreeList Custom Editor Template](https://demos.telerik.com/blazor-ui/treelist/custom-editor)
-  * [Live Demo: TreeList Custom Edit Form](https://demos.telerik.com/blazor-ui/treelist/editing-custom-form)
+* [Enter and Exit TreeList Edit Mode Programmatically](slug://grid-kb-add-edit-state)
+* [Set Default Values for TreeList Add and Edit Mode](slug://grid-kb-default-value-for-new-row)
+* [Edit All TreeList Rows and Cells at the Same Time](slug:grid-kb-edit-all-rows-cells)
diff --git a/components/treelist/editing/popup.md b/components/treelist/editing/popup.md
index 2d3330f95b..4f42cd0777 100644
--- a/components/treelist/editing/popup.md
+++ b/components/treelist/editing/popup.md
@@ -1,469 +1,137 @@
 ---
 title: Popup Editing
 page_title: TreeList - Popup Editing
-description: Popup editing of data in treelist for Blazor.
+description: Popup editing of data in TreeList for Blazor.
 slug: treelist-editing-popup
-tags: telerik,blazor,treelist,Popup,editing
+tags: telerik, blazor, treelist, editing, popup
 published: True
 position: 2
 ---
 
 # TreeList Popup Editing
 
-In this article:
+TreeList popup editing allows the app to render a larger form with customizable dimensions and layout. The popup edit mode is also more suitable for mobile devices with small screens. The popup edit form may contain editable fields from hidden columns in the TreeList table.
 
-* [Basics](#basics)
-* [Customization](#customization)
-    * [Editing of Hidden Columns](#editability-of-hidden-columns)
-    * [Popup Customization](#popup-customization)
-    * [Edit Form Customization](#edit-form-customization)
-    * [Popup Form Customization](#popup-form-customization)
-    * [Popup Buttons Customization](#popup-buttons-customization)
+@[template](/_contentTemplates/treelist/editing.md#overview-required)
 
 ## Basics
 
-Popup editing lets the user click an [Edit command button](slug:treelist-columns-command) on the row, and a popup shows up with all its editable columns open up for changes. They can then click the `Save` button in the dialog to submit the changes to the model. This fires the `OnUpdate` event of the treelist where your code receives the updated model so you can work with the data (for example, to call the appropriate method of your service).
+To use popup TreeList editing, set the TreeList `EditMode` parameter to `TreeListEditMode.Popup`. During popup editing, only one table row is in edit mode. The user can:
 
-In a similar fashion, the `Cancel`, `Delete` command buttons and the `Add` toolbar button fire events on the treelist to let you handle the data source operations.
+* 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.
 
-You can also cancel the events by setting the `IsCancelled` property of the event arguments to `true`. This lets you prevent the user from editing certain records, inserting or deleting items, based on your application logic.
+The popup edit mode can display a [Telerik Validation Summary component](slug:validation-tools-summary) if the TreeList model is configured for validation.
 
-To enable Popup editing in the treelist, set its `EditMode` property to `Telerik.Blazor.TreeListEditMode.Popup`, then handle the CRUD events as shown in the example below.
+## Commands
 
-The Popup editing mode supports [validation](slug:common-features/input-validation). To use it, all you need to do is decorate your model with the desired annotations. Validation errors will be shown in the popup and will prevent the Update operation.
+Popup add, edit, and delete operations use the following [command buttons](slug:treelist-editing-overview#commands):
 
+* **Add**
+* **Delete**
+* **Edit**
 
->caption The Command buttons and the treelist events let you handle data operations in Popup edit mode
+@[template](/_contentTemplates/treelist/editing.md#without-commands)
 
-````RAZOR
-@using System.ComponentModel.DataAnnotations
-@* Used for the model annotations only *@
+Popup edit mode does not use **Save** and **Cancel** command buttons in the [TreeList command column](slug:treelist-columns-command). The TreeList renders them automatically in the popup, unless you define a [Buttons Template](slug:treelist-templates-popup-buttons) or a [Form Template](slug:treelist-templates-popup-form).
 
-Editing is cancelled for the first record.
-<br />
+In popup edit mode, the TreeList commands execute row by row and the corresponding [TreeList events](slug:treelist-editing-overview#events) also fire row by row.
 
-<TelerikTreeList Data="@Data"
-                 EditMode="@TreeListEditMode.Popup"
-                 OnUpdate="@UpdateItem"
-                 OnDelete="@DeleteItem"
-                 OnCreate="@CreateItem"
-                 OnEdit="@OnEditHandler"
-                 OnCancel="@OnCancelHandler"
-                 Pageable="true" ItemsField="@(nameof(Employee.DirectReports))"
-                 Width="850px">
-    <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</TreeListCommandButton>
-    </TreeListToolBarTemplate>
-    <TreeListColumns>
-        <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
-        </TreeListCommandColumn>
+## Customization
 
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="120px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate" Width="220px" Visible="false" />
-    </TreeListColumns>
-</TelerikTreeList>
+The TreeList exposes options to customize the edit popup and its form. Define the desired configuration in the `TreeListPopupEditSettings` and `TreeListPopupEditFormSettings` tags under the `TreeListSettings` tag.
 
+### Edit Hidden Columns
 
-@code {
-    public List<Employee> Data { get; set; }
-
-    // Sample CUD operations for the local data
-    async Task UpdateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-    }
-
-    async Task CreateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-        var parentItem = args.ParentItem as Employee;
-
-        // perform actual data source operations here through your service
-        await MyService.Create(item, parentItem);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-    }
-
-    async Task DeleteItem(TreeListCommandEventArgs args)
-    {
-        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();
-    }
-
-    // OnEdit handler
-
-    async Task OnEditHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-        if (empl.Id == 1)
-        {
-            // prevent opening for edit based on condition
-            args.IsCancelled = true;
-            Console.WriteLine("You cannot edit this item");
-        }
-    }
-
-    // OnCancel handler
-
-    async Task OnCancelHandler(TreeListCommandEventArgs args)
-    {
-        Employee empl = args.Item as Employee;
-        // if necessary, perform actual data source operation here through your service
-    }
-
-
-    // sample model
-
-    public class Employee
-    {
-        public int Id { get; set; }
-
-        [Required(ErrorMessage = "The employee must have a name")]
-        public string Name { get; set; }
-        [EmailAddress]
-        public string EmailAddress { get; set; }
-        public DateTime HireDate { get; set; }
-
-        public List<Employee> DirectReports { get; set; }
-        public bool HasChildren { get; set; }
-
-        // 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;
-        }
-    }
-
-    // data generation
-
-    async Task GetTreeListData()
-    {
-        Data = await MyService.Read();
-    }
-
-    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<Employee> _data { get; set; } = new List<Employee>();
-        // 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;
-
-        public static async Task Create(Employee itemToInsert, Employee parentItem)
-        {
-            InsertItemRecursive(_data, itemToInsert, parentItem);
-        }
-
-        public static async Task<List<Employee>> 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<Employee>(),
-                        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<Employee>(),
-                            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++;
-                        }
-                    }
-                }
-
-                _data[0].Name += " (non-editable, see OnEdit)";
-            }
-
-            return await Task.FromResult(_data);
-        }
-
-        public static async Task Update(Employee itemToUpdate)
-        {
-            UpdateItemRecursive(_data, itemToUpdate);
-        }
-
-        public static async Task Delete(Employee itemToDelete)
-        {
-            RemoveChildRecursive(_data, itemToDelete);
-        }
-
-        // sample helper methods for handling the view-model data hierarchy
-        static void UpdateItemRecursive(List<Employee> 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);
-                }
-            }
-        }
-
-        static void RemoveChildRecursive(List<Employee> 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;
-                    }
-                }
-            }
-        }
-
-        static void InsertItemRecursive(List<Employee> Data, Employee insertedItem, Employee parentItem)
-        {
-            insertedItem.Id = LastId++;
-            if (parentItem != null)
-            {
-                parentItem.HasChildren = true;
-                if (parentItem.DirectReports == null)
-                {
-                    parentItem.DirectReports = new List<Employee>();
-                }
-
-                parentItem.DirectReports.Insert(0, insertedItem);
-            }
-            else
-            {
-                Data.Insert(0, insertedItem);
-            }
-        }
-    }
-}
-````
+Starting with version 7.0, the TreeList allows users to edit [hidden columns](slug:treelist-columns-visible) by default. To disable editing of a hidden column, set `Editable="false"` to the respective `<TreeListColumn>` tag.
 
->caption The result from the code snippet above, after the Edit button was clicked on the row with ID 4, and validation errors are made
+### Popup Dimensions and Styles
 
-![Blazor TreeList Popup Editing](images/popup-editing.png)
+The `TreeListPopupEditSettings` nested tag exposes the following parameters to allow popup customization:
 
->note It is up to the data access logic to save the data once it is changed in the data collection, or to revert changes. The example above showcases the events that allow you to do that. In a real application, the code for handling data operations may be entirely different.
+@[template](/_contentTemplates/common/popup-edit-customization.md#popup-settings)
 
-## Customization
+For example, here is [how to set the TreeList popup edit form's title, so that it matches a property value of the edited data item](slug:grid-kb-popup-edit-title).
 
-The TreeList exposes options to customize the edit popup and its form. You can define your desired configuration in the `TreeListPopupEditSettings` and `TreeListPopupEditFormSettings` tags under the `TreeListSettings` tag.
+### Form Layout
 
-### Editability of Hidden Columns
+The `TreeListPopupEditFormSettings` nested tag exposes the following parameters to allow edit form customization:
 
-Staring from version 7.0, the TreeList allows users to edit [hidden columns](slug:treelist-columns-visible) by default. To disable editing of a hidden column, set `Editable="false"` to the respective `<TreeListColumn>` tag.
+@[template](/_contentTemplates/common/popup-edit-customization.md#edit-form-settings)
 
-### Popup Customization
+>important These settings are not applicable if you are using a `<FormTemplate>` with a custom Form component. See more details in [Form Template - Specifics](slug:treelist-templates-popup-form#specifics).
 
-The `TreeListPopupEditSettings` nested tag exposes the following parameters to allow popup customization:
+### Form Template
 
-@[template](/_contentTemplates/common/popup-edit-customization.md#popup-settings)
+In the `TreeListPopupEditFormSettings`, you can declare a `FormTemplate`. This template enables you to fully customize the appearance and content of the create/edit Popup window in the TreeList. For more information and examples on customizing the TreeList Popup window, refer to the [Popup Form Template](slug:treelist-templates-popup-form) article.
 
-For example, here is [how to set the TreeList popup edit form's title, so that it matches a property value of the edited data item](slug:grid-kb-popup-edit-title).
+### Buttons Template
 
-### Edit Form Customization
+You can specify a `ButtonsTemplate` in the `TreeListPopupEditFormSettings` to customize how the buttons look in the create/edit Popup window of the TreeList. To learn more and see an example of customizing the TreeList Popup buttons, refer to the [Popup Buttons Template](slug:treelist-templates-popup-buttons) article.
 
-The `TreeListPopupEditFormSettings` nested tag exposes the following parameters to allow edit form customization:
+## Example
 
-@[template](/_contentTemplates/common/popup-edit-customization.md#edit-form-settings)
+The example below shows how to:
+
+* Implement popup TreeList CRUD operations with the minimal required number of events.
+* Bind an editable TreeList to [hierarchical data](slug:treelist-data-binding-hierarchical-data). Check the [inline editing example](slug:treelist-editing-inline#example) for an implementation with [flat data](slug:treelist-data-binding-flat-data).
+@[template](/_contentTemplates/treelist/editing.md#basic-example-description)
+* Edit the `Notes` column that is not visible in the TreeList.
+* Customize the popup edit form dimensions and layout.
 
->caption Customize the popup edit form
+>caption TreeList popup editing
 
 ````RAZOR
-@*The snippet focuses on the popup edit form customization. CRUD events are not handled for brevity*@
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
 
-<TelerikTreeList Data="@Data" Pageable="true"
+<TelerikTreeList Data="@TreeListData"
+                 IdField="@nameof(Employee.Id)"
+                 ItemsField="@nameof(Employee.Items)"
+                 ConfirmDelete="true"
                  EditMode="@TreeListEditMode.Popup"
-                 ItemsField="@(nameof(Employee.DirectReports))">
-
+                 OnCreate="@OnTreeListCreate"
+                 OnDelete="@OnTreeListDelete"
+                 OnUpdate="@OnTreeListUpdate"
+                 Height="400px">
     <TreeListSettings>
-        <TreeListPopupEditSettings Width="700px"
-                                   MinWidth="650px"
-                                   MaxHeight="300px"
-                                   Class="custom-popup">
-        </TreeListPopupEditSettings>
-        <TreeListPopupEditFormSettings Orientation="@FormOrientation.Horizontal"
-                                       ButtonsLayout="FormButtonsLayout.Stretch"
-                                       Columns="2">
-        </TreeListPopupEditFormSettings>
+        <TreeListPopupEditSettings Width="600px" MaxWidth="90vw" Height="400px" MaxHeight="90vh" />
+        <TreeListPopupEditFormSettings Columns="2" ColumnSpacing="2em" ButtonsLayout="@FormButtonsLayout.Stretch" />
     </TreeListSettings>
-
     <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</TreeListCommandButton>
+        <TreeListCommandButton Command="Add">Add Item</TreeListCommandButton>
     </TreeListToolBarTemplate>
-
     <TreeListColumns>
-        <TreeListColumn Field="Id" Width="120px" />
-        <TreeListColumn Field="Name" Expandable="true" />
-        <TreeListColumn Field="EmailAddress" />
-        <TreeListColumn Field="HireDate" />
-
-        <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+        <TreeListColumn Field="@nameof(Employee.Id)" Editable="false" Width="60px" />
+        <TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" />
+        <TreeListColumn Field="@nameof(Employee.Notes)" EditorType="@TreeListEditorType.TextArea" Visible="false" Width="120px">
+            <Template>
+                @{ var dataItem = (Employee)context; }
+                <div style="white-space:pre">@dataItem.Notes</div>
+            </Template>
+        </TreeListColumn>
+        <TreeListColumn Field="@nameof(Employee.Salary)" DisplayFormat="{0:C2}" Width="130px" />
+        <TreeListColumn Field="@nameof(Employee.HireDate)" DisplayFormat="{0:d}" Width="140px" />
+        <TreeListColumn Field="@nameof(Employee.IsDriver)" Width="80px" />
+        <TreeListCommandColumn Width="200px">
+            <TreeListCommandButton Command="Add">Add</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Delete">Delete</TreeListCommandButton>
         </TreeListCommandColumn>
-
     </TreeListColumns>
 </TelerikTreeList>
 
 @code {
-    public List<Employee> Data { get; set; }
-
-    // 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<Employee> DirectReports { get; set; }
-        public bool HasChildren { get; set; }
-    }
-
-    // data generation
-    public int LastId { get; set; } = 1;
-    protected override async Task OnInitializedAsync()
-    {
-        Data = await GetTreeListData();
-    }
-
-    async Task<List<Employee>> GetTreeListData()
-    {
-        List<Employee> data = new List<Employee>();
-
-        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<Employee>(),
-                    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<Employee>(),
-                        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++;
-                }
-            }
-        }
-
-        return await Task.FromResult(data);
-    }
+@[template](/_contentTemplates/treelist/editing.md#basic-example-code)
+
+@[template](/_contentTemplates/treelist/editing.md#hierarchical-crud-service-and-model)
 }
 ````
 
-### Popup Form Customization
-
-In the `TreeListPopupEditFormSettings`, you can declare a `FormTemplate`. This template enables you to fully customize the appearance and content of the create/edit Popup window in the TreeList. For more information and examples on customizing the TreeList Popup window, refer to the [Popup Form Template](slug:treelist-templates-popup-form) article.
-
-### Popup Buttons Customization
-
-You can specify a `ButtonsTemplate` in the `TreeListPopupEditFormSettings` to customize how the buttons look in the create/edit Popup window of the TreeList. To learn more and see an example of customizing the TreeList Popup buttons, refer to the [Popup Buttons Template](slug:treelist-templates-popup-buttons) article.
-
 ## See Also
 
-  * [Live Demo: TreeList Popup Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup)
-  * [Custom Editor Template Per Field](slug:treelist-templates-editor)
-
+* [Live Demo: TreeList Popup Editing](https://demos.telerik.com/blazor-ui/treelist/editing-popup)
+* [TreeList Editor Template](slug:treelist-templates-editor)
+* [Start and End Editing through the TreeList State](slug:grid-kb-add-edit-state)
diff --git a/components/treelist/editing/validation.md b/components/treelist/editing/validation.md
index d934030f11..0f3d61581d 100644
--- a/components/treelist/editing/validation.md
+++ b/components/treelist/editing/validation.md
@@ -3,304 +3,151 @@ title: Validation
 page_title: TreeList Validation
 description: Built-in validation in the TreeList and how to customize the validation behavior.
 slug: treelist-editing-validation
-tags: telerik,blazor,treelist,validation,editing
+tags: telerik, blazor, treelist, validation, editing
 published: True
 position: 40
 ---
 
 # TreeList Validation
 
-The Telerik UI for Blazor TreeList supports built-in validation that is enabled by default. The component passes an `EditContext` as a cascading value to the editable cells. If any validation messages are present the TreeList will render them as [Validation Tooltips](slug:validation-tools-tooltip) on hover of the specific editor. 
+The Telerik TreeList for Blazor supports built-in validation that is enabled by default. This article describes how the TreeList validation works and how to customize or disable it.
 
-#### In this Article:
+@[template](/_contentTemplates/treelist/editing.md#overview-required)
 
-* [Disable the validation](#disable-validation)
-* [Use a custom validator](#use-a-custom-validator)
+## Basics
+
+By default, the TreeList validation uses a [`DataAnnotationValidator`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator) and creates an `EditContext` for the row that is in add or edit mode. When you use [inline](slug:treelist-editing-inline) or [in-cell](slug:treelist-editing-incell) editing, the TreeList renders validation messages in [Validation Tooltips](slug:validation-tools-tooltip) on hover of the invalid inputs. In popup edit mode, the TreeList shows a [Validation Summary](slug:validation-tools-summary) in the popup.
+
+When a row is not in edit mode, the `EditContext` is `null`. The TreeList `EditContext` is a cascading parameter, which can overrides any cascading parameters from parent components, such as an `<EditForm>` that may wrap the TreeList.
+
+The built-in TreeList validation is not supported with dynamic data such as `ExpandoObject`, `DataTable`, or `Dictionary`.
+
+@[template](/_contentTemplates/common/form-validation.md#note-telerik-role-in-validation)
 
 ## Disable Validation
 
-To disable the built-in validation, add a `<TreeListValidationSettings>`tag  to the `<TreeListSettings>` and set the `Enabled` parameter to `false`.
+To disable the built-in TreeList validation:
+
+1. Add `<TreeListSettings>` as a child tag inside the TreeList.
+1. Add a `<TreeListValidationSettings>` tag inside `<TreeListSettings>`.
+1. Set the `Enabled` parameter of `TreeListValidationSettings` to false.
+
+See the [example](#example) below.
+
+## Use Custom Validator
+
+You can validate the TreeList with any validator that uses the `EditContext`. To change the default validator:
 
-````RAZOR
-@* Disable the built-in validation in the TreeList *@
+1. Add `<TreeListSettings>` as a child tag inside the TreeList.
+1. Add a `<TreeListValidationSettings>` tag inside `<TreeListSettings>`.
+1. Define the custom validator in the `<ValidatorTemplate>` `RenderFragment` inside `<TreeListValidationSettings>`.
 
-@using System.ComponentModel.DataAnnotations @* for the validation attributes *@
+Third party validation tools are not part of Telerik UI for Blazor. Reference the required NuGet packages explicitly.
 
-<TelerikTreeList Data="@Data"
+## Example
+
+The example below shows how to:
+
+* Enable and disable validation in the TreeList.
+* Validate the user input with a custom validator instead of the default `DataAnnotationsValidator`.
+
+Install the [`Blazored.FluentValidation`](https://www.nuget.org/packages/Blazored.FluentValidation) NuGet package to run the following code and refer to the [FluentValidation documentation](https://docs.fluentvalidation.net/en/latest/built-in-validators.html).
+
+>caption Use Telerik TreeList for Blazor with FluentValidation
+
+````RAZOR.skip-repl
+@* Requires the Blazored.FluentValidation NuGet package *@
+
+@using Blazored.FluentValidation
+@using FluentValidation
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikTreeList Data="@TreeListData"
+                 IdField="@nameof(Employee.Id)"
+                 ParentIdField="@nameof(Employee.ParentId)"
+                 ConfirmDelete="true"
                  EditMode="@TreeListEditMode.Inline"
-                 OnUpdate="@UpdateItem"
-                 OnDelete="@DeleteItem"
-                 OnCreate="@CreateItem"
-                 OnEdit="@OnEditHandler"
-                 OnCancel="@OnCancelHandler"
-                 Pageable="true" ItemsField="@(nameof(Employee.DirectReports))"
-                 Width="850px">
+                 OnCreate="@OnTreeListCreate"
+                 OnUpdate="@OnTreeListUpdate"
+                 Height="400px">
     <TreeListSettings>
-        <TreeListValidationSettings Enabled="false">
+        <TreeListValidationSettings Enabled="@TreeListValidationEnabled">
+            <ValidatorTemplate>
+                <FluentValidationValidator Validator="@TreeListFluentValidator" />
+            </ValidatorTemplate>
         </TreeListValidationSettings>
     </TreeListSettings>
     <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</TreeListCommandButton>
+        <TreeListCommandButton Command="Add">Add Item</TreeListCommandButton>
+        <label class="k-checkbox-label">
+            <TelerikCheckBox @bind-Value="@TreeListValidationEnabled" />
+            Enable Validation
+        </label>
     </TreeListToolBarTemplate>
     <TreeListColumns>
-        <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+        <TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" />
+        <TreeListColumn Field="@nameof(Employee.Salary)" DisplayFormat="{0:C2}" Width="130px" />
+        <TreeListColumn Field="@nameof(Employee.HireDate)" DisplayFormat="{0:d}" Width="140px" />
+        <TreeListColumn Field="@nameof(Employee.IsDriver)" Width="80px" />
+        <TreeListCommandColumn Width="160px">
+            <TreeListCommandButton Command="Add">Add</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" ShowInEdit="true">Save</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
         </TreeListCommandColumn>
-
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="120px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate" Width="220px" />
     </TreeListColumns>
 </TelerikTreeList>
 
-
 @code {
-    public List<Employee> Data { get; set; }
-
-    // Sample CUD operations for the local data
-    async Task UpdateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-
-        // perform actual data source operations here through your service
-        await MyService.Update(item);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-    }
-
-    async Task CreateItem(TreeListCommandEventArgs args)
-    {
-        var item = args.Item as Employee;
-        var parentItem = args.ParentItem as Employee;
+    private IEnumerable<Employee>? TreeListData { get; set; }
 
-        // perform actual data source operations here through your service
-        await MyService.Create(item, parentItem);
-
-        // update the local view-model data with the service data
-        await GetTreeListData();
-    }
-
-    async Task DeleteItem(TreeListCommandEventArgs args)
-    {
-        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();
-    }
+    private EmployeeService TreeListEmployeeService { get; set; } = new();
 
-    // OnEdit handler
+    private FluentProductValidator TreeListFluentValidator = new();
 
-    async Task OnEditHandler(TreeListCommandEventArgs args)
+    public class FluentProductValidator : AbstractValidator<Employee>
     {
-        Employee empl = args.Item as Employee;
-        if (empl.Id == 1)
+        public FluentProductValidator()
         {
-            // prevent opening for edit based on condition
-            args.IsCancelled = true;
-            Console.WriteLine("You cannot edit this item");
+            RuleFor(item => item.Name).NotEmpty().MinimumLength(3).MaximumLength(24);
+            RuleFor(item => item.Salary).NotNull().GreaterThan(0);
+            RuleFor(item => item.HireDate).NotEmpty().GreaterThanOrEqualTo(DateTime.Today);
         }
     }
 
-    // OnCancel handler
+    private bool TreeListValidationEnabled { get; set; } = true;
 
-    async Task OnCancelHandler(TreeListCommandEventArgs args)
+    private async Task OnTreeListCreate(TreeListCommandEventArgs args)
     {
-        Employee empl = args.Item as Employee;
-        // if necessary, perform actual data source operation here through your service
-    }
+        var createdItem = (Employee)args.Item;
+        var parentItem = (Employee?)args.ParentItem;
 
+        await TreeListEmployeeService.Create(createdItem, parentItem);
 
-    // sample model
+        TreeListData = await TreeListEmployeeService.Read();
+    }
 
-    public class Employee
+    private async Task OnTreeListUpdate(TreeListCommandEventArgs args)
     {
-        public int Id { get; set; }
-        [Required]
-        public string Name { get; set; }
-        public string EmailAddress { get; set; }
-        public DateTime HireDate { get; set; }
-
-        public List<Employee> DirectReports { get; set; }
-        public bool HasChildren { get; set; }
-
-        // 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;
-        }
-    }
+        var updatedItem = (Employee)args.Item;
 
-    // data generation
+        await TreeListEmployeeService.Update(updatedItem);
 
-    async Task GetTreeListData()
-    {
-        Data = await MyService.Read();
+        TreeListData = await TreeListEmployeeService.Read();
     }
 
     protected override async Task OnInitializedAsync()
     {
-        await GetTreeListData();
+        TreeListData = await TreeListEmployeeService.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
-    {
-        private static List<Employee> _data { get; set; } = new List<Employee>();
-        // 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;
-
-        public static async Task Create(Employee itemToInsert, Employee parentItem)
-        {
-            InsertItemRecursive(_data, itemToInsert, parentItem);
-        }
-
-        public static async Task<List<Employee>> 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<Employee>(),
-                        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<Employee>(),
-                            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++;
-                        }
-                    }
-                }
-
-                _data[0].Name += " (non-editable, see OnEdit)";
-            }
-
-            return await Task.FromResult(_data);
-        }
-
-        public static async Task Update(Employee itemToUpdate)
-        {
-            UpdateItemRecursive(_data, itemToUpdate);
-        }
-
-        public static async Task Delete(Employee itemToDelete)
-        {
-            RemoveChildRecursive(_data, itemToDelete);
-        }
-
-        // sample helper methods for handling the view-model data hierarchy
-        static void UpdateItemRecursive(List<Employee> 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);
-                }
-            }
-        }
-
-        static void RemoveChildRecursive(List<Employee> 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;
-                    }
-                }
-            }
-        }
-
-        static void InsertItemRecursive(List<Employee> Data, Employee insertedItem, Employee parentItem)
-        {
-            insertedItem.Id = LastId++;
-            if (parentItem != null)
-            {
-                parentItem.HasChildren = true;
-                if (parentItem.DirectReports == null)
-                {
-                    parentItem.DirectReports = new List<Employee>();
-                }
-
-                parentItem.DirectReports.Insert(0, insertedItem);
-            }
-            else
-            {
-                Data.Insert(0, insertedItem);
-            }
-        }
-    }
+@[template](/_contentTemplates/treelist/editing.md#flat-crud-service-and-model)
 }
 ````
 
-## Use a Custom Validator
-
-You can validate the TreeList with any validator that uses the `EditContext`. To change the default validator, add a `<ValidatorTemplate>` tag in `<TreeListSettings>`. Define the custom validator in the `ValidatorTemplate`. 
-
 ## See Also
 
-  * [TreeList Editing](slug:treelist-editing-overview)
-   
+* [Custom TreeList `DataAnnotations` Validation](slug:validation-kb-custom-dataannotations-validator)
+* [Remote Validation](https://github.com/telerik/blazor-ui/tree/master/grid/remote-validation)
diff --git a/components/treelist/filter/searchbox.md b/components/treelist/filter/searchbox.md
index 5cbde584eb..f55125c39f 100644
--- a/components/treelist/filter/searchbox.md
+++ b/components/treelist/filter/searchbox.md
@@ -79,104 +79,7 @@ You can set or remove the search filters programmatically through the `SearchFil
 >caption Set and clear the TreeList SearchBox filter programmatically
 
 ````RAZOR
-@using Telerik.DataSource
-
-<TelerikTreeList @ref="@TreeListRef"
-                 Data="@TreeListData"
-                 IdField="@nameof(SampleModel.Id)"
-                 ParentIdField="@nameof(SampleModel.ParentId)"
-                 Pageable="true"
-                 Sortable="true">
-    <TreeListToolBarTemplate>
-        <TreeListSearchBox />
-        <TelerikButton Icon="@SvgIcon.Search"
-                       ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
-                       OnClick="@OnSearchButtonClick">Search Programmatically</TelerikButton>
-        <TelerikButton Icon="@SvgIcon.X"
-                       OnClick="@OnClearButtonClick">Clear Search</TelerikButton>
-    </TreeListToolBarTemplate>
-    <TreeListColumns>
-        <TreeListColumn Field="@nameof(SampleModel.Name)" Expandable="true" />
-        <TreeListColumn Field="@nameof(SampleModel.Description)" />
-    </TreeListColumns>
-</TelerikTreeList>
-
-@code {
-    private TelerikTreeList<SampleModel>? TreeListRef { get; set; }
-
-    private List<SampleModel> TreeListData { get; set; } = new();
-
-    private async Task OnSearchButtonClick()
-    {
-        if (TreeListRef != null)
-        {
-            var treelistState = TreeListRef.GetState();
-
-            var searchString = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)}";
-
-            var cfd = new CompositeFilterDescriptor();
-
-            cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
-            cfd.FilterDescriptors = new FilterDescriptorCollection();
-
-            // Add one FilterDesccriptor for each string column
-            cfd.FilterDescriptors.Add(new FilterDescriptor()
-            {
-                Member = nameof(SampleModel.Name),
-                MemberType = typeof(string),
-                Operator = FilterOperator.Contains,
-                Value = searchString
-            });
-            cfd.FilterDescriptors.Add(new FilterDescriptor()
-            {
-                Member = nameof(SampleModel.Description),
-                MemberType = typeof(string),
-                Operator = FilterOperator.Contains,
-                Value = searchString
-            });
-
-            treelistState.SearchFilter = cfd;
-
-            await TreeListRef.SetStateAsync(treelistState);
-        }
-    }
-
-    private async Task OnClearButtonClick()
-    {
-        if (TreeListRef != null)
-        {
-            var treelistState = TreeListRef.GetState();
-
-            (treelistState.SearchFilter as CompositeFilterDescriptor)?.FilterDescriptors.Clear();
-
-            await TreeListRef.SetStateAsync(treelistState);
-        }
-    }
-
-    protected override void OnInitialized()
-    {
-        for (int i = 1; i <= 500; i++)
-        {
-            TreeListData.Add(new SampleModel()
-            {
-                Id = i,
-                ParentId = i <= 5 ? null : Random.Shared.Next(1, 6),
-                Name = $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} " +
-                    $"{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)} {i}",
-                Description = $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} " +
-                    $"{(char)Random.Shared.Next(97, 123)}{(char)Random.Shared.Next(97, 123)} {i}"
-            });
-        }
-    }
-
-    public class SampleModel
-    {
-        public int Id { get; set; }
-        public int? ParentId { get; set; }
-        public string Name { get; set; } = string.Empty;
-        public string Description { get; set; } = string.Empty;
-    }
-}
+@[template](/_contentTemplates/treelist/state.md#search-from-code)
 ````
 
 @[template](/_contentTemplates/treelist/state.md#initial-state)
diff --git a/components/treelist/state.md b/components/treelist/state.md
index e516b51b6a..4c16a7bb6e 100644
--- a/components/treelist/state.md
+++ b/components/treelist/state.md
@@ -10,1053 +10,394 @@ position: 50
 
 # TreeList State
 
-The TreeList lets you save, load and change its current state through code. The state management includes all the user-configurable elements of the TreeList - such as managing the expanded state of the items, sorting, filtering, paging, edited items and selection.
+The TreeList lets you read, save, load, and change its state through code. The state includes the TreeList features that are controlled by the user, such as the current sorting, page number, applied grouping, column widths, and many others.
 
-You can see this feature in the [Live Demo: TreeList State](https://demos.telerik.com/blazor-ui/treelist/persist-state).
+This article describes:
 
-This article contains the following sections:
+* [The properties of the `TreeListState` object](#information-in-the-treelist-state).
+* [How to set initial TreeList configuration programmatically in `OnStateInit`](#onstateinit).
+* [How to detect user changes in the TreeList state with `OnStateChanged`](#onstatechanged).
+* [How to use TreeList methods to get and set the TreeList state](#methods).
+* [Why you may need to override the `Equals` method of the TreeList model class](#equals-comparison).
 
-* [Basics](#basics)
-	* [Events](#events)
-	* [Methods](#methods)
-* [Information in the TreeList State](#information-in-the-treelist-state)
-* [Examples](#examples)
-    * [Save and Load TreeList State from Browser LocalStorage](#save-and-load-treelist-state-from-browser-localstorage)
-	* [Set TreeList Options Through State](#set-treelist-options-through-state)
-	* [Set Default (Initial) State](#set-default-initial-state)
-	* [Get and Override The User Action That Changes The TreeList](#get-and-override-the-user-action-that-changes-the-treelist)
-	* [Initiate Editing or Inserting of an Item](#initiate-editing-or-inserting-of-an-item)
-	* [Get Current Columns Visibility, Order, Field](#get-current-columns-visibility-order-field)
-
-
-## Basics
-
-The TreeList state is a generic class whose type is determined by the type of the data model you use for the TreeList. It contains fields that correspond to the TreeList behaviors which you can use to save, load and modify the component state.
-
-Fields that pertain to model data (such as edited item, inserted item, selected items) are also typed according to the TreeList model. If you restore such data, make sure to implement appropriate comparison checks - by default the `.Equals `check for a class (model) is a reference check and the reference from the storage is unlikely to match the reference from the `Data` parameter. Thus, you may want to override the `.Equals` method of the model you use so it compares by an ID, for example, or otherwise (in the app logic) re-populate the models in the state object with the new model references from the component data source.
-
-The TreeList exposes two events and two methods to allow flexible operations over its state:
-
-* [Events](#events)
-
-* [Methods](#methods)
-
-### Events
-
-The `OnStateInit` and `OnStateChanged` events are raised by the TreeList so you can have an easy to use hook for loading and saving state, respectively.
-
-* `OnStateInit` fires when the TreeList is initializing and you can provide the state you load from your storage to the `TreeListState` field of its event arguments.
-
-* `OnStateChanged` fires when the user makes a change to the TreeList state (such as paging, sorting, filtering, editing, selecting and so on). The `TreeListState` field of the event argument provides the current TreeList state so you can store it. The `PropertyName` field of the event arguments indicates what is the aspect that changed.
-    * @[template](/_contentTemplates/grid/state.md#statechanged-possible-prop-values)
-    * We recommend that you use an **`async void`** handler for the `OnStateChanged` event in order to reduce re-rendering and to avoid blocking the UI update while waiting for the service to store the data. Doing so will let the UI thread continue without waiting for the storage service to complete. In case you need to execute logic that requires UI update, use **`async Task`**.
-    * Filtering always resets the current page to 1, so the `OnStateChanged` event will fire twice. First, `PropertyName` will be equal to `"Page"`, and the second time it will be `"FilterDescriptors"`. However, the `TreeListState` field of the event argument will provide correct information about the overall TreeList state in both event handler executions.
-
-By using the `OnStateChanged` and `OnStateInit` events, you can save and restore the TreeList layout for your users by calling your storage service in the respective handler.
-
-### Methods
-
-The `GetState` and `SetStateAsync` instance methods provide flexibility for your business logic. They let you get and set the current TreeList state on demand outside of the component events.
-
-* `GetState` returns the TreeList state so you can store it only on a certain condition - for example, you may want to save the TreeList layout only on a button click, and not on every user interaction with the component. You can also use it to get information about the current state of the filters, sorts and so on.
-
-* `SetStateAsync` takes an instance of a TreeList state so you can use your own code to alter the component layout and state. For example, you can have a button that puts the TreeList in a certain configuration that helps your users review data (like certain filters, sorts, expanded items, initiate item editing or inserting, etc.).
-
-If you want to make changes on the current TreeList state, first get it from the component through the `GetState` method, then apply the modifications on the object you got, and pass it to `SetStateAsync`.
-
-If you want to put the TreeList in a certain configuration without preserving the old one, create a `new TreeListState<T>()` and apply the settings there, then pass it to `SetStateAsync`.
-
-To reset the TreeList state, call `SetStateAsync(null)`.
-
-You should avoid calling `SetStateAsync` in the treelist [CRUD methods](slug:treelist-editing-overview). Doing so may lead to unexpected results because the grid has more logic to execute after the event.
 
 ## Information in the TreeList State
 
-The following information is present in the TreeList state:
-
-* **Editing** - whether the user was inserting or editing an item (opens the same item for editing with the current data from the built-in editors of the TreeList - the data is updated in the `OnChange` event, not on every keystroke for performance reasons). The `OriginalEditItem` carries the original model without the user modifications so you can compare.
-
-* **Filtering** - filter descriptors (fields by which the Treelist is filtered, the operator and value).
-
-* **SearchFilter** - filter descriptor specific to the TreeListSearchBox.
-
-* **Paging** - page index
+The TreeList state is a generic [class `TreeListState<TItem>`](slug:Telerik.Blazor.Components.TreeListState-1). The type depends on the type of the TreeList model. The `TreeListState<TItem>` object exposes the following properties:
 
-* **Sorting** - sort descriptors (fields by which the TreeList is sorted, and the direction).
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-* **Selection** - list of selected items.
+| Property | Type | Description |
+| --- | --- | --- |
+| `ColumnStates` | `ICollection<TreeListColumnState>` | Information about each [column's reorder index, width, visibility, locked state, `Id` parameter value and `Field`](slug:treelist-columns-bound). The column order in the collection matches the column order in the TreeList declaration. On the other hand, the `Index` property matches the current column's position in the UI. **`Id` and `Field` are always `null` after deserialization, because these properties have no public setters.** |
+| `EditField` | `string` | The currently edited data item property in [`Incell` edit mode](slug:treelist-editing-incell). |
+| `EditItem` | `TItem`* | The currently edited data item in [any edit mode](slug:treelist-editing-overview). |
+| `ExpandedItems` | `ICollection<TItem>` | The expanded data items. |
+| `FilterDescriptors` | `ICollection<IFilterDescriptor>` | A collection of [`CompositeFilterDescriptor`](slug:common-features-descriptors#filtering), except the ones that relate to the [`TreeListSearchBox`](slug:treelist-searchbox). |
+| `InsertedItem` | `TItem`* | The data item that is being added in `Inline` or `Popup` edit mode. [Not applicable for `Incell` editing](slug:treelist-editing-incell#events). |
+| `OriginalEditItem` | `TItem`* | The original copy of the data item that is currently in edit mode. This `TreeListState` property holds the unmodified data item values. |
+| `Page` | `int?` | The current [page index](slug:treelist-paging). Some user actions reset the page index to 1, such as filtering or changing the page size. |
+| `ParentItem` | `TItem?`* | The parent item of the current `InsertedItem` in `Inline` or `Popup` edit mode. The value is `null` is the new item is being added at root level. |
+| `SearchFilter` | `IFilterDescriptor` | The [`CompositeFilterDescriptor`](slug:common-features-descriptors#filtering) that holds the filter descriptors for the [`TreeListSearchBox`](slug:treelist-searchbox). |
+| `SelectedItems` | `ICollection<TItem>` | The currently [selected data item(s)](slug:treelist-selection-overview). |
+| `Skip` | `int?` | The number of scrolled data items when using [virtual row scrolling](slug:treelist-virtual-scrolling). In other words, this is the number of rows above the currently visible ones. |
+| `SortDescriptors` | `ICollection<SortDescriptor>` | The currently applied [sorts](slug:treelist-sorting). |
+| `TableWidth` | `string` | The sum of all visible column widths. This property changes together with `ColumnStates`. The `OnStateChanged` event does not fire separately for it. |
 
-* **Columns** - Visible, Width, Index (order) of the column that the user sees, Locked (pinned).
+\* `TItem` is the TreeList model type.
 
-    * The TreeList matches the columns from its markup sequentially (in the same order) with the columns list in the state object. So, when you restore/set the state, the TreeList must initialize with the same collection of columns that were used to save the state.
-    
-        The `Index` field in the column state object represents its place (order) that the user sees and can choose through the `Reordable` feature, not its place in the TreeList markup. You can find an example below.
-    
-        If you want to change the visibility of columns, we recommend you use their `Visible` parameter rather than conditional markup - this parameter will be present in the state and will not change the columns collection count which makes it easier to reconcile changes.
 
+## Events
 
-## Examples
+The TreeList features two events, which are related to its state.
 
-You can find the following examples in this section:
+* [OnStateInit](#onstateinit)
+* [OnStateChanged](#onstatechanged)
 
-* [Save and Load TreeList State from Browser LocalStorage](#save-and-load-treelist-state-from-browser-localstorage)
-* [Set TreeList Options Through State](#set-treelist-options-through-state)
-* [Set Default (Initial) State](#set-default-initial-state)
-* [Get and Override The User Action That Changes The TreeList](#get-and-override-the-user-action-that-changes-the-treelist)
-* [Initiate Editing or Inserting of an Item](#initiate-editing-or-inserting-of-an-item)
-* [Get Current Columns Visibility, Order, Field](#get-current-columns-visibility-order-field)
+### OnStateInit
 
-### Save and Load TreeList State from Browser LocalStorage
+The `OnStateInit` event fires when the TreeList is initializing. Use this event to:
 
-The following example shows one way you can store the TreeList state - through a custom service that calls the browser's LocalStorage. You can use your own database here, or a file, or Microsoft's ProtectedBrowserStorage package, or any other storage you prefer. This is just an example you can use as base and modify to suit your project.
-  
->note If you use [Hierarchical data](slug:treelist-data-binding-hierarchical-data) for the TreeList you need to serialize the current item only and not the entire collection of child items in order not to exceed the size of the LocalStorage.
+* Define initial state, for example default initial sorting;
+* Load and apply state that was previously saved in a database or in `localStorage`.
 
->note We support the `System.Text.Json` serialization that is built-in in Blazor. Be aware of its [limitation to not serialize `Type` properties](slug:kb-grid-json-serializer-null-membertype).
+The generic event argument is of type `TreeListStateEventArgs<TItem>` and has a `TreeListState` property. See [Information in the TreeList State](#information-in-the-treelist-state) for details.
 
->caption Save, Load, Reset TreeList state on every state change. Uses a sample LocalStorage in the browser.
+> If you change the column order or number of columns in the TreeList declaration, this can break state restore. In such cases, either ignore the stored column state, or implement custom logic to restore only the columns that still exist in the TreeList.
+>
+> To set the initial visibility of columns, better use the `Visible` parameter, rather than conditional markup for the whole column. The `Visible` parameter values will be present in the TreeList state and the columns collection count will remain the same. This makes it easier to reconcile changes.
 
-<div class="skip-repl"></div>
-````RAZOR Component
-@using Telerik.DataSource;
+The example below shows how to apply initial sorting, filtering and grouping.
 
-@inject LocalStorage LocalStorage
-@inject IJSRuntime JsInterop
+>caption Using TreeList OnStateInit
 
-<TelerikButton OnClick="@ReloadPage">Reload the page to see the current TreeList state preserved</TelerikButton>
-<TelerikButton OnClick="@ResetState">Reset the state</TelerikButton>
-<TelerikButton OnClick="@SetState">Set the state</TelerikButton>
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
 
 <TelerikTreeList Data="@TreeListData"
-                 Pageable="true"
-                 Width="900px"
                  IdField="@nameof(Employee.Id)"
                  ParentIdField="@nameof(Employee.ParentId)"
+                 FilterMode="@TreeListFilterMode.FilterMenu"
+                 OnStateInit="@( (TreeListStateEventArgs<Employee> args) => OnTreeListStateInit(args) )"
+                 Pageable="true"
                  Sortable="true"
-                 FilterMode="@TreeListFilterMode.FilterRow"
-                 OnStateChanged="@((TreeListStateEventArgs<Employee> args) => OnStateChangedHandler(args))"
-                 OnStateInit="@((TreeListStateEventArgs<Employee> args) => OnStateInitHandler(args))"
-                 @ref="@TreeListRef">
+                 Height="400px">
     <TreeListColumns>
-        <TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" Width="320px" />
-        <TreeListColumn Field="@nameof(Employee.Id)" Width="150px" />
-        <TreeListColumn Field="@nameof(Employee.ParentId)" Width="150px" />
-        <TreeListColumn Field="@nameof(Employee.EmailAddress)" Width="120px" />
-        <TreeListColumn Field="@nameof(Employee.HireDate)" Width="220px" />
+        <TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" />
+        <TreeListColumn Field="@nameof(Employee.Salary)" DisplayFormat="{0:C2}" Width="130px" />
+        <TreeListColumn Field="@nameof(Employee.HireDate)" DisplayFormat="{0:d}" Width="140px" />
+        <TreeListColumn Field="@nameof(Employee.IsDriver)" Width="120px" />
     </TreeListColumns>
 </TelerikTreeList>
 
-
 @code {
-    private string UniqueStorageKey = "SampleTreeListStateStorageKey";
+    private IEnumerable<Employee>? TreeListData { get; set; }
 
-    private async Task OnStateInitHandler(TreeListStateEventArgs<Employee> args)
+    private EmployeeService TreeListEmployeeService { get; set; } = new();
+
+    private void OnTreeListStateInit(TreeListStateEventArgs<Employee> args)
     {
-        try
+        // Sort sibling items by Salary
+        args.TreeListState.SortDescriptors.Add(new SortDescriptor()
         {
-            var state = await LocalStorage.GetItem<TreeListState<Employee>>(UniqueStorageKey);
-            if (state != null)
-            {
-                args.TreeListState = state;
-            }
+            Member = nameof(Employee.Salary),
+            SortDirection = ListSortDirection.Descending
+        });
 
-        }
-        catch (InvalidOperationException e)
+        // Filter by IsDriver
+        var driverColumnFilter = new CompositeFilterDescriptor()
         {
-            // the JS Interop for the local storage cannot be used during pre-rendering
-            // so the code above will throw. Once the app initializes, it will work fine
-        }
-    }
-
-    private async void OnStateChangedHandler(TreeListStateEventArgs<Employee> args)
-    {
-        var state = args.TreeListState;
-        state.ExpandedItems = null;
-        await LocalStorage.SetItem(UniqueStorageKey, state);
-    }
-
-    private async Task ResetState()
-    {
-        // clean up the storage
-        await LocalStorage.RemoveItem(UniqueStorageKey);
-
-        await TreeListRef.SetStateAsync(null); // pass null to reset the state
-    }
-
-    private void ReloadPage()
-    {
-        JsInterop.InvokeVoidAsync("window.location.reload");
-    }
+            FilterDescriptors = new FilterDescriptorCollection() {
+                 new FilterDescriptor()
+                 {
+                    Member = nameof(Employee.IsDriver),
+                    MemberType = typeof(bool),
+                    Operator = FilterOperator.IsEqualTo,
+                    Value = true
+                 }
+             }
+        };
 
-    private async Task SetState()
-    {
-        TreeListState<Employee> state = new TreeListState<Employee>()
-            {
-                FilterDescriptors = new List<IFilterDescriptor>()
-                {
-                    new CompositeFilterDescriptor(){
-                        FilterDescriptors = new FilterDescriptorCollection()
-                        {
-                            new FilterDescriptor() {
-                                Member="Id", 
-                                MemberType=typeof(int), 
-                                Value = 2, 
-                                Operator = FilterOperator.IsGreaterThan 
-                            }
-                        }
-                    }
-                },
-                
-                SortDescriptors = new List<SortDescriptor>()
-                {
-                    new SortDescriptor() {
-                        Member = "Name", 
-                        SortDirection = ListSortDirection.Descending 
-                    }
-                },
-                
-                Page = 2,
-                
-                ColumnStates = new List<TreeListColumnState>()
-                {
-                    new TreeListColumnState()
-                    {
-                        Index = 3,
-                        Width = "150px"
-                    },
-                    new TreeListColumnState()
-                    {
-                        Index = 1,
-                        Width = "120px"
-                    },
-                    new TreeListColumnState()
-                    {
-                        Index = 2,
-                        Width = "60px"
-                    },
-                    new TreeListColumnState()
-                    {
-                        Index = 4,
-                        Width = "150px"
-                    },
-                    new TreeListColumnState()
-                    {
-                        Index = 0,
-                        Width = "120px"
-                    }
-                }
-            };
-
-        TreeListRef?.SetStateAsync(state);
-
-        await LocalStorage.SetItem(UniqueStorageKey, state);
+        args.TreeListState.FilterDescriptors.Add(driverColumnFilter);
     }
 
-    private TelerikTreeList<Employee> TreeListRef { get; set; }
-
-    private List<Employee> TreeListData { get; set; }
-
     protected override async Task OnInitializedAsync()
     {
-        TreeListData = await GetTreeListData();
-    }
-
-    // sample model
-
-    public class Employee
-    {
-        // denote the parent-child relationship between items
-        public int Id { get; set; }
-        public int? ParentId { get; set; }
-
-        // custom data fields for display
-        public string Name { get; set; }
-        public string EmailAddress { get; set; }
-        public DateTime HireDate { get; set; }
+        TreeListData = await TreeListEmployeeService.Read();
     }
 
-    // data generation
-
-    private async Task<List<Employee>> GetTreeListData()
-    {
-        List<Employee> data = new List<Employee>();
-
-        for (int i = 1; i < 15; i++)
-        {
-            data.Add(new Employee
-                {
-                    Id = i,
-                    ParentId = null, // indicates a root-level item
-                    Name = $"root: {i}",
-                    EmailAddress = $"{i}@example.com",
-                    HireDate = DateTime.Now.AddYears(-i)
-                }); ;
-
-            for (int j = 1; j < 4; j++)
-            {
-                int currId = i * 100 + j;
-                data.Add(new Employee
-                    {
-                        Id = currId,
-                        ParentId = i,
-                        Name = $"first level child {j} of {i}",
-                        EmailAddress = $"{currId}@example.com",
-                        HireDate = DateTime.Now.AddDays(-currId)
-                    });
-
-                for (int k = 1; k < 3; k++)
-                {
-                    int nestedId = currId * 1000 + k;
-                    data.Add(new Employee
-                        {
-                            Id = nestedId,
-                            ParentId = currId,
-                            Name = $"second level child {k} of {i} and {currId}",
-                            EmailAddress = $"{nestedId}@example.com",
-                            HireDate = DateTime.Now.AddMinutes(-nestedId)
-                        }); ;
-                }
-            }
-        }
-
-        return await Task.FromResult(data);
-    }
+@[template](/_contentTemplates/treelist/editing.md#flat-crud-service-and-model)
 }
 ````
-````C# Service
-using System.Threading.Tasks;
-using Microsoft.JSInterop;
-using System.Text.Json;
 
-public class LocalStorage
-{
-    protected IJSRuntime JSRuntimeInstance { get; set; }
+### OnStateChanged
 
-    public LocalStorage(IJSRuntime jsRuntime)
-    {
-        JSRuntimeInstance = jsRuntime;
-    }
+`OnStateChanged` fires when the user performs an action that changes the value of a [property in the TreeList state](#information-in-the-treelist-state). The event argument is of type `TreeListStateEventArgs<TItem>` and exposes these properties:
 
-    public ValueTask SetItem(string key, object data)
-    {
-        return JSRuntimeInstance.InvokeVoidAsync(
-            "localStorage.setItem",
-            new object[] {
-                key,
-                JsonSerializer.Serialize(data)
-            });
-    }
-
-    public async Task<T> GetItem<T>(string key)
-    {
-        var data = await JSRuntimeInstance.InvokeAsync<string>("localStorage.getItem", key);
-        if (!string.IsNullOrEmpty(data))
-        {
-            return JsonSerializer.Deserialize<T>(data);
-        }
-
-        return default;
-    }
-
-    public ValueTask RemoveItem(string key)
-    {
-        return JSRuntimeInstance.InvokeVoidAsync("localStorage.removeItem", key);
-    }
-}
-````
+| Property | Type | Description |
+| --- | --- | --- |
+| `PropertyName` | `string` | Information about what changed in the TreeList state. The possible values match the [property names of the `TreeListState` object](#information-in-the-treelist-state). @[template](/_contentTemplates/treelist/state.md#statechanged-possible-prop-values) |
+| `TreeListState` | `TreeListState<TItem>` | The current (up-to-date) TreeList state object. |
 
-### Set TreeList Options Through State
-
-The TreeList state allows you to control the behavior of the TreeList programmatically - you can, for example, set sorts, filters and expand items.
-
->tip The individual tabs below show how you can use the state to programmatically set the TreeList filtering, sorting and other features.
-
-@[template](/_contentTemplates/treelist/state.md#initial-state)
+Here is some additional information about certain `PropertyName` values:
 
-<div class="skip-repl"></div>
-````RAZOR ExpandedItems
-@[template](/_contentTemplates/treelist/state.md#expand-items-from-code)
-````
-````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 Columns
-@[template](/_contentTemplates/treelist/state.md#column-state-from-code)
-````
+* `EditItem` is used when the user starts editing an existing item.
+* `InsertedItem` signifies the user adding a new item in inline or popup edit mode. It's [not applicable for `Incell` editing](slug:treelist-editing-incell#events).
+* `OriginalEditItem` is used when the user exits edit or insert mode via save or cancel.
+* `ColumnStates` is used for several column actions such as hiding, showing, locking, reordering and resizing.
 
+>tip Some user actions will trigger two `OnStateChanged` events with a different `PropertyName` each time. These include filtering and searching. For example, filtering resets the current page to 1. First, the event will fire with `PropertyName` equal to `"FilterDescriptors"`, and then `PropertyName` will be `"Page"`. However, the `TreeListState` property of the event argument will provide correct information about the overall TreeList state in both event handler executions.
 
-### Set Default (Initial) State
+> We recommend using an `async Task` handler for the `OnStateChanged` event, in order to reduce re-rendering and avoid blocking UI updates if the handler will wait for a service to save the TreeList state somewhere.
 
-If you want the TreeList to start with certain settings for your end users, you can pre-define them in the `OnStateInit event`.
+To observe the changes in the TreeList state more easily, copy and run the following example in a local app and at full screen.
 
->tip The `ExpandedItems` sample in the [Set TreeList Options Through State](#set-treelist-options-through-state) section shows how to collapse all items in the OnStateInit event handler.
+Find out how to [get the applied filtering and sorting criteria](slug:common-features-descriptors).
 
->caption Choose a default state of the TreeList for your users
+>caption Using TreeList OnStateChanged
 
 ````RAZOR
-@using Telerik.DataSource;
-
-<TelerikTreeList Data="@Data"
-                 ItemsField="@(nameof(Employee.DirectReports))"
-                 Reorderable="true"
-                 Resizable="true"
-                 Sortable="true"
-                 FilterMode="@TreeListFilterMode.FilterRow"
-                 Pageable="true"
-                 Width="850px"
-                 OnStateInit="@((TreeListStateEventArgs<Employee> args) => OnStateInitHandler(args))">
-    <TreeListColumns>
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="120px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate" Width="220px" />
-    </TreeListColumns>
-</TelerikTreeList>
-
-@code {
-    async Task OnStateInitHandler(TreeListStateEventArgs<Employee> args)
-    {
-        var initialState = new TreeListState<Employee>()
-        {
-            FilterDescriptors = new List<IFilterDescriptor>()
-            {
-                new CompositeFilterDescriptor(){
-                    FilterDescriptors = new FilterDescriptorCollection()
-                    {
-                        new FilterDescriptor()
-                        {
-                            Member = nameof(Employee.Name),
-                            MemberType = typeof(string),
-                            Operator = FilterOperator.Contains,
-                            Value = "second level"
-                        }
-                    }
-                }
-            },
-            SortDescriptors = new List<SortDescriptor>()
-            {
-               new SortDescriptor()
-               {
-                   Member = nameof(Employee.Id),
-                   SortDirection = ListSortDirection.Descending
-               }
-            },
-            Page = 2
-        };
-
-        args.TreeListState = initialState;
+@using System.ComponentModel.DataAnnotations
+@using System.Text.Json
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<div id="demo-container">
+    <TelerikTreeList Data="@TreeListData"
+                     IdField="@nameof(Employee.Id)"
+                     ParentIdField="@nameof(Employee.ParentId)"
+                     ConfirmDelete="true"
+                     EditMode="@TreeListEditMode.Inline"
+                     FilterMode="@TreeListFilterMode.FilterMenu"
+                     OnCreate="@OnTreeListCreate"
+                     OnUpdate="@OnTreeListUpdate"
+                     OnStateChanged="@( (TreeListStateEventArgs<Employee> args) => OnTreeListStateChanged(args) )"
+                     Pageable="true"
+                     @bind-PageSize="@TreeListPageSize"
+                     Reorderable="true"
+                     Resizable="true"
+                     @bind-SelectedItems="@TreeListSelectedItems"
+                     SelectionMode="@TreeListSelectionMode.Multiple"
+                     ShowColumnMenu="true"
+                     Sortable="true"
+                     Height="400px">
+        <TreeListSettings>
+            <TreeListPagerSettings PageSizes="@( new List<int?>() { null, 5, 10 } )" />
+        </TreeListSettings>
+        <TreeListToolBarTemplate>
+            <TreeListCommandButton Command="Add">Add Item</TreeListCommandButton>
+            <TreeListSearchBox />
+        </TreeListToolBarTemplate>
+        <TreeListColumns>
+            <TreeListCheckboxColumn SelectAll="true" />
+            <TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" />
+            <TreeListColumn Field="@nameof(Employee.Salary)" DisplayFormat="{0:C2}" Width="130px" />
+            <TreeListColumn Field="@nameof(Employee.HireDate)" DisplayFormat="{0:d}" Width="140px" />
+            <TreeListColumn Field="@nameof(Employee.IsDriver)" Width="120px" />
+            <TreeListCommandColumn Width="160px">
+                <TreeListCommandButton Command="Add">Add</TreeListCommandButton>
+                <TreeListCommandButton Command="Edit">Edit</TreeListCommandButton>
+                <TreeListCommandButton Command="Save" ShowInEdit="true">Save</TreeListCommandButton>
+                <TreeListCommandButton Command="Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+            </TreeListCommandColumn>
+        </TreeListColumns>
+    </TelerikTreeList>
+
+    <div id="console">
+        <code class="@TreeListStateChangedPropertyClass">OnStateChanged</code> count:
+        @OnStateChangedCount
+        <TelerikButton OnClick="@( () => OnStateChangedCount = 0 )">Reset</TelerikButton>
+        <br /><br />
+        Last <code>OnStateChanged</code> event:
+        <br />
+        <strong class="@TreeListStateChangedPropertyClass">PropertyName</strong>:
+        <code>&quot;@TreeListStateChangedProperty&quot;</code>
+        <br />
+        <strong>TreeListState</strong>:
+        <pre>
+        @( new MarkupString(TreeListStateString) )
+        </pre>
+    </div>
+</div>
+
+<style>
+    .first-of-two {
+        color: #f00;
     }
 
-    public List<Employee> Data { get; set; }
-
-    // sample model
-
-    public class Employee
-    {
-        // hierarchical data collections
-        public List<Employee> 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; }
+    .latest-changed-property {
+        color: #00f;
     }
 
-    // data generation
-
-    // used in this example for data generation and retrieval for CUD operations on the current view-model data
-    public int LastId { get; set; } = 1;
-
-    protected override async Task OnInitializedAsync()
-    {
-        Data = await GetTreeListData();
-    }
-
-    async Task<List<Employee>> GetTreeListData()
-    {
-        List<Employee> data = new List<Employee>();
+    @@media (min-width: 800px) {
+        #demo-container {
+            display: flex;
+            align-items: flex-start;
+            gap: 1em;
+        }
 
-        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<Employee>(), // 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<Employee>(), // 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++;
-                }
+            #demo-container > .k-treelist {
+                flex: 2 2 800px;
             }
-        }
 
-        return await Task.FromResult(data);
+        #console {
+            height: 90vh;
+            overflow: auto;
+            flex: 1 0 300px;
+            border: 1px solid rgba(128, 128, 128, .3);
+            padding: 1em;
+        }
     }
-}
-````
-
-### Get and Override The User Action That Changes The TreeList
-
-Sometimes you may want to know what the user changed in the TreeList (e.g., when they filter, sort and so on) and even override those operations.
-
-The example below shows how to achieve it by using the`OnStateChanged` event.
-
-Find out how to [get the applied filtering and sorting criteria](slug:common-features-descriptors).
-
->caption Know when the TreeList state changes, which parameter changed and amend the change
-
-````RAZOR
-@* This example does the following:
-        * Renders a result string informing what changed in the TreeList
-        * If the user changes the Name column filtering, the filter is always overriden to "Contains" and its value to "second level child 1 of 1 and 1"
-        * If there is no filter on the ID column, the ID column is filtered with ID < 10.
-    To test it out, try filtering the name column
-*@
-
-@using Telerik.DataSource;
-
-<TelerikTreeList Data="@Data"
-                 ItemsField="@(nameof(Employee.DirectReports))"
-                 Reorderable="true"
-                 Resizable="true"
-                 Sortable="true"
-                 FilterMode="@TreeListFilterMode.FilterRow"
-                 Pageable="true"
-                 Width="850px"
-                 OnStateChanged="@((TreeListStateEventArgs<Employee> args) => OnStateChangedHandler(args))"
-                 @ref="@TreeListRef">
-    <TreeListColumns>
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="150px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate" Width="220px" />
-    </TreeListColumns>
-</TelerikTreeList>
-
-@Result
+</style>
 
 @code {
-    TelerikTreeList<Employee> TreeListRef { get; set; } = new TelerikTreeList<Employee>();
+    private IEnumerable<Employee>? 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<Employee> 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<Employee> TreeListSelectedItems { get; set; } = new List<Employee>();
 
-    public List<Employee> Data { get; set; }
+    private EmployeeService TreeListEmployeeService { get; set; } = new();
 
-    // sample model
+    private int OnStateChangedCount { get; set; }
 
-    public class Employee
-    {
-        // hierarchical data collections
-        public List<Employee> 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<string> _operationsWithMultipleStateChanged = new List<string>() {
+        "FilterDescriptors",
+        "SearchFilter"
+    };
 
-    async Task<List<Employee>> GetTreeListData()
+    private async Task OnTreeListStateChanged(TreeListStateEventArgs<Employee> args)
     {
-        List<Employee> data = new List<Employee>();
-
-        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<Employee>(), // 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<Employee>(), // 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
-*@
-
-<TelerikButton OnClick="@EnterEditMode">Edit item 2</TelerikButton>
-<TelerikButton OnClick="@InsertItem">Insert Item</TelerikButton>
-<TelerikButton OnClick="@InsertItemAsSpecificChild">Insert Item as child of Item 3</TelerikButton>
-
-
-<TelerikTreeList Data="@Data"
-                 EditMode="@TreeListEditMode.Popup"
-                 OnUpdate="@UpdateItem"
-                 OnDelete="@DeleteItem"
-                 OnCreate="@CreateItem"
-                 Pageable="true"
-                 ItemsField="@(nameof(Employee.DirectReports))"
-                 Width="850px"
-                 @ref="@TreeListRef">
-    <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add</TreeListCommandButton>
-    </TreeListToolBarTemplate>
-    <TreeListColumns>
-        <TreeListCommandColumn Width="280px">
-            <TreeListCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Child</TreeListCommandButton>
-            <TreeListCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</TreeListCommandButton>
-            <TreeListCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</TreeListCommandButton>
-            <TreeListCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</TreeListCommandButton>
-            <TreeListCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
-        </TreeListCommandColumn>
-
-        <TreeListColumn Field="Name" Expandable="true" Width="320px" />
-        <TreeListColumn Field="Id" Editable="false" Width="120px" />
-        <TreeListColumn Field="EmailAddress" Width="220px" />
-        <TreeListColumn Field="HireDate" Width="220px" />
-    </TreeListColumns>
-</TelerikTreeList>
-
-@code {
-    public List<Employee> Data { get; set; }
-    TelerikTreeList<Employee> TreeListRef { get; set; } = new TelerikTreeList<Employee>();
-
-    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}\"", $"\"<strong class='latest-changed-property'>{TreeListStateChangedProperty}</strong>\"");
 
-    // sample helper method for handling the view-model data hierarchy
-    Employee FindItemRecursive(List<Employee> 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<Employee> 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<TItem>` 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<Employee>(itmToClone.DirectReports) : new List<Employee>();
-            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<T>()` 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<Employee> _data { get; set; } = new List<Employee>();
-        // 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<List<Employee>> 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<Employee>(),
-                        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<Employee>(),
-                            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);
-        }
+<div class="skip-repl"></div>
+````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<Employee> 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<Employee> 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<Employee> Data, Employee insertedItem, Employee parentItem)
-        {
-            insertedItem.Id = LastId++;
-            if (parentItem != null)
-            {
-                parentItem.HasChildren = true;
-                if (parentItem.DirectReports == null)
-                {
-                    parentItem.DirectReports = new List<Employee>();
-                }
-
-                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/docs-builder.yml b/docs-builder.yml
index c74ab32927..54c3629699 100644
--- a/docs-builder.yml
+++ b/docs-builder.yml
@@ -406,9 +406,6 @@ meta:
   "*components/grid/filter":
     title: Filtering
     position: 22
-  "*components/grid/editing/built-in-dialogs":
-    title: Built-in Dialogs
-    position: 17
   "*components/grid/editing":
     title: Editing
     position: 10
diff --git a/knowledge-base/common-stackoverflowexception-editing-circular-references.md b/knowledge-base/common-stackoverflowexception-editing-circular-references.md
index 5cea5d9778..48a20d558b 100644
--- a/knowledge-base/common-stackoverflowexception-editing-circular-references.md
+++ b/knowledge-base/common-stackoverflowexception-editing-circular-references.md
@@ -56,7 +56,7 @@ public class Employee
 
 ## See Also
 
-* [Grid Editing](slug:components/grid/editing/overview)
+* [Grid Editing](slug:grid-editing-overview)
 * [Gantt Editing](slug:gantt-tree-editing)
 * [ListView Editing](slug:listview-editing)
 * [Scheduler Editing](slug:scheduler-appointments-edit)
diff --git a/knowledge-base/grid-add-edit-state.md b/knowledge-base/grid-add-edit-state.md
index 32e5fe3ecf..7447c1e68a 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.
@@ -56,9 +51,9 @@ Each property that is not relevant to a desired Grid state, should be set to `nu
 
 ## Example
 
-The sample below shows how to add, edit, cancel and save items in [`Inline`](slug:components/grid/editing/inline) and [`Popup`](slug:components/grid/editing/popup) `EditMode`.
+The sample below shows how to add, edit, cancel and save items in [`Inline`](slug:grid-editing-inline) and [`Popup`](slug:grid-editing-popup) `EditMode`.
 
-All these operations can also be used for [`Incell`](slug:components/grid/editing/incell). However, blurring the edited cell triggers [`OnUpdate`](slug:components/grid/editing/overview#events), so external UI to manage the Grid doesn't make sense. Some special [`EditorTemplate`](slug:grid-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`.
+All these operations can also be used for [`Incell`](slug:grid-editing-incell). However, blurring the edited cell triggers [`OnUpdate`](slug:grid-editing-overview#events), so external UI to manage the Grid doesn't make sense. Some special [`EditorTemplate`](slug:grid-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 Grid edit mode programmatically
 
diff --git a/knowledge-base/grid-binding-to-expando-object.md b/knowledge-base/grid-binding-to-expando-object.md
index 2bcf84068b..60cc59733b 100644
--- a/knowledge-base/grid-binding-to-expando-object.md
+++ b/knowledge-base/grid-binding-to-expando-object.md
@@ -39,7 +39,7 @@ The key points in the required implementation are:
 * Set the [`FieldType`](slug:components/grid/columns/bound#data-binding) parameter of all [bound columns](slug:components/grid/columns/bound).
 * If you need [autogenerated Grid columns](slug:grid-columns-automatically-generated), then [define them in a loop inside the `<GridColumns>` tag](slug:grid-kb-dynamic-columns-with-static), which is a standard Blazor `RenderFragment`.
     * If Grid editing is enabled and the columns are created from the keys of the first data item, use the [`OnModelInit` event](slug:grid-events#onmodelinit) to populate each newly added item with some default values. Otherwise the columns will disappear because the new data item (`ExpandoObject`) has no properties and is prepended to the `Data` collection. Another option is to create columns from a non-first item. `null` does not qualify as a default value, because it cannot help determine the property type.
-* The Grid clones data items during editing. When editing, you can store the original item in the [Grid `OnEdit` handler](slug:components/grid/editing/overview#events). This will make the retrieval of the original item easier later in `OnUpdate` (example below).
+* The Grid clones data items during editing. When editing, you can store the original item in the [Grid `OnEdit` handler](slug:grid-editing-overview#events). This will make the retrieval of the original item easier later in `OnUpdate` (example below).
 * Nullable data, `LoadGroupsOnDemand`, and nested model properties require special handling. [Check the notes](#notes) below for additional information.
 
 >caption Grid data operations with ExpandoObject
@@ -189,7 +189,7 @@ The following list contains information about requirements and limitations when
 
 ### Editing
 
-If any non-string property in the `ExpandoObject` is `nullable`, then do not set [`EditorType`](slug:components/grid/editing/overview#customize-the-editor-fields) for the column. Instead, use a [Grid column `EditorTemplate`](slug:grid-templates-editor). The following code snippet is part of the full example below.
+If any non-string property in the `ExpandoObject` is `nullable`, then do not set [`EditorType`](slug:grid-editing-overview#column-editors) for the column. Instead, use a [Grid column `EditorTemplate`](slug:grid-templates-editor). The following code snippet is part of the full example below.
 
 <div class="skip-repl"></div>
 
diff --git a/knowledge-base/grid-checkbox-editing.md b/knowledge-base/grid-checkbox-editing.md
index 5bc1259559..493f8b2ff9 100644
--- a/knowledge-base/grid-checkbox-editing.md
+++ b/knowledge-base/grid-checkbox-editing.md
@@ -38,7 +38,7 @@ This KB article answers the following questions:
 ## Solution
 
 1. Define a [`<GridColumn>` with a `Field`](slug:components/grid/columns/bound) that points to a `bool` property.
-1. Set [`Editable="false"`](slug:components/grid/columns/bound#data-operations) for that column, if the [Grid `EditMode`](slug:components/grid/editing/overview) is `Incell`.
+1. Set [`Editable="false"`](slug:components/grid/columns/bound#data-operations) for that column, if the [Grid `EditMode`](slug:grid-editing-overview) is `Incell`.
 1. Define a [column cell template](slug:grid-templates-column) (`<Template>`) for the column. Place a [`TelerikCheckBox` component](slug:checkbox-overview) inside.
 1. If the updated CheckBox values require real-time synchronization with a remote data source, then use the [CheckBox `OnChange` or `ValueChanged` event](slug:checkbox-events). In this case, `ValueChanged` will also require a [`ValueExpression`](slug:common-kb-requires-valueexpression).
 
@@ -178,8 +178,9 @@ This KB article answers the following questions:
 
 ## Notes
 
-The [built-in Grid editing](slug:components/grid/editing/overview) feature creates a [copy of the original data item](slug:components/grid/editing/overview#notes) while a row is in edit mode. As a result, CheckBox value changes in the non-templated column above are applied to the template columns *after* the `OnUpdate` handler executes.
+The [built-in Grid editing](slug:grid-editing-overview) feature creates a [copy of the original data item](slug:grid-editing-overview#notes) while a row is in edit mode. As a result, CheckBox value changes in the non-templated column above are applied to the template columns *after* the `OnUpdate` handler executes.
 
 ## 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-column-state.md b/knowledge-base/grid-column-state.md
index c8b1dd568d..31f212c444 100644
--- a/knowledge-base/grid-column-state.md
+++ b/knowledge-base/grid-column-state.md
@@ -16,7 +16,7 @@ res_type: kb
     <tbody>
         <tr>
             <td>Product</td>
-            <td>Grid for Blazor</td>
+            <td>Grid for Blazor, <br /> TreeList for Blazor</td>
         </tr>
     </tbody>
 </table>
diff --git a/knowledge-base/grid-customize-delete-confirmation-dialog.md b/knowledge-base/grid-customize-delete-confirmation-dialog.md
index c5083845b9..c5dc2fa49f 100644
--- a/knowledge-base/grid-customize-delete-confirmation-dialog.md
+++ b/knowledge-base/grid-customize-delete-confirmation-dialog.md
@@ -335,5 +335,5 @@ Using the [Dialog component](slug:dialog-overview) will let you have fully custo
 
 ## See Also
 
-* [Grid Editing](slug:components/grid/editing/overview)
+* [Grid Editing](slug:grid-editing-overview)
 * [Dialog Overview](slug:dialog-overview)
diff --git a/knowledge-base/grid-default-value-for-new-row.md b/knowledge-base/grid-default-value-for-new-row.md
index c7d43318b7..c1aa52e7b6 100644
--- a/knowledge-base/grid-default-value-for-new-row.md
+++ b/knowledge-base/grid-default-value-for-new-row.md
@@ -1,137 +1,125 @@
 ---
-title: Setting default values in new row
-description: How to set default values in a new grid row.
+title: Set Default Values for New Grid Rows
+description: Learn how to set default values when the user adds new data items to a Telerik Grid or Telerik TreeList for Blazor.
 type: how-to
-page_title: Set default values in new row
+page_title: How to Set Default Values for New Grid Rows
 slug: grid-kb-default-value-for-new-row
 position: 
-tags: 
+tags: blazor, grid, treelist, crud
 ticketid: 1433032
 res_type: kb
 ---
 
 ## Environment
+
 <table>
-	<tbody>
-		<tr>
-			<td>Product</td>
-			<td>Grid for Blazor</td>
-		</tr>
-	</tbody>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Grid for Blazor, <br /> TreeList for Blazor</td>
+        </tr>
+    </tbody>
 </table>
 
-
 ## Description
 
-Is there any way to default the values that are used when I create a new row?
+This KB article answers the following questions:
 
-So for example, I have a row where I want to default a date to Jan 1st of the following year.  However, when I add the row, it adds nulls to all fields and the date shows up as 1 Jan 1900 and there's a lot of fiddly clicking to set the right date.
-
-Or, if the field is not nullable it would default to a zero or to a `Jan 01` in the year `0001`.
+* How to apply predefined default values to data item properties when adding new rows to the Grid?
+* How to set default values that are used when I create a new row? For example, I want to default a date to January 1 of next year instead of `null` or `Jan 1, 0001`.
 
 ## Solution
 
-There are two ways to set default values in a new row:
+There are several ways to set default values in a new Grid or TreeList row:
 
-* [Set them in the default constructor of the model class.](#set-them-in-the-default-constructor-of-the-model-class)
-* [Use the grid state](#use-the-grid-state)
+* [In the component model class](#model-class)
+* [In the `OnAdd` event](#onadd-event)
+* [In the `OnModelInit` event](#onmodelinit-event)
+* [Through the Grid State](#grid-state)
 
+### Model Class
 
+Setting default values in the model class is independent of the Grid component.
 
-### Set them in the default constructor of the model class.
+>caption Set default values inline
 
->caption How to set default values in a new grid row
+````C#.skip-repl
+public class Order
+{
+    public int Quantity { get; set; } = 10;
 
-<div class="skip-repl"></div>
-````C# Model
-    public class SampleData
-    {
-        public SampleData()
-        {
-            // to set default values in the grid, use the default constructor of the model
-            HireDate = DateTime.Now.AddDays(14);
-            Salary = 1000;
-        }
-
-        public int ID { get; set; }
-        public string Name { get; set; }
-
-        public DateTime HireDate { get; set; }
-        public decimal Salary { get; set; }
-    }
+    public DateTime Received { get; set; } = DateTime.Now;
+}
 ````
-````RAZOR Component
-@* To set default values for the new row, use the default model constructor to set them
-    The Telerik grid and editors will show the values your app provides *@
-
-Click the <strong>Add</strong> button to see the default values for the HireDate and Salary fields
-
-<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
-             OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">
-    <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
-    </GridToolBarTemplate>
-    <GridColumns>
-        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
-        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
-        <GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date (has default value)" />
-        <GridColumn Field=@nameof(SampleData.Salary) Title="Salary (has default value)" />
-        <GridCommandColumn>
-            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
-            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
-            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
-        </GridCommandColumn>
-    </GridColumns>
-</TelerikGrid>
-
-@code {
-    async Task UpdateHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
-        var index = MyData.FindIndex(i => i.ID == item.ID);
-        if (index != -1)
-        {
-            MyData[index] = item;
-        }
-    }
 
-    async Task DeleteHandler(GridCommandEventArgs args)
-    {
-        SampleData item = (SampleData)args.Item;
-        MyData.Remove(item);
-    }
+>caption Set default values in the constructor method
+
+````C#.skip-repl
+public class Order
+{
+    public int Quantity { get; set; }
+
+    public DateTime Received { get; set; }
 
-    async Task CreateHandler(GridCommandEventArgs args)
+    public Order()
     {
-        SampleData item = (SampleData)args.Item;
-        item.ID = MyData.Count + 1;
-        MyData.Insert(0, item);
+        Quantity = 10;
+        Received = DateTime.Now;
     }
+}
+````
+
+### OnAdd Event
 
-    public List<SampleData> MyData { get; set; }
+The [Grid `OnAdd` event](slug:grid-editing-overview#events) fires when the user clicks on the **Add** command button and before the Grid renders the new row. Set the default values to the `Item` property of the [`GridCommandEventArgs` event argument](slug:grid-editing-overview#gridcommandeventargs).
 
-    protected override void OnInitialized()
+>caption Set default values in the Grid OnAdd event
+
+````C#.skip-repl
+private void OnGridAdd(GridCommandEventArgs args)
+{
+    var newItem = (Order)args.Item;
+    newItem.Quantity = 10;
+    newItem.Received = DateTime.Now;
+}
+````
+
+See complete runnable examples for [inline](slug:grid-editing-inline#advanced), [popup](slug:grid-editing-popup#advanced), and [in-cell](slug:grid-editing-incell#advanced) edit mode.
+
+### OnModelInit Event
+
+The [Grid `OnModelInit` event](slug:grid-editing-overview#events) fires when the Grid [needs a new model instance](slug:grid-editing-overview#item-instances) for add or edit mode. Set the default values to the item object that the event handler returns.
+
+>caption Set default values in the OnAdd event
+
+````C#.skip-repl
+private Order OnGridModelInit()
+{
+    return new Order()
     {
-        MyData = new List<SampleData>();
-
-        for (int i = 0; i < 50; i++)
-        {
-            MyData.Add(new SampleData()
-            {
-                ID = i,
-                Name = "Name " + i.ToString(),
-                HireDate = DateTime.Now.AddMonths(-i),
-                Salary = i^3
-            });
-        }
-    }
+        Quantity = 10,
+        Received = DateTime.Now
+    };
 }
 ````
 
-### Use the grid state
+See complete runnable examples for [inline](slug:grid-editing-inline#advanced), [popup](slug:grid-editing-popup#advanced), and [in-cell](slug:grid-editing-incell#advanced) edit mode.
+
+### Grid State
+
+You can [use the Grid State to put the component in add or edit mode programmatically](slug:grid-kb-add-edit-state). This process does not use [built-in commands](slug:grid-editing-overview#commands). In this case, set the default item values to the [`InsertedItem` property](slug:grid-state#information-in-the-grid-state) of the `GridState` object.
 
-You can use the grid state to put the grid in insert/edit mode without the built-in "Add" command. You can add a button (your own or a GridCommandButton but with a custom command name) to the toolbar, and in its OnClick event you can set the `InsertedItem` of the grid state as desired.
+````C#.skip-repl
+var gridState = GridRef.GetState();
+
+gridState.InsertedItem = new Order();
+gridState.InsertedItem.Quantity = 10;
+gridState.InsertedItem.Received = DateTime.Now;
+
+await GridRef.SetStateAsync(gridState);
+````
 
-You can find an example of this in the [Initiate Editing or Inserting of an Item](slug:grid-kb-add-edit-state) example.
+## See Also
 
+* [Grid CRUD Events](slug:grid-editing-overview#events)
+* [Grid State](slug:grid-state)
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 0000000000..c98890eb4c
--- /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
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>
+                Grid for Blazor, <br />
+                TreeList for Blazor
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+## 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 `<Template>`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
+<TelerikGrid @ref="@GridRef1"
+             Data="@GridData"
+             Height="300px">
+    <GridToolBar>
+        <GridToolBarCustomTool>
+            <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Warning"
+                           OnClick="@OnGridCustomCreate">Custom Add</TelerikButton>
+        </GridToolBarCustomTool>
+    </GridToolBar>
+    <GridColumns>
+        <GridColumn Field="@nameof(Product.Id)" Width="60px" />
+        <GridColumn Field="@nameof(Product.Name)">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <TelerikTextBox @bind-Value="@dataItem.Name"
+                                OnChange="@( (object newValue) => OnDataItemValueChanged(newValue, dataItem, nameof(Product.Name)) )" />
+            </Template>
+        </GridColumn>
+        <GridColumn Field="@nameof(Product.Description)">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <TelerikTextArea @bind-Value="@dataItem.Description"
+                                 OnChange="@( (object newValue) => OnDataItemValueChanged(newValue, dataItem, nameof(Product.Description)) )" />
+            </Template>
+        </GridColumn>
+        <GridColumn Field="@nameof(Product.Price)">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <TelerikNumericTextBox @bind-Value="@dataItem.Price"
+                                       Format="C2"
+                                       OnChange="@( (object newValue) => OnDataItemValueChanged(newValue, dataItem, nameof(Product.Price)) )" />
+
+            </Template>
+        </GridColumn>
+        <GridColumn Field="@nameof(Product.Quantity)">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <TelerikNumericTextBox @bind-Value="@dataItem.Quantity"
+                                       Format="N0"
+                                       OnChange="@( (object newValue) => OnDataItemValueChanged(newValue, dataItem, nameof(Product.Quantity)) )" />
+
+            </Template>
+        </GridColumn>
+        <GridColumn Field="@nameof(Product.ReleaseDate)">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <TelerikDatePicker @bind-Value="@dataItem.ReleaseDate"
+                                   OnChange="@( (object newValue) => OnDataItemValueChanged(newValue, dataItem, nameof(Product.ReleaseDate)) )" />
+            </Template>
+        </GridColumn>
+        <GridColumn Field="@nameof(Product.Discontinued)">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <TelerikCheckBox @bind-Value="@dataItem.Discontinued"
+                                 OnChange="@( (object newValue) => OnDataItemValueChanged(newValue, dataItem, nameof(Product.Discontinued)) )" />
+            </Template>
+        </GridColumn>
+    </GridColumns>
+</TelerikGrid>
+
+<p>The Grid below shows how the above <code>Data</code> collection changes.</p>
+
+<TelerikGrid @ref="@GridRef2"
+             Data="@GridData"
+             Height="300px">
+    <GridColumns>
+        <GridColumn Field="@nameof(Product.Id)" Width="60px" />
+        <GridColumn Field="@nameof(Product.Name)" />
+        <GridColumn Field="@nameof(Product.Description)">
+            <Template>
+                @{ var dataItem = (Product)context; }
+                <div style="white-space:pre">@dataItem.Description</div>
+            </Template>
+        </GridColumn>
+        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
+        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
+        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" />
+        <GridColumn Field="@nameof(Product.Discontinued)" />
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    private TelerikGrid<Product>? GridRef1 { get; set; }
+    private TelerikGrid<Product>? GridRef2 { get; set; }
+
+    private List<Product> 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:grid-editing-overview)
+* [Grid Column Cell Template](slug:grid-templates-column)
diff --git a/knowledge-base/grid-edit-in-hierarchy.md b/knowledge-base/grid-edit-in-hierarchy.md
index 1a3e84dbd0..bf3f0a5263 100644
--- a/knowledge-base/grid-edit-in-hierarchy.md
+++ b/knowledge-base/grid-edit-in-hierarchy.md
@@ -29,7 +29,7 @@ This article shows how to create, update, and delete items in the main (master)
 
 The Grid CRUD operations are independent of the hierarchy. Each Grid performs editing separately and has its own handlers.
 
-1. [Configure editing for the main Grid](slug:components/grid/editing/overview).
+1. [Configure editing for the main Grid](slug:grid-editing-overview).
 1. Define a [`DetailTemplate`](slug:components/grid/features/hierarchy) and configure the nested Grid inside it, including editing.
 1. To persist the expanded state of a `DetailTemplate` while editing its parent item, override the `Equals()` method of the master data item class. This is supported from version **5.1.0**.
 
@@ -316,5 +316,5 @@ Grid <code>EditMode</code>:
 
 ## See Also
 
-* [Grid Editing](slug:components/grid/editing/overview)
+* [Grid Editing](slug:grid-editing-overview)
 * [Grid Hierarchy](slug:components/grid/features/hierarchy)
diff --git a/knowledge-base/grid-entity-framework-model-update.md b/knowledge-base/grid-entity-framework-model-update.md
new file mode 100644
index 0000000000..007ff779bf
--- /dev/null
+++ b/knowledge-base/grid-entity-framework-model-update.md
@@ -0,0 +1,127 @@
+---
+title: Instance of Entity Type Cannot Be Tracked
+description: Learn how to resolve and avoid exceptions when updating Grid items in an Entity Framework DbContext DbSet. The exception message may read The instance of entity type ... cannot be tracked because another instance with the same key value ... is already being tracked.
+type: troubleshooting
+page_title: How to Fix Exception Instance of Entity Type Cannot Be Tracked
+slug: grid-kb-entity-framework-model-update
+tags: blazor, grid, treelist, editing, entityframework
+ticketid:
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Grid for Blazor, <br /> TreeList for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+When binding the Grid directly to Entity Framework models or `DbSet`, and using `GridCommandEventArgs.Item` in your database update method, you can get one of the following exceptions:
+
+* `The instance of entity type ... cannot be tracked because another instance with the same key value for ... is already being tracked.`
+* `This is a DynamicProxy2 error: The interceptor attempted to 'Proceed' for method 'Microsoft.EntityFrameworkCore.Infrastructure.ILazyLoader get_LazyLoader()' which has no target.`.
+
+## Cause
+
+The Grid [creates a separate data item instance when going into add or edit mode](slug:grid-editing-overview#item-instances). Entity Framework can track one only entity with a given primary key value.
+
+## Solution
+
+Perform the database update as follows:
+
+1. Find the original object in your database by its unique ID.
+1. Commit the changes by doing one of the following:
+    * Transfer the property values from the updated object to the original object.
+    * Replace the original object in the Entity Framework `DbSet` with the updated one.
+1. Save the changes in the `DbContext`.
+
+> The following examples use Microsoft Entity Framework APIs and do not claim to reflect best practices. Use them as general guidance and adjust, according to your preferences.
+
+### Update Original Data Item
+
+>caption Change the property values of the original Entity Framework item instance
+
+````CS.skip-repl
+// OnGridUpdate is the Grid OnUpdate handler
+// Product is the Grid model class
+// DbContextEF is the DbContext instance
+// DbContextEF.Products is a DbSet<Product>
+
+private async Task OnGridUpdate(GridCommandEventArgs args)
+{
+    var updatedProduct = (Product)args.Item;
+
+    var originalProduct = await DbContextEF.Products.FirstOrDefaultAsync(x => x.Id == updatedProduct.Id);
+
+    if (originalProduct != null)
+    {
+        DbContextEF.Entry(originalProduct).CurrentValues.SetValues(updatedProduct);
+
+        await DbContextEF.SaveChangesAsync();
+    }
+}
+````
+
+### Replace Original Data Item
+
+>caption Detach and replace the original Entity Framework item instance
+
+````CS.skip-repl
+// OnGridUpdate is the Grid OnUpdate handler
+// Product is the Grid model class
+// DbContextEF is the DbContext instance
+// DbContextEF.Products is a DbSet<Product>
+
+private async Task OnGridUpdate(GridCommandEventArgs args)
+{
+    var updatedProduct = (Product)args.Item;
+
+    var originalProduct = await DbContextEF.Products.FirstOrDefaultAsync(x => x.Id == updatedProduct.Id);
+
+    if (originalProduct != null)
+    {
+        DbContextEF.Products.Entry(originalProduct).State = EntityState.Detached;
+        DbContextEF.Products.Update(updatedProduct);
+
+        await DbContextEF.SaveChangesAsync();
+    }
+}
+````
+
+### Update Original Data Item Properties One by One
+
+>caption Change the property values of the original Entity Framework item instance one by one
+
+````CS.skip-repl
+// OnGridUpdate is the Grid OnUpdate handler
+// Product is the Grid model class
+// DbContextEF is the DbContext instance
+// DbContextEF.Products is a DbSet<Product>
+
+private async Task OnGridUpdate(GridCommandEventArgs args)
+{
+    var updatedProduct = (Product)args.Item;
+
+    var originalProduct = await DbContextEF.Products.FirstOrDefaultAsync(x => x.Id == updatedProduct.Id);
+
+    if (originalProduct != null)
+    {
+        originalProduct.Name = updatedProduct.Name;
+        originalProduct.Price = updatedProduct.Price;
+        originalProduct.Quantity = updatedProduct.Quantity;
+
+        await DbContextEF.SaveChangesAsync();
+    }
+}
+````
+
+## See Also
+
+* [Grid CRUD Operations Overview](slug:grid-editing-overview)
+* [TreeList CRUD Operations Overview](slug:treelist-editing-overview)
diff --git a/knowledge-base/grid-get-filtered-data.md b/knowledge-base/grid-get-filtered-data.md
index 8e24427dc9..baa9495ff3 100644
--- a/knowledge-base/grid-get-filtered-data.md
+++ b/knowledge-base/grid-get-filtered-data.md
@@ -16,7 +16,7 @@ res_type: kb
     <tbody>
         <tr>
             <td>Product</td>
-            <td>Grid for Blazor</td>
+            <td>Grid for Blazor, <br /> TreeList for Blazor</td>
         </tr>
     </tbody>
 </table>
diff --git a/knowledge-base/grid-handle-empty-popup-footer.md b/knowledge-base/grid-handle-empty-popup-footer.md
index 0fe2d8803b..f6d54cd3a3 100644
--- a/knowledge-base/grid-handle-empty-popup-footer.md
+++ b/knowledge-base/grid-handle-empty-popup-footer.md
@@ -456,5 +456,5 @@ This approach relies on using CSS to hide the empty footer. Add your custom clas
 
 ## See Also
 
-- [Grid Popup Editing - Documentation](slug:components/grid/editing/popup)
+- [Grid Popup Editing - Documentation](slug:grid-editing-popup)
 - [Customizing the Grid's Edit Form](slug:grid-templates-popup-form)
diff --git a/knowledge-base/grid-incell-add-new-row-enter.md b/knowledge-base/grid-incell-add-new-row-enter.md
index 9fa92b6408..a9667949e6 100644
--- a/knowledge-base/grid-incell-add-new-row-enter.md
+++ b/knowledge-base/grid-incell-add-new-row-enter.md
@@ -41,7 +41,7 @@ Here are the required development steps:
 
 1. [Attach a `keyup` handler](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for the Grid element (`div.k-grid`). Use a JavaScript code and call it once from `OnAfterRenderAsync`.
 1. Use the [`keyup` event arguments](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) to track `Enter` and `Tab` key presses inside edit cells (`td.k-grid-edit-cell`) on the last table row in the Grid.
-1. Check if the user is updating the last Grid row in the [`OnUpdate` handler](slug:components/grid/editing/overview#events).
+1. Check if the user is updating the last Grid row in the [`OnUpdate` handler](slug:grid-editing-overview#events).
 1. If the previous point is true, then use JSInterop to verify if the user has pressed `Enter` or `Tab`. In this case, add a new data item at the end of the Grid `Data` collection.
 1. If column reordering is enabled, use the [`OnStateChanged` event](slug:grid-state#events) to track which is the last editable column. Use this information when the user is tabbing, before adding a new data item to the Grid.
 
@@ -240,4 +240,4 @@ function getLastKey() {
 
 ## See Also
 
-* [Grid in cell editing](slug:components/grid/editing/incell)
+* [Grid in cell editing](slug:grid-editing-incell)
diff --git a/knowledge-base/grid-load-cached-data-after-crud-operations.md b/knowledge-base/grid-load-cached-data-after-crud-operations.md
new file mode 100644
index 0000000000..0269461fff
--- /dev/null
+++ b/knowledge-base/grid-load-cached-data-after-crud-operations.md
@@ -0,0 +1,423 @@
+---
+title: Load Cached Data in the Grid After CRUD Operations
+description: Learn how to spare one database read request and populate the Telerik Grid for Blazor with previously cached data.
+type: how-to
+page_title: How to Load Cached Data in the Grid After CRUD Operations
+slug: grid-kb-load-cached-data-after-crud-operations
+tags: blazor, grid, treelist, editing
+ticketid:
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>Grid for Blazor, <br /> TreeList for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+How to Load Cached Data in the Grid After CRUD Operations?
+
+## Solution
+
+The required approach depends on whether the Grid is databound with the [`Data` parameter](#data-parameter) or the [`OnRead` event](#onread-event).
+
+This end result spares one database request, but the user may not see recent changes made by other users.
+
+### Data Parameter
+
+Use the [Grid CUD event arguments](slug:grid-editing-overview#events) to update the local item collection in the `Data` parameter manually.
+
+>caption Avoid a Read request after Create, Delete, and Update operations
+
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikGrid Data="@GridData"
+             EditMode="@GridEditMode.Incell"
+             OnCreate="@OnGridCreate"
+             OnDelete="@OnGridDelete"
+             OnUpdate="@OnGridUpdate">
+    <GridToolBarTemplate>
+        <GridCommandButton Command="Add">Add Item</GridCommandButton>
+    </GridToolBarTemplate>
+    <GridColumns>
+        <GridColumn Field="@nameof(Product.Name)" />
+        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
+        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
+        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" />
+        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px" />
+        <GridCommandColumn Width="180px">
+            <GridCommandButton Command="Delete">Delete</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    private List<Product> GridData { get; set; } = new();
+
+    private ProductService GridProductService { get; set; } = new();
+
+    private async Task OnGridCreate(GridCommandEventArgs args)
+    {
+        var createdItem = (Product)args.Item;
+
+        int createdItemId = await GridProductService.Create(createdItem);
+        createdItem.Id = createdItemId;
+        GridData.Insert(0, createdItem);
+    }
+
+    private async Task OnGridDelete(GridCommandEventArgs args)
+    {
+        var deletedItem = (Product)args.Item;
+
+        await GridProductService.Delete(deletedItem);
+
+        GridData.Remove(deletedItem);
+    }
+
+    private async Task OnGridUpdate(GridCommandEventArgs args)
+    {
+        var updatedItem = (Product)args.Item;
+
+        await GridProductService.Update(updatedItem);
+
+        var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
+
+        if (originalItemIndex != -1)
+        {
+            GridData[originalItemIndex] = updatedItem;
+        }
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        GridData = await GridProductService.Read();
+    }
+
+    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; }
+    }
+
+    #region Data Service
+
+    public class ProductService
+    {
+        private List<Product> Items { get; set; } = new();
+
+        private int LastId { get; set; }
+
+        public async Task<int> Create(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            product.Id = ++LastId;
+
+            Items.Insert(0, product);
+
+            return LastId;
+        }
+
+        public async Task<bool> Delete(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            if (Items.Contains(product))
+            {
+                Items.Remove(product);
+
+                return true;
+            }
+
+            return false;
+        }
+
+        public async Task<List<Product>> Read()
+        {
+            await SimulateAsyncOperation();
+
+            return Items;
+        }
+
+        public async Task<DataSourceResult> Read(DataSourceRequest request)
+        {
+            return await Items.ToDataSourceResultAsync(request);
+        }
+
+        public async Task<bool> Update(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);
+
+            if (originalItemIndex != -1)
+            {
+                Items[originalItemIndex] = product;
+                return true;
+            }
+
+            return false;
+        }
+
+        private async Task SimulateAsyncOperation()
+        {
+            await Task.Delay(100);
+        }
+
+        public ProductService(int itemCount = 5)
+        {
+            Random rnd = Random.Shared;
+
+            for (int i = 1; i <= itemCount; i++)
+            {
+                Items.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
+                });
+            }
+        }
+    }
+
+    #endregion Data Service
+}
+````
+
+### OnRead Event
+
+1. Cache the values of `args.Data` and `args.Total` from the previous `OnRead` event handler execution.
+1. Raise a boolen flag in the CUD event handler and check it in the `OnRead` handler.
+1. Update the cached data and total value with the latest user changes before using them in the current `OnRead` call.
+1. Reset the boolean flag, so that next time the Grid receives fresh data from the data source.
+
+>caption Avoid a Read request after Create, Delete, and Update operations
+
+````RAZOR
+@using System.ComponentModel.DataAnnotations
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikGrid OnRead="OnGridRead"
+             TItem="@Product"
+             EditMode="@GridEditMode.Incell"
+             Height="360px"
+             OnCreate="@OnGridCreate"
+             OnDelete="@OnGridDelete"
+             OnUpdate="@OnGridUpdate"
+             Pageable="true"
+             Sortable="true">
+    <GridToolBarTemplate>
+        <GridCommandButton Command="Add">Add Item</GridCommandButton>
+    </GridToolBarTemplate>
+    <GridColumns>
+        <GridColumn Field="@nameof(Product.Name)" />
+        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
+        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
+        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" />
+        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px" />
+        <GridCommandColumn Width="180px">
+            <GridCommandButton Command="Delete">Delete</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
+
+<p><code>OnRead</code> event log: @OnReadLog</p>
+
+@code {
+    private ProductService GridProductService { get; set; } = new();
+
+    private List<Product> CachedGridData { get; set; } = new();
+    private int CachedGridTotal { get; set; }
+    private bool ShouldUseCachedData { get; set; }
+    private string OnReadLog { get; set; } = string.Empty;
+
+    private async Task OnGridCreate(GridCommandEventArgs args)
+    {
+        var createdItem = (Product)args.Item;
+
+        int createdItemId = await GridProductService.Create(createdItem);
+
+        ShouldUseCachedData = true;
+        createdItem.Id = createdItemId;
+        CachedGridData.Insert(0, createdItem);
+        ++CachedGridTotal;
+    }
+
+    private async Task OnGridDelete(GridCommandEventArgs args)
+    {
+        var deletedItem = (Product)args.Item;
+
+        await GridProductService.Delete(deletedItem);
+
+        ShouldUseCachedData = true;
+        CachedGridData.Remove(deletedItem);
+        --CachedGridTotal;
+    }
+
+    private async Task OnGridRead(GridReadEventArgs args)
+    {
+        if (ShouldUseCachedData)
+        {
+            ShouldUseCachedData = false;
+
+            args.Data = CachedGridData;
+            args.Total = CachedGridTotal;
+
+            OnReadLog = $"Used modified cached data at {DateTime.Now.ToString("HH:mm:ss.fff")}";
+        }
+        else
+        {
+            DataSourceResult result = await GridProductService.Read(args.Request);
+
+            CachedGridData = result.Data.Cast<Product>().ToList();
+            CachedGridTotal = result.Total;
+
+            args.Data = result.Data;
+            args.Total = result.Total;
+
+            OnReadLog = $"Requested new data at {DateTime.Now.ToString("HH:mm:ss.fff")}";
+        }
+    }
+
+    private async Task OnGridUpdate(GridCommandEventArgs args)
+    {
+        var updatedItem = (Product)args.Item;
+
+        await GridProductService.Update(updatedItem);
+
+        ShouldUseCachedData = true;
+        int originalItemIndex = CachedGridData.FindIndex(x => x.Id == updatedItem.Id);
+        if (originalItemIndex != -1)
+        {
+            CachedGridData[originalItemIndex] = updatedItem;
+        }
+    }
+
+    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; }
+    }
+
+    #region Data Service
+
+    public class ProductService
+    {
+        private List<Product> Items { get; set; } = new();
+
+        private int LastId { get; set; }
+
+        public async Task<int> Create(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            product.Id = ++LastId;
+
+            Items.Insert(0, product);
+
+            return LastId;
+        }
+
+        public async Task<bool> Delete(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            if (Items.Contains(product))
+            {
+                Items.Remove(product);
+
+                return true;
+            }
+
+            return false;
+        }
+
+        public async Task<List<Product>> Read()
+        {
+            await SimulateAsyncOperation();
+
+            return Items;
+        }
+
+        public async Task<DataSourceResult> Read(DataSourceRequest request)
+        {
+            return await Items.ToDataSourceResultAsync(request);
+        }
+
+        public async Task<bool> Update(Product product)
+        {
+            await SimulateAsyncOperation();
+
+            int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);
+
+            if (originalItemIndex != -1)
+            {
+                Items[originalItemIndex] = product;
+                return true;
+            }
+
+            return false;
+        }
+
+        private async Task SimulateAsyncOperation()
+        {
+            await Task.Delay(100);
+        }
+
+        public ProductService(int itemCount = 5)
+        {
+            Random rnd = Random.Shared;
+
+            for (int i = 1; i <= itemCount; i++)
+            {
+                Items.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
+                });
+            }
+        }
+    }
+
+    #endregion Data Service
+}
+````
+
+## See Also
+
+* [Grid CRUD Operations Overview](slug:grid-editing-overview)
+* [TreeList CRUD Operations Overview](slug:treelist-editing-overview)
diff --git a/knowledge-base/grid-popup-edit-form-columns.md b/knowledge-base/grid-popup-edit-form-columns.md
index aa12827236..668ba969bc 100644
--- a/knowledge-base/grid-popup-edit-form-columns.md
+++ b/knowledge-base/grid-popup-edit-form-columns.md
@@ -27,9 +27,7 @@ How do I display the Grid popup edit form in a multiple-column layout? How do I
 
 ## Solution
 
-Customize the Grid edit from through the [`GridPopupEditFormSettings` tag](slug:components/grid/editing/popup#edit-form-customization).
-
-https://docs.telerik.com/blazor-ui/components/grid/editing/popup#edit-form-customization
+Customize the Grid edit form through the [`GridPopupEditFormSettings` tag](slug:grid-editing-popup#form-layout).
 
 ## Versions before 3.1.0
 
diff --git a/knowledge-base/grid-popup-edit-title.md b/knowledge-base/grid-popup-edit-title.md
index 8c876dede6..d05044512f 100644
--- a/knowledge-base/grid-popup-edit-title.md
+++ b/knowledge-base/grid-popup-edit-title.md
@@ -33,9 +33,9 @@ How to dynamically set the Grid popup edit Window title?
 
 ## Solution
 
-1. Add a [`<GridPopupEditSettings>` tag](slug:components/grid/editing/popup#popup-customization) inside a `<GridSettings>` tag in the Grid declaration.
+1. Add a [`<GridPopupEditSettings>` tag](slug:grid-editing-popup#popup-dimensions-and-styles) inside a `<GridSettings>` tag in the Grid declaration.
 1. Set the `Title` parameter of `GridPopupEditSettings` to a string property.
-1. Handle the [Grid `OnEdit` event](slug:components/grid/editing/overview#events) and set the popup title to the desired data item value.
+1. Handle the [Grid `OnEdit` event](slug:grid-editing-overview#events) and set the popup title to the desired data item value.
 1. Handle the `OnClick` event of the button that adds new items. Usually this is a [command button in the Grid toolbar](slug:components/grid/features/toolbar). Set the popup title to the desired string label.
 
 >caption Dynamic Grid Popup Edit Form Title
@@ -120,4 +120,4 @@ How to dynamically set the Grid popup edit Window title?
 
 ## See Also
 
-* [Grid Popup Editing](slug:components/grid/editing/popup)
+* [Grid Popup Editing](slug:grid-editing-popup)
diff --git a/knowledge-base/grid-save-load-state-localstorage.md b/knowledge-base/grid-save-load-state-localstorage.md
index 396481f085..8a36857bd6 100644
--- a/knowledge-base/grid-save-load-state-localstorage.md
+++ b/knowledge-base/grid-save-load-state-localstorage.md
@@ -16,7 +16,7 @@ res_type: kb
     <tbody>
         <tr>
             <td>Product</td>
-            <td>Grid for Blazor</td>
+            <td>Grid for Blazor, <br /> TreeList for Blazor</td>
         </tr>
     </tbody>
 </table>
diff --git a/knowledge-base/grid-save-state-in-webassembly.md b/knowledge-base/grid-save-state-in-webassembly.md
index fc6818d71a..5fb0624da8 100644
--- a/knowledge-base/grid-save-state-in-webassembly.md
+++ b/knowledge-base/grid-save-state-in-webassembly.md
@@ -14,7 +14,7 @@ res_type: kb
     <tbody>
         <tr>
             <td>Product</td>
-            <td>Grid for Blazor</td>
+            <td>Grid for Blazor, <br /> TreeList for Blazor</td>
         </tr>
     </tbody>
 </table>
diff --git a/knowledge-base/grid-select-on-incell-edit.md b/knowledge-base/grid-select-on-incell-edit.md
index cf35407c16..d0ca3c8c0c 100644
--- a/knowledge-base/grid-select-on-incell-edit.md
+++ b/knowledge-base/grid-select-on-incell-edit.md
@@ -21,7 +21,7 @@ res_type: kb
 
 ## 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 by clicking both in editable and non-editable cells.
+When using the [InCell](slug: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 by clicking both in editable and non-editable cells.
 
  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.
 
diff --git a/knowledge-base/grid-show-confirm-cancel-dialog.md b/knowledge-base/grid-show-confirm-cancel-dialog.md
index e792d51f66..36df144a52 100644
--- a/knowledge-base/grid-show-confirm-cancel-dialog.md
+++ b/knowledge-base/grid-show-confirm-cancel-dialog.md
@@ -29,7 +29,7 @@ How to prompt the user to confirm canceling the edit/create before proceeding wi
 
 ## Solution
 
-If the user performs another operation (such as sorting or filtering) while the Grid is in edit mode, then editing will be canceled. Check the last bullet in the [Editing Notes section](slug:components/grid/editing/overview#notes) for more details. The Grid `OnCancel` event will fire and you can handle it to display a Dialog to allow the user to choose whether they want to cancel the editing or not.
+If the user performs another operation (such as sorting or filtering) while the Grid is in edit mode, then editing will be canceled. Check the last bullet in the [Editing Notes section](slug:grid-editing-overview#notes) for more details. The Grid `OnCancel` event will fire and you can handle it to display a Dialog to allow the user to choose whether they want to cancel the editing or not.
 
 Telerik UI for Blazor provides predefined and custom Dialogs:
 
diff --git a/knowledge-base/grid-sort-descending.md b/knowledge-base/grid-sort-descending.md
index 49d3b7b866..f7a08a9a5f 100644
--- a/knowledge-base/grid-sort-descending.md
+++ b/knowledge-base/grid-sort-descending.md
@@ -16,7 +16,7 @@ res_type: kb
     <tbody>
         <tr>
             <td>Product</td>
-            <td>Grid for Blazor</td>
+            <td>Grid for Blazor, <br /> TreeList for Blazor</td>
         </tr>
     </tbody>
 </table>
diff --git a/knowledge-base/grid-update-from-0-5-to-1-0.md b/knowledge-base/grid-update-from-0-5-to-1-0.md
index 77abd457b1..681df57d55 100644
--- a/knowledge-base/grid-update-from-0-5-to-1-0.md
+++ b/knowledge-base/grid-update-from-0-5-to-1-0.md
@@ -32,6 +32,6 @@ Here is a list of the changes:
 
 You can find more details (and samples) on the current way the grid operates in the following articles:
 
-* [grid editing overview](slug:components/grid/editing/overview)
+* [grid editing overview](slug:grid-editing-overview)
 * [grid command buttons](slug:components/grid/columns/command)
 * [grid toolbar](slug:components/grid/features/toolbar)
diff --git a/knowledge-base/treelist-add-edit-state.md b/knowledge-base/treelist-add-edit-state.md
new file mode 100644
index 0000000000..1f38f36408
--- /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
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>TreeList for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+
+## 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
+
+<h1>TreeList Edit Operations via the State</h1>
+
+<h2>Inline and Popup EditMode</h2>
+
+<TelerikTreeList @ref="@TreeListInlineRef"
+                 Data="@TreeListInlineData"
+                 IdField="@nameof(Employee.Id)"
+                 ParentIdField="@nameof(Employee.ParentId)"
+                 EditMode="@TreeListEditMode.Inline"
+                 OnCreate="@OnTreeListInlineCreate"
+                 OnUpdate="@OnTreeListInlineUpdate"
+                 Height="400px">
+    <TreeListToolBarTemplate>
+        <TreeListCommandButton Command="Add">Add Item</TreeListCommandButton>
+        <span class="k-separator"></span>
+        <label style="display: inline-block; line-height: var(--kendo-line-height)">
+            Select Parent for New Item:
+            <TelerikDropDownList Data="@TreeListInlineData"
+                                 @bind-Value="@InlineDropDownListValue"
+                                 TextField="@nameof(Employee.Name)"
+                                 ValueField="@nameof(Employee.Id)"
+                                 DefaultText="Root"
+                                 Width="180px" />
+        </label>
+        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary"
+                       OnClick="@InlineAdd">Programmatic Add</TelerikButton>
+        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary"
+                       OnClick="@InlineEdit">Programmatic Edit</TelerikButton>
+        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary"
+                       OnClick="@InlineCancel">Programmatic Cancel</TelerikButton>
+        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary"
+                       OnClick="@InlineUpdate">Programmatic Update</TelerikButton>
+    </TreeListToolBarTemplate>
+    <TreeListColumns>
+        <TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" />
+        <TreeListColumn Field="@nameof(Employee.Salary)" DisplayFormat="{0:C2}" Width="130px" />
+        <TreeListColumn Field="@nameof(Employee.HireDate)" DisplayFormat="{0:d}" Width="140px" />
+        <TreeListColumn Field="@nameof(Employee.IsDriver)" Width="80px" />
+        <TreeListCommandColumn Width="160px">
+            <TreeListCommandButton Command="Add">Add</TreeListCommandButton>
+            <TreeListCommandButton Command="Edit">Edit</TreeListCommandButton>
+            <TreeListCommandButton Command="Save" ShowInEdit="true">Save</TreeListCommandButton>
+            <TreeListCommandButton Command="Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
+        </TreeListCommandColumn>
+    </TreeListColumns>
+</TelerikTreeList>
+
+<h2>Incell EditMode</h2>
+
+<TelerikTreeList @ref="@TreeListIncellRef"
+                 Data="@TreeListIncellData"
+                 IdField="@nameof(Employee.Id)"
+                 ParentIdField="@nameof(Employee.ParentId)"
+                 EditMode="@TreeListEditMode.Incell"
+                 OnCreate="@OnTreeListIncellCreate"
+                 OnUpdate="@OnTreeListIncellUpdate"
+                 Height="400px">
+    <TreeListToolBarTemplate>
+        <TreeListCommandButton Command="Add">Add Item</TreeListCommandButton>
+        <span class="k-separator"></span>
+        <label style="display: inline-block; line-height: var(--kendo-line-height)">
+            Select Parent for New Item:
+            <TelerikDropDownList Data="@TreeListIncellData"
+                                 @bind-Value="@IncellDropDownListValue"
+                                 TextField="@nameof(Employee.Name)"
+                                 ValueField="@nameof(Employee.Id)"
+                                 DefaultText="Root"
+                                 Width="180px" />
+        </label>
+        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary"
+                       OnClick="@IncellAdd">Programmatic Add</TelerikButton>
+        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Secondary"
+                       OnClick="@IncellEdit">Programmatic Edit</TelerikButton>
+    </TreeListToolBarTemplate>
+    <TreeListColumns>
+        <TreeListColumn Field="@nameof(Employee.Name)" Expandable="true" />
+        <TreeListColumn Field="@nameof(Employee.Salary)" DisplayFormat="{0:C2}" Width="130px" />
+        <TreeListColumn Field="@nameof(Employee.HireDate)" DisplayFormat="{0:d}" Width="140px" />
+        <TreeListColumn Field="@nameof(Employee.IsDriver)" Width="80px" />
+        <TreeListCommandColumn Width="60px">
+            <TreeListCommandButton Command="Add">Add</TreeListCommandButton>
+        </TreeListCommandColumn>
+    </TreeListColumns>
+</TelerikTreeList>
+
+@code {
+    private TelerikTreeList<Employee>? TreeListInlineRef { get; set; }
+    private TelerikTreeList<Employee>? TreeListIncellRef { get; set; }
+
+    private List<Employee>? TreeListInlineData { get; set; }
+    private List<Employee>? TreeListIncellData { get; set; }
+
+    private EmployeeService TreeListEmployeeInlineService { get; set; } = new();
+    private EmployeeService TreeListEmployeeIncellService { get; set; } = new();
+
+    private int? InlineDropDownListValue { get; set; }
+    private int? IncellDropDownListValue { get; set; }
+
+    #region Programmatic Inline Editing
+
+    private async Task InlineAdd()
+    {
+        var treeListState = TreeListInlineRef!.GetState();
+
+        treeListState.InsertedItem = new Employee();
+        treeListState.InsertedItem.Name = "New value";
+        treeListState.OriginalEditItem = null!;
+        treeListState.EditItem = null!;
+
+        Employee? parentItem = TreeListInlineData!.FirstOrDefault(x => x.Id == InlineDropDownListValue);
+        if (parentItem != null)
+        {
+            treeListState.ParentItem = parentItem;
+            treeListState.ExpandedItems.Add(parentItem);
+        }
+
+        await TreeListInlineRef!.SetStateAsync(treeListState);
+    }
+
+    private async Task InlineEdit()
+    {
+        if (TreeListInlineData!.Any())
+        {
+            var treeListState = TreeListInlineRef!.GetState();
+
+            treeListState.InsertedItem = null!;
+            treeListState.OriginalEditItem = TreeListInlineData!.First();
+            treeListState.EditItem = TreeListInlineData!.First().Clone();
+            treeListState.EditItem.Name = "Updated inline value";
+
+            await TreeListInlineRef!.SetStateAsync(treeListState);
+        }
+    }
+
+    private async Task InlineCancel()
+    {
+        var treeListState = TreeListInlineRef!.GetState();
+
+        treeListState.InsertedItem = null!;
+        treeListState.OriginalEditItem = null!;
+        treeListState.EditItem = null!;
+        treeListState.ParentItem = null!;
+
+        await TreeListInlineRef!.SetStateAsync(treeListState);
+    }
+
+    private async Task InlineUpdate()
+    {
+        var treeListState = TreeListInlineRef!.GetState();
+
+        if (treeListState.EditItem != null)
+        {
+            await OnTreeListInlineUpdate(new TreeListCommandEventArgs()
+            {
+                Item = treeListState.EditItem
+            });
+        }
+        else if (treeListState.InsertedItem != null)
+        {
+            await OnTreeListInlineCreate(new TreeListCommandEventArgs()
+            {
+                Item = treeListState.InsertedItem,
+                ParentItem = TreeListInlineData!.FirstOrDefault(x => x.Id == InlineDropDownListValue)
+            });
+        }
+
+        treeListState.InsertedItem = null!;
+        treeListState.OriginalEditItem = null!;
+        treeListState.EditItem = null!;
+        treeListState.ParentItem = null!;
+
+        await TreeListInlineRef!.SetStateAsync(treeListState);
+    }
+
+    #endregion Programmatic Inline Editing
+
+    #region Programmatic Incell Editing
+
+    private async Task IncellAdd()
+    {
+        var treeListState = TreeListIncellRef!.GetState();
+
+        var insertedProduct = new Employee()
+        {
+            HireDate = DateTime.Today,
+            Name = "Default New Name",
+            Salary = 1111
+        };
+
+        Employee? parentItem = TreeListIncellData!.FirstOrDefault(x => x.Id == IncellDropDownListValue);
+        if (parentItem != null)
+        {
+            treeListState.ExpandedItems.Add(parentItem);
+        }
+
+        await OnTreeListIncellCreate(new TreeListCommandEventArgs()
+        {
+            Item = insertedProduct,
+            ParentItem = parentItem
+        });
+
+        treeListState.OriginalEditItem = insertedProduct;
+        treeListState.EditItem = insertedProduct.Clone();
+        treeListState.EditField = nameof(Employee.Name);
+
+        await TreeListIncellRef!.SetStateAsync(treeListState);
+    }
+
+    private async Task IncellEdit()
+    {
+        if (TreeListIncellData!.Any())
+        {
+            var treeListState = TreeListIncellRef!.GetState();
+
+            treeListState.OriginalEditItem = TreeListIncellData!.First();
+            treeListState.EditItem = TreeListIncellData!.First().Clone();
+            treeListState.EditField = nameof(Employee.Name);
+            treeListState.EditItem.Name = "Updated incell value";
+
+            await TreeListIncellRef!.SetStateAsync(treeListState);
+        }
+    }
+
+    #endregion Programmatic Incell Editing
+
+    #region TreeList Inline Editing Handlers
+
+    private async Task OnTreeListInlineCreate(TreeListCommandEventArgs args)
+    {
+        var createdItem = (Employee)args.Item;
+        var parentItem = (Employee?)args.ParentItem;
+
+        await TreeListEmployeeInlineService.Create(createdItem, parentItem);
+
+        TreeListInlineData = await TreeListEmployeeInlineService.Read();
+    }
+
+    private async Task OnTreeListInlineUpdate(TreeListCommandEventArgs args)
+    {
+        var updatedItem = (Employee)args.Item;
+
+        await TreeListEmployeeInlineService.Update(updatedItem);
+
+        TreeListInlineData = await TreeListEmployeeInlineService.Read();
+    }
+
+    #endregion TreeList Inline Editing Handlers
+
+    #region TreeList Incell Editing Handlers
+
+    private async Task OnTreeListIncellCreate(TreeListCommandEventArgs args)
+    {
+        var createdItem = (Employee)args.Item;
+        var parentItem = (Employee?)args.ParentItem;
+
+        await TreeListEmployeeIncellService.Create(createdItem, parentItem);
+
+        TreeListIncellData = await TreeListEmployeeIncellService.Read();
+    }
+
+    private async Task OnTreeListIncellUpdate(TreeListCommandEventArgs args)
+    {
+        var updatedItem = (Employee)args.Item;
+
+        await TreeListEmployeeIncellService.Update(updatedItem);
+
+        TreeListIncellData = await TreeListEmployeeIncellService.Read();
+    }
+
+    #endregion TreeList Incell Editing Handlers
+
+    protected override async Task OnInitializedAsync()
+    {
+        TreeListInlineData = await TreeListEmployeeInlineService.Read();
+        TreeListIncellData = await TreeListEmployeeIncellService.Read();
+    }
+
+    public class Employee
+    {
+        public int Id { get; set; }
+        public int? ParentId { get; set; }
+        public bool HasChildren { get; set; }
+        [Required]
+        public string Name { get; set; } = string.Empty;
+        public string Notes { get; set; } = string.Empty;
+        [Required]
+        public decimal? Salary { get; set; }
+        [Required]
+        public DateTime? HireDate { get; set; }
+        public bool IsDriver { get; set; }
+
+        public override bool Equals(object? obj)
+        {
+            return obj is Employee && ((Employee)obj).Id == Id;
+        }
+
+        public override int GetHashCode()
+        {
+            return base.GetHashCode();
+        }
+
+        public Employee Clone()
+        {
+            return new Employee()
+            {
+                HasChildren = HasChildren,
+                HireDate = HireDate,
+                Id = Id,
+                IsDriver = IsDriver,
+                Name = Name,
+                Notes = Notes,
+                ParentId = ParentId,
+                Salary = Salary
+            };
+        }
+    }
+
+    #region Data Service
+
+    public class EmployeeService
+    {
+        private List<Employee> Items { get; set; } = new();
+
+        private readonly int TreeLevelCount;
+        private readonly int RootItemCount;
+        private readonly int ChildItemCount;
+
+        private int LastId { get; set; }
+        private Random Rnd { get; set; } = Random.Shared;
+
+        public async Task<int> Create(Employee createdEmployee, Employee? parentEmployee)
+        {
+            await SimulateAsyncOperation();
+
+            createdEmployee.Id = ++LastId;
+            createdEmployee.ParentId = parentEmployee?.Id;
+
+            Items.Insert(0, createdEmployee);
+
+            if (parentEmployee != null)
+            {
+                parentEmployee.HasChildren = true;
+            }
+
+            return LastId;
+        }
+
+        public async Task<bool> Delete(Employee deletedEmployee)
+        {
+            await SimulateAsyncOperation();
+
+            if (Items.Contains(deletedEmployee))
+            {
+                DeleteChildren(deletedEmployee.Id);
+                Items.Remove(deletedEmployee);
+
+                if (deletedEmployee.ParentId.HasValue && !Items.Any(x => x.ParentId == deletedEmployee.ParentId.Value))
+                {
+                    Items.First(x => x.Id == deletedEmployee.ParentId.Value).HasChildren = false;
+                }
+
+                return true;
+            }
+
+            return false;
+        }
+
+        public async Task<List<Employee>> Read()
+        {
+            await SimulateAsyncOperation();
+
+            return Items;
+        }
+
+        public async Task<DataSourceResult> Read(DataSourceRequest request)
+        {
+            return await Items.ToDataSourceResultAsync(request);
+        }
+
+        public async Task<bool> Update(Employee updatedEmployee)
+        {
+            await SimulateAsyncOperation();
+
+            int originalItemIndex = Items.FindIndex(x => x.Id == updatedEmployee.Id);
+
+            if (originalItemIndex != -1)
+            {
+                Items[originalItemIndex] = updatedEmployee;
+                return true;
+            }
+
+            return false;
+        }
+
+        private async Task SimulateAsyncOperation()
+        {
+            await Task.Delay(100);
+        }
+
+        private void DeleteChildren(int parentId)
+        {
+            List<Employee> children = Items.Where(x => x.ParentId == parentId).ToList();
+
+            foreach (Employee child in children)
+            {
+                DeleteChildren(child.Id);
+            }
+
+            Items.RemoveAll(x => x.ParentId == parentId);
+        }
+
+        private void PopulateChildren(List<Employee> items, int? parentId, int level)
+        {
+            int itemCount = level == 1 ? RootItemCount : ChildItemCount;
+
+            for (int i = 1; i <= itemCount; i++)
+            {
+                int itemId = ++LastId;
+
+                items.Add(new Employee()
+                {
+                    Id = itemId,
+                    ParentId = parentId,
+                    HasChildren = level < TreeLevelCount,
+                    Name = $"Employee Name {itemId}", // {level}-{i}
+                    Notes = $"Multi-line\nnotes {itemId}",
+                    Salary = Rnd.Next(1_000, 10_000) * 1.23m,
+                    HireDate = DateTime.Today.AddDays(-Rnd.Next(365, 3650)),
+                    IsDriver = itemId % 2 == 0
+                });
+
+                if (level < TreeLevelCount)
+                {
+                    PopulateChildren(items, itemId, level + 1);
+                }
+            }
+        }
+
+        public EmployeeService(int treeLevelCount = 3, int rootItemCount = 3, int childItemCount = 2)
+        {
+            TreeLevelCount = treeLevelCount;
+            RootItemCount = rootItemCount;
+            ChildItemCount = childItemCount;
+
+            List<Employee> items = new();
+            PopulateChildren(items, null, 1);
+
+            Items = items;
+        }
+    }
+
+    #endregion Data Service
+}
+````
+
+## See Also
+
+* [TreeList State documentation](slug:treelist-state)
+* [TreeListState API reference](slug:Telerik.Blazor.Components.TreeListState-1)
diff --git a/knowledge-base/upload-files-in-grid.md b/knowledge-base/upload-files-in-grid.md
index 0198f3d2af..7ffe4f9674 100644
--- a/knowledge-base/upload-files-in-grid.md
+++ b/knowledge-base/upload-files-in-grid.md
@@ -39,7 +39,7 @@ How to upload photos and files as an attachment in a Blazor Grid?
 
 Here are the required steps to implement file uploading inside the Telerik Blazor Grid.
 
-1. The Upload occupies more space than a simple textbox. Use [Grid popup editing](slug:components/grid/editing/popup) with a [wider popup edit form](slug:components/grid/editing/popup#customization).
+1. The Upload occupies more space than a simple textbox. Use [Grid popup editing](slug:grid-editing-popup) with a [wider popup edit form](slug:grid-editing-popup#customization).
 1. [Configure an Upload component](slug:upload-overview#creating-blazor-upload) inside a [Grid column `<EditorTemplate>`](slug:grid-templates-editor).
 1. Handle the [`OnUpload` event of the Upload](slug:upload-events#onupload) to send custom information to the Upload controller, for example, information about the Grid data item.
 1. [Implement the Upload controller methods](slug:upload-overview#implement-controller-methods), which receive and delete the uploaded files. File deletion is optional.
@@ -47,7 +47,7 @@ Here are the required steps to implement file uploading inside the Telerik Blazo
 1. The name of the saved file on the server can depend on the Razor UI or on the controller.
     * If the file name depends on the UI, send it to the controller via the `OnUpload` event arguments (`args.RequestData`).
     * If the file name depends on the controller, receive it in the `OnSuccess` event arguments via `args.Request.ResponseText`.
-1. Handle the [Grid `OnUpdate`, `OnCreate` and `OnDelete` events](slug:components/grid/editing/overview#events) to commit changes to the Grid data source. Optionally, delete the respective saved files in `OnDelete`. The example below uses `OnAdd` to provide the `Id` of the new Grid data item, which also affects the uploaded file's name.
+1. Handle the [Grid `OnUpdate`, `OnCreate` and `OnDelete` events](slug:grid-editing-overview#events) to commit changes to the Grid data source. Optionally, delete the respective saved files in `OnDelete`. The example below uses `OnAdd` to provide the `Id` of the new Grid data item, which also affects the uploaded file's name.
 1. Display the uploaded files as images or download links in a [Grid column `<Template>`](slug:grid-templates-column).
 
 
@@ -347,5 +347,5 @@ app.Run();
 
 * [Upload Controller](slug:upload-overview#implement-controller-methods)
 * [Upload Events](slug:upload-events)
-* [Grid Editing](slug:components/grid/editing/overview)
+* [Grid Editing](slug:grid-editing-overview)
 * [Grid Editor Template](slug:grid-templates-editor)
diff --git a/upgrade/breaking-changes/4-0-0.md b/upgrade/breaking-changes/4-0-0.md
index 5acb3c41a7..77cf418db3 100644
--- a/upgrade/breaking-changes/4-0-0.md
+++ b/upgrade/breaking-changes/4-0-0.md
@@ -126,7 +126,7 @@ Removed the `Shape` parameter from:
 
 * [Card Actions `Layout`](slug:card-actions#layout)
 * [Dialog Action `ButtonsLayout`](slug:dialog-action-buttons)
-* [Grid popup edit form `ButtonsLayout`](slug:components/grid/editing/popup#edit-form-customization)
+* [Grid popup edit form `ButtonsLayout`](slug:grid-editing-popup#form-layout)
 * [Scheduler popup edit form `ButtonsLayout`](slug:scheduler-edit-popup-customization#edit-form-customization)
 * [TreeList popup edit form `ButtonsLayout`](slug:treelist-editing-popup#edit-form-customization)
 
diff --git a/upgrade/breaking-changes/7-0-0.md b/upgrade/breaking-changes/7-0-0.md
index 2c980d959a..9b782ba910 100644
--- a/upgrade/breaking-changes/7-0-0.md
+++ b/upgrade/breaking-changes/7-0-0.md
@@ -39,7 +39,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
 
 ## Grid
 
-* Columns with `Visible="false"` are editable by default in popup edit mode. To [disable editing of a hidden column, set `Editable="false"`](slug:components/grid/editing/popup) explicitly.
+* Columns with `Visible="false"` are editable by default in popup edit mode. To [disable editing of a hidden column, set `Editable="false"`](slug:grid-editing-popup) explicitly.
 * The obsolete `AutoFitColumn()` method is removed. [Use `AutoFitColumnAsync()`](slug:components/grid/columns/resize#autofit-columns) instead.
 * The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
 * The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.