docs(treeview):OnDoubleClick and OnContextMenu events

_contentTemplates/common/event-arguments.md

@@ -0,0 +1,31 @@
+#rowclick-args
+
+The event arguments expose an `EventArgs` property. It maps to `MouseEventArgs` or `KeyboardEventArgs` depending on the user's action (clicking the row with the mouse/tapping it on a touch device, or pressing `Enter` when the row is focused). You can use the event arguments to determine the keyboard key or the position of the mouse cursor when the user took an action.
+
+#end 
+
+#rowclick-args-example
+
+        if (args.EventArgs is KeyboardEventArgs keyboardEventArgs)
+        {
+            Console.WriteLine($"The user clicked {keyboardEventArgs.Key} on row {model.Name}");
+        }
+        else if (args.EventArgs is MouseEventArgs mouseEventArgs)
+        {
+            Console.WriteLine($"The user clicked {mouseEventArgs.ClientX} {mouseEventArgs.ClientY} on row {model.Name}");
+        }
+
+#end
+
+#rowclick-args-treeview-example
+
+        if (args.EventArgs is KeyboardEventArgs keyboardEventArgs)
+        {
+            Console.WriteLine($"The user clicked {keyboardEventArgs.Key} on node {item.Text}");
+        }
+        else if (args.EventArgs is MouseEventArgs mouseEventArgs)
+        {
+            Console.WriteLine($"The user clicked {mouseEventArgs.ClientX} {mouseEventArgs.ClientY} on node {item.Text}");
+        }
+
+#end

_contentTemplates/grid/common-link.md

@@ -3,26 +3,6 @@
 #end
 
 
-#rowclick-args
-
-The `GridRowClickEventArgs` class exposes an `EventArgs` property. It maps to `MouseEventArgs` or `KeyboardEventArgs` depending on the user's action (clicking the row with the mouse/tapping it on a touch device, or pressing `Enter` when the row is focused). You can use the event arguments to determine the keyboard key or the position of the mouse cursor when the user took an action.
-
-#end
-
-#rowclick-args-example
-
-        if (args.EventArgs is KeyboardEventArgs keyboardEventArgs)
-        {
-            Console.WriteLine($"The user clicked {keyboardEventArgs.Key} on row {model.Name}");
-        }
-        else if (args.EventArgs is MouseEventArgs mouseEventArgs)
-        {
-            Console.WriteLine($"The user clicked {mouseEventArgs.ClientX} {mouseEventArgs.ClientY} on row {model.Name}");
-        }
-
-#end
-
-
 #conditional-style-row-and-cell-render
 ````CSHTML
 @* Conditional styling/formatting for a cell and row *@

components/contextmenu/integration.md

