docs(treeview): update the rename node kb

knowledge-base/treeview-rename-node.md

@@ -1,11 +1,11 @@
 ---
 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
+tags: edit, rename, tree, treeview, node, item
 ticketid: 1525532
 res_type: kb
 ---
@@ -22,11 +22,184 @@ res_type: kb
 
 
 ## Description
-Is there any way I can edit the node text within a Blazor TreeView? 
+This KB article answers the following question:
+ - Is there any way I can edit the node text within a Blazor TreeView? 
 
-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 define the desired UI and UX for editing and how the node text will render. For example a button to initiate editing, a TextBox to modify the name of the node, a button to save the changes.
 
-https://github.com/telerik/blazor-ui/tree/master/treeview/rename-node
+````CSHTML
+<TelerikTreeView Data="@FlatData">
+    <TreeViewBindings>
+        <TreeViewBinding>
+            <ItemTemplate>
+                @{
+                    Item = context as TreeItem;
+
+                    if (Item.Icon != null)
+                    {
+                        <TelerikSvgIcon Icon="@Item.Icon"></TelerikSvgIcon>
+                    }
+                    @if (!IsEditing)
+                    {
+                        <span style="margin-right: 1em;">@Item.Text</span>
+                        <TelerikButton Icon="SvgIcon.Pencil" OnClick="@Edit" FillMode="flat"></TelerikButton>
+                    }
+                    else
+                    {
+                        <span @onclick:stopPropagation="true">
+                            @* Stop the treenode from taking focus when you click in the textbox *@
+                            <TelerikTextBox @bind-Value="@Item.Text" @ref="@TextBoxRef"></TelerikTextBox>
+                        </span>
+                        <TelerikButton Icon="SvgIcon.Save" OnClick="@Save" FillMode="flat"></TelerikButton>
+                    }
+                }
+            </ItemTemplate>
+        </TreeViewBinding>
+    </TreeViewBindings>
+</TelerikTreeView>
+
+@code {
+    private TelerikTextBox TextBoxRef { get; set; }
+
+    private List<TreeItem> FlatData { 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<TreeItem> items = new List<TreeItem>();
+
+        public async Task<List<TreeItem>> GetData()
+        {
+            EnsureData();
+            return await Task.FromResult(new List<TreeItem>(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<TreeItem>();
+
+            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; }
+    }
+}
+````