diff --git a/knowledge-base/treeview-rename-node.md b/knowledge-base/treeview-rename-node.md
index c6b19d8b9..98cdf7f30 100644
--- a/knowledge-base/treeview-rename-node.md
+++ b/knowledge-base/treeview-rename-node.md
@@ -1,12 +1,12 @@
---
title: How to Rename a TreeView Node
-description: How to edit the name (text) of a treeview node
+description: Learn how to edit the name (text) of a Treeview node and explore the example that demonstrates a possible approach with an ItemTemplate.
type: how-to
-page_title: How to rename a TreeView node?
+page_title: How to Rename a TreeView Node?
slug: treeview-kb-rename-node
position:
-tags: edit, rename, tree, treeview, note, item
-ticketid: 1525532
+tags: telerik, treeview, tree, edit, template
+ticketid: 1525532, 1540469, 1629878, 1602035
res_type: kb
---
@@ -22,11 +22,190 @@ res_type: kb
## Description
-Is there any way I can edit the node text within a Blazor TreeView?
+This KB article answers the following questions:
+ - Is there any way I can edit the node text within a Blazor TreeView?
+ - How can I let the user rename a node?
-I want to let the user rename a node.
## Solution
-You can use the `ItemTemplate` to define how the node text will render and the desired UI and UX for editing. Here is a sample project that demonstrates a possible implementation. It uses a custom component `EditableTreeNode` that renders buttons and a textbox to update the TreeView item.
+Use the `ItemTemplate` to determine the node text's rendering and customize the editing UI. For example, you can define a button that initiates editing, a TextBox that modifies the node's name, and another button that saves the changes.
-https://github.com/telerik/blazor-ui/tree/master/treeview/rename-node
+````CSHTML
+
+
+
+
+ @{
+ Item = context as TreeItem;
+
+ if (Item.Icon != null)
+ {
+
+ }
+ @if (!IsEditing)
+ {
+ @Item.Text
+
+ }
+ else
+ {
+
+ @* Stop the treenode from taking focus when you click in the textbox *@
+
+
+
+ }
+ }
+
+
+
+
+
+@code {
+ private List FlatData { get; set; }
+
+ private TelerikTextBox TextBoxRef { get; set; }
+
+ private TreeItem Item { get; set; }
+
+ private TreeDataService DataService = new TreeDataService();
+
+ private bool IsEditing { get; set; }
+
+ private async Task Edit()
+ {
+ IsEditing = true;
+
+ //give rendering time to put the markup in and populate the reference
+ await InvokeAsync(StateHasChanged);
+ await Task.Delay(20);
+
+ if (TextBoxRef != null)
+ {
+ await TextBoxRef.FocusAsync();
+ }
+ }
+
+ private async Task Save()
+ {
+ IsEditing = false;
+ await DataService.UpdateNode(Item);
+ }
+
+ protected override async Task OnInitializedAsync()
+ {
+ FlatData = await DataService.GetData();
+ }
+
+ public class TreeDataService
+ {
+ List items = new List();
+
+ public async Task> GetData()
+ {
+ EnsureData();
+ return await Task.FromResult(new List(items));
+ }
+
+ public async Task UpdateNode(TreeItem itemToUpdate)
+ {
+ int itmIndex = items.FindIndex(itm => itm.Id == itemToUpdate.Id);
+ if (itmIndex > -1)
+ {
+ items[itmIndex] = itemToUpdate;
+ }
+ }
+
+ private void EnsureData()
+ {
+ if (items == null || !items.Any())
+ {
+ GenerateData();
+ }
+ }
+
+ private void GenerateData()
+ {
+ items = new List();
+
+ items.Add(new TreeItem()
+ {
+ Id = 1,
+ Text = "Project",
+ ParentId = null,
+ HasChildren = true,
+ Icon = SvgIcon.Folder,
+ Expanded = true
+ });
+
+ items.Add(new TreeItem()
+ {
+ Id = 2,
+ Text = "Design",
+ ParentId = 1,
+ HasChildren = true,
+ Icon = SvgIcon.Brush,
+ Expanded = true
+ });
+ items.Add(new TreeItem()
+ {
+ Id = 3,
+ Text = "Implementation",
+ ParentId = 1,
+ HasChildren = true,
+ Icon = SvgIcon.Folder,
+ Expanded = true
+ });
+
+ items.Add(new TreeItem()
+ {
+ Id = 4,
+ Text = "site.psd",
+ ParentId = 2,
+ HasChildren = false,
+ Icon = SvgIcon.FilePsd,
+ Expanded = true
+ });
+ items.Add(new TreeItem()
+ {
+ Id = 5,
+ Text = "index.js",
+ ParentId = 3,
+ HasChildren = false,
+ Icon = SvgIcon.Js
+ });
+ items.Add(new TreeItem()
+ {
+ Id = 6,
+ Text = "index.html",
+ ParentId = 3,
+ HasChildren = false,
+ Icon = SvgIcon.Html5
+ });
+ items.Add(new TreeItem()
+ {
+ Id = 7,
+ Text = "styles.css",
+ ParentId = 3,
+ HasChildren = false,
+ Icon = SvgIcon.Css
+ });
+ }
+ }
+
+ public class TreeItem
+ {
+ public int Id { get; set; }
+ public string Text { get; set; }
+ public int? ParentId { get; set; }
+ public bool HasChildren { get; set; }
+ public ISvgIcon Icon { get; set; }
+ public bool Expanded { get; set; }
+ }
+}
+````
+
+
+## See Also
+
+* [TreeView Item Template]({%slug components/treeview/templates%})
\ No newline at end of file