@@ -27,6 +27,7 @@ This article provides the following two examples:
 
 * [Know The Target And Adjust Items](#know-the-target-and-adjust-items)
 * [Context Menu for a Grid Row](#context-menu-for-a-grid-row)
+* [Context Menu for a TreeView Node](#context-menu-for-a-treeview-node)
 
 You can apply the approach of hooking to your own events to show the context menu in other scenarios as well. For example, you can [add a context menu for your treeview nodes]({%slug contextmenu-kb-treeview-item%}).
 
@@ -37,11 +38,12 @@ Hooking to your own HTML elements' events lets you determine what to do with the
 >caption Use the context menu target and change menu items based on the target data
 
 ````CSHTML
-@* Get context menu target and alter its items based on it *@ 
+@* Get context menu target and alter its items based on it *@
 
 <TelerikContextMenu Data="@MenuItems" @ref="@TheContextMenu"
-                    TextField="Text" SeparatorField="Separator" IconField="Icon" DisabledField="Disabled"
-                    OnClick="@( (ContextMenuItem itm) => ClickHandler(itm) )">
+                    TextField="Text" SeparatorField="Separator" IconField="Icon"
+                    DisabledField="Disabled"
+                    OnClick="@( (ContextMenuItem itm) => ContextMenuClickHandler(itm) )">
 </TelerikContextMenu>
 
 <TelerikListView Data="@ListViewData" Width="700px" Pageable="true">
@@ -77,7 +79,7 @@ Hooking to your own HTML elements' events lets you determine what to do with the
         MenuItems[2].Items[0].Disabled = clickedItem.IsSpecial;
     }
 
-    async Task ClickHandler(ContextMenuItem clickedItem)
+    async Task ContextMenuClickHandler(ContextMenuItem clickedItem)
     {
         // handle the command from the context menu by using the stored metadata
         if (!string.IsNullOrEmpty(clickedItem.CommandName) && LastClickedItem != null)
@@ -92,7 +94,7 @@ Hooking to your own HTML elements' events lets you determine what to do with the
     {
 
         MenuItems = new List<ContextMenuItem>()
-        { 
+    {
             new ContextMenuItem
             {
                 Text = "More Info",
@@ -107,7 +109,7 @@ Hooking to your own HTML elements' events lets you determine what to do with the
             {
                 Text = "Advanced",
                 Items = new List<ContextMenuItem>()
-                {
+            {
                     new ContextMenuItem
                     {
                         Text = "Delete",
@@ -171,8 +173,8 @@ Hooking to your own HTML elements' events lets you determine what to do with the
 
 To integrate the context menu with the Telerik Grid, you need to:
 
-1. Use the grid's `OnRowContextMenu` event to get the current row model and show the menu
-2. Use the context menu's `OnClick` event to handle the desired operation
+1. Use the grid's [`OnRowContextMenu`]({%slug grid-events%}#onrowcontextmenu) event to get the current row model and show the menu
+2. Use the context menu's [`OnClick`]({%slug contextmenu-events%}#onclick) event to handle the desired operation
 
 In this example, the context menu is used to select/deselect items, put an item in edit mode and delete items
 
@@ -182,7 +184,9 @@ In this example, the context menu is used to select/deselect items, put an item
 @using System.Collections.Generic
 @using System.Collections.ObjectModel
 
-<TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems" OnClick="@((MenuItem item) => OnItemClick(item))"></TelerikContextMenu>
+<TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems" 
+                    OnClick="@((MenuItem item) => ContextMenuClickHandler(item))">
+</TelerikContextMenu>
 
 <TelerikGrid Data="@GridData" @ref="@GridRef"
              EditMode="@GridEditMode.Inline"
@@ -249,7 +253,7 @@ In this example, the context menu is used to select/deselect items, put an item
     }
 
     // sample handling of the context menu click
-    async Task OnItemClick(MenuItem item)
+    async Task ContextMenuClickHandler(MenuItem item)
     {
         // one way to pass handlers is to use an Action, you don't have to use this
         if (item.Action != null)
@@ -293,7 +297,7 @@ In this example, the context menu is used to select/deselect items, put an item
     {
         // context menu items
         MenuItems = new List<MenuItem>()
-        {
+    {
             new MenuItem(){ Text = "Select", Icon="checkbox-checked", CommandName="ToggleSelect" },
             new MenuItem(){ Text = "Edit", Icon="edit", CommandName="BeginEdit" },
             new MenuItem(){ Text = "Delete", Icon="delete", Action = DeleteItem }
@@ -383,6 +387,200 @@ In this example, the context menu is used to select/deselect items, put an item
 }
 ````
 
+## Context Menu for a TreeView Node
+
+To integrate the ContextMenu with the TreeView, you need to:
+
+1. Use the [`OnItemContextMenu`]({%slug treeview-events%}#onitemcontextmenu) event of the TreeView to get the current row model and show the menu
+2. Use the context menu's [`OnClick`]({%slug contextmenu-events%}#onclick) event to handle the desired operation
+
+In this example, the context menu is used to select/deselect items and delete items
+
+>caption Use a Context Menu for TreeView nodes
+
+````CSHTML
+@* Use the OnItemContextMenu event of the TreeView to show the ContextMenu for its items *@
+
+<TelerikContextMenu Data="@ContextMenuData"
+                    @ref="ContextMenu"
+                    OnClick="@((ContextMenuItem item) => ContextMenuClickHandler(item))">
+</TelerikContextMenu>
+
+<TelerikTreeView Data="@FlatData"
+                 OnItemContextMenu="OnItemContextMenuHandler"
+                 SelectionMode="@TreeViewSelectionMode.Multiple"
+                 @bind-SelectedItems="@SelectedItems">
+</TelerikTreeView>
+
+@code {
+    private TelerikContextMenu<ContextMenuItem> ContextMenu { get; set; }
+
+    public TreeItem LastClickedItem { get; set; }
+
+    public IEnumerable<object> SelectedItems { get; set; } = new List<object>();
+
+    public List<TreeItem> FlatData { get; set; }
+
+    public List<ContextMenuItem> ContextMenuData { get; set; }
+
+    async Task OnItemContextMenuHandler(TreeViewItemContextMenuEventArgs args)
+    {
+        LastClickedItem = args.Item as TreeItem;
+
+        if (args.EventArgs is MouseEventArgs mouseEventArgs)
+        {
+            await ContextMenu.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY);
+        }
+    }
+
+    private void ContextMenuClickHandler(ContextMenuItem item)
+    {
+
+        // Use local code to perform a task such as put select/deselect a node or delete it
+        switch (item.CommandName)
+        {
+            case "ToggleSelect":
+                var selItems = SelectedItems.ToList();
+                if (SelectedItems.Contains(LastClickedItem))
+                {
+                    selItems.Remove(LastClickedItem);
+                }
+                else
+                {
+                    selItems.Add(LastClickedItem);
+                }
+                SelectedItems = selItems;
+                SelectedItems = new List<object>(SelectedItems);
+                break;
+
+            case "InvokeDelete":
+                FlatData.Remove(LastClickedItem);
+                FlatData = new List<TreeItem>(FlatData);
+                break;
+            default:
+                break;
+        }
+        LastClickedItem = null; // clean up
+    }
+
+    // sample data
+
+    public class ContextMenuItem
+    {
+        public string Text { get; set; }
+        public string Icon { get; set; }
+        public bool Separator { get; set; }
+        public string CommandName { get; set; }
+    }
+
+    public class TreeItem
+    {
+        public int Id { get; set; }
+        public string Text { get; set; }
+        public int? ParentId { get; set; }
+        public bool HasChildren { get; set; }
+        public string Icon { get; set; }
+        public bool Expanded { get; set; }
+    }
+
+    protected override void OnInitialized()
+    {
+        LoadFlatData();
+
+        ContextMenuData = new List<ContextMenuItem>()
+    {
+            new ContextMenuItem
+            {
+                Text = "Select",
+                Icon = "checkbox-checked",
+                CommandName = "ToggleSelect"
+            },
+            new ContextMenuItem
+            {
+                Separator = true
+            },
+            new ContextMenuItem
+            {
+                Text = "Delete",
+                Icon = "delete",
+                CommandName = "InvokeDelete"
+            }
+        };
+    }
+
+    private void LoadFlatData()
+    {
+        List<TreeItem>
+            items = new List<TreeItem>
+                ();
+
+        items.Add(new TreeItem()
+        {
+            Id = 1,
+            Text = "Project",
+            ParentId = null,
+            HasChildren = true,
+            Icon = "folder",
+            Expanded = true
+        });
+
+        items.Add(new TreeItem()
+        {
+            Id = 2,
+            Text = "Design",
+            ParentId = 1,
+            HasChildren = true,
+            Icon = "brush",
+            Expanded = true
+        });
+        items.Add(new TreeItem()
+        {
+            Id = 3,
+            Text = "Implementation",
+            ParentId = 1,
+            HasChildren = true,
+            Icon = "folder",
+            Expanded = true
+        });
+
+        items.Add(new TreeItem()
+        {
+            Id = 4,
+            Text = "site.psd",
+            ParentId = 2,
+            HasChildren = false,
+            Icon = "psd",
+            Expanded = true
+        });
+        items.Add(new TreeItem()
+        {
+            Id = 5,
+            Text = "index.js",
+            ParentId = 3,
+            HasChildren = false,
+            Icon = "js"
+        });
+        items.Add(new TreeItem()
+        {
+            Id = 6,
+            Text = "index.html",
+            ParentId = 3,
+            HasChildren = false,
+            Icon = "html"
+        });
+        items.Add(new TreeItem()
+        {
+            Id = 7,
+            Text = "styles.css",
+            ParentId = 3,
+            HasChildren = false,
+            Icon = "css"
+        });
+
+        FlatData = items;
+    }
+}
+````
 
 ## See Also