Skip to content

Commit 43ba81d

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
docs(treeview):OnDoubleClick and OnContextMenu events (#499)
* docs(treeview):OnDoubleClick and OnContextMenu events * Update components/contextmenu/integration.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/treeview/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/contextmenu-treeview-items.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/treeview/events.md Co-authored-by: Dimo Dimov <[email protected]> * docs(treeview):improve event handler names Co-authored-by: Dimo Dimov <[email protected]>
1 parent 390194b commit 43ba81d

File tree

6 files changed

+533
-41
lines changed

6 files changed

+533
-41
lines changed

‎_contentTemplates/common/event-arguments.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
#rowclick-args
2+
3+
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.
4+
5+
#end
6+
7+
#rowclick-args-example
8+
9+
if (args.EventArgs is KeyboardEventArgs keyboardEventArgs)
10+
{
11+
Console.WriteLine($"The user clicked {keyboardEventArgs.Key} on row {model.Name}");
12+
}
13+
else if (args.EventArgs is MouseEventArgs mouseEventArgs)
14+
{
15+
Console.WriteLine($"The user clicked {mouseEventArgs.ClientX} {mouseEventArgs.ClientY} on row {model.Name}");
16+
}
17+
18+
#end
19+
20+
#rowclick-args-treeview-example
21+
22+
if (args.EventArgs is KeyboardEventArgs keyboardEventArgs)
23+
{
24+
Console.WriteLine($"The user clicked {keyboardEventArgs.Key} on node {item.Text}");
25+
}
26+
else if (args.EventArgs is MouseEventArgs mouseEventArgs)
27+
{
28+
Console.WriteLine($"The user clicked {mouseEventArgs.ClientX} {mouseEventArgs.ClientY} on node {item.Text}");
29+
}
30+
31+
#end

‎_contentTemplates/grid/common-link.md‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,6 @@
33
#end
44

55

6-
#rowclick-args
7-
8-
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.
9-
10-
#end
11-
12-
#rowclick-args-example
13-
14-
if (args.EventArgs is KeyboardEventArgs keyboardEventArgs)
15-
{
16-
Console.WriteLine($"The user clicked {keyboardEventArgs.Key} on row {model.Name}");
17-
}
18-
else if (args.EventArgs is MouseEventArgs mouseEventArgs)
19-
{
20-
Console.WriteLine($"The user clicked {mouseEventArgs.ClientX} {mouseEventArgs.ClientY} on row {model.Name}");
21-
}
22-
23-
#end
24-
25-
266
#conditional-style-row-and-cell-render
277
````CSHTML
288
@* Conditional styling/formatting for a cell and row *@

‎components/contextmenu/integration.md‎

Lines changed: 209 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ This article provides the following two examples:
2727

2828
* [Know The Target And Adjust Items](#know-the-target-and-adjust-items)
2929
* [Context Menu for a Grid Row](#context-menu-for-a-grid-row)
30+
* [Context Menu for a TreeView Node](#context-menu-for-a-treeview-node)
3031

3132
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%}).
3233

@@ -37,11 +38,12 @@ Hooking to your own HTML elements' events lets you determine what to do with the
3738
>caption Use the context menu target and change menu items based on the target data
3839
3940
````CSHTML
40-
@* Get context menu target and alter its items based on it *@
41+
@* Get context menu target and alter its items based on it *@
4142
4243
<TelerikContextMenu Data="@MenuItems" @ref="@TheContextMenu"
43-
TextField="Text" SeparatorField="Separator" IconField="Icon" DisabledField="Disabled"
44-
OnClick="@( (ContextMenuItem itm) => ClickHandler(itm) )">
44+
TextField="Text" SeparatorField="Separator" IconField="Icon"
45+
DisabledField="Disabled"
46+
OnClick="@( (ContextMenuItem itm) => ContextMenuClickHandler(itm) )">
4547
</TelerikContextMenu>
4648
4749
<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
7779
MenuItems[2].Items[0].Disabled = clickedItem.IsSpecial;
7880
}
7981
80-
async Task ClickHandler(ContextMenuItem clickedItem)
82+
async Task ContextMenuClickHandler(ContextMenuItem clickedItem)
8183
{
8284
// handle the command from the context menu by using the stored metadata
8385
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
9294
{
9395
9496
MenuItems = new List<ContextMenuItem>()
95-
{
97+
{
9698
new ContextMenuItem
9799
{
98100
Text = "More Info",
@@ -107,7 +109,7 @@ Hooking to your own HTML elements' events lets you determine what to do with the
107109
{
108110
Text = "Advanced",
109111
Items = new List<ContextMenuItem>()
110-
{
112+
{
111113
new ContextMenuItem
112114
{
113115
Text = "Delete",
@@ -171,8 +173,8 @@ Hooking to your own HTML elements' events lets you determine what to do with the
171173

172174
To integrate the context menu with the Telerik Grid, you need to:
173175

174-
1. Use the grid's `OnRowContextMenu` event to get the current row model and show the menu
175-
2. Use the context menu's `OnClick` event to handle the desired operation
176+
1. Use the grid's [`OnRowContextMenu`]({%slug grid-events%}#onrowcontextmenu) event to get the current row model and show the menu
177+
2. Use the context menu's [`OnClick`]({%slug contextmenu-events%}#onclick) event to handle the desired operation
176178

177179
In this example, the context menu is used to select/deselect items, put an item in edit mode and delete items
178180

@@ -182,7 +184,9 @@ In this example, the context menu is used to select/deselect items, put an item
182184
@using System.Collections.Generic
183185
@using System.Collections.ObjectModel
184186
185-
<TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems" OnClick="@((MenuItem item) => OnItemClick(item))"></TelerikContextMenu>
187+
<TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems"
188+
OnClick="@((MenuItem item) => ContextMenuClickHandler(item))">
189+
</TelerikContextMenu>
186190
187191
<TelerikGrid Data="@GridData" @ref="@GridRef"
188192
EditMode="@GridEditMode.Inline"
@@ -249,7 +253,7 @@ In this example, the context menu is used to select/deselect items, put an item
249253
}
250254
251255
// sample handling of the context menu click
252-
async Task OnItemClick(MenuItem item)
256+
async Task ContextMenuClickHandler(MenuItem item)
253257
{
254258
// one way to pass handlers is to use an Action, you don't have to use this
255259
if (item.Action != null)
@@ -293,7 +297,7 @@ In this example, the context menu is used to select/deselect items, put an item
293297
{
294298
// context menu items
295299
MenuItems = new List<MenuItem>()
296-
{
300+
{
297301
new MenuItem(){ Text = "Select", Icon="checkbox-checked", CommandName="ToggleSelect" },
298302
new MenuItem(){ Text = "Edit", Icon="edit", CommandName="BeginEdit" },
299303
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
383387
}
384388
````
385389

390+
## Context Menu for a TreeView Node
391+
392+
To integrate the ContextMenu with the TreeView, you need to:
393+
394+
1. Use the [`OnItemContextMenu`]({%slug treeview-events%}#onitemcontextmenu) event of the TreeView to get the current row model and show the menu
395+
2. Use the context menu's [`OnClick`]({%slug contextmenu-events%}#onclick) event to handle the desired operation
396+
397+
In this example, the context menu is used to select/deselect items and delete items
398+
399+
>caption Use a Context Menu for TreeView nodes
400+
401+
````CSHTML
402+
@* Use the OnItemContextMenu event of the TreeView to show the ContextMenu for its items *@
403+
404+
<TelerikContextMenu Data="@ContextMenuData"
405+
@ref="ContextMenu"
406+
OnClick="@((ContextMenuItem item) => ContextMenuClickHandler(item))">
407+
</TelerikContextMenu>
408+
409+
<TelerikTreeView Data="@FlatData"
410+
OnItemContextMenu="OnItemContextMenuHandler"
411+
SelectionMode="@TreeViewSelectionMode.Multiple"
412+
@bind-SelectedItems="@SelectedItems">
413+
</TelerikTreeView>
414+
415+
@code {
416+
private TelerikContextMenu<ContextMenuItem> ContextMenu { get; set; }
417+
418+
public TreeItem LastClickedItem { get; set; }
419+
420+
public IEnumerable<object> SelectedItems { get; set; } = new List<object>();
421+
422+
public List<TreeItem> FlatData { get; set; }
423+
424+
public List<ContextMenuItem> ContextMenuData { get; set; }
425+
426+
async Task OnItemContextMenuHandler(TreeViewItemContextMenuEventArgs args)
427+
{
428+
LastClickedItem = args.Item as TreeItem;
429+
430+
if (args.EventArgs is MouseEventArgs mouseEventArgs)
431+
{
432+
await ContextMenu.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY);
433+
}
434+
}
435+
436+
private void ContextMenuClickHandler(ContextMenuItem item)
437+
{
438+
439+
// Use local code to perform a task such as put select/deselect a node or delete it
440+
switch (item.CommandName)
441+
{
442+
case "ToggleSelect":
443+
var selItems = SelectedItems.ToList();
444+
if (SelectedItems.Contains(LastClickedItem))
445+
{
446+
selItems.Remove(LastClickedItem);
447+
}
448+
else
449+
{
450+
selItems.Add(LastClickedItem);
451+
}
452+
SelectedItems = selItems;
453+
SelectedItems = new List<object>(SelectedItems);
454+
break;
455+
456+
case "InvokeDelete":
457+
FlatData.Remove(LastClickedItem);
458+
FlatData = new List<TreeItem>(FlatData);
459+
break;
460+
default:
461+
break;
462+
}
463+
LastClickedItem = null; // clean up
464+
}
465+
466+
// sample data
467+
468+
public class ContextMenuItem
469+
{
470+
public string Text { get; set; }
471+
public string Icon { get; set; }
472+
public bool Separator { get; set; }
473+
public string CommandName { get; set; }
474+
}
475+
476+
public class TreeItem
477+
{
478+
public int Id { get; set; }
479+
public string Text { get; set; }
480+
public int? ParentId { get; set; }
481+
public bool HasChildren { get; set; }
482+
public string Icon { get; set; }
483+
public bool Expanded { get; set; }
484+
}
485+
486+
protected override void OnInitialized()
487+
{
488+
LoadFlatData();
489+
490+
ContextMenuData = new List<ContextMenuItem>()
491+
{
492+
new ContextMenuItem
493+
{
494+
Text = "Select",
495+
Icon = "checkbox-checked",
496+
CommandName = "ToggleSelect"
497+
},
498+
new ContextMenuItem
499+
{
500+
Separator = true
501+
},
502+
new ContextMenuItem
503+
{
504+
Text = "Delete",
505+
Icon = "delete",
506+
CommandName = "InvokeDelete"
507+
}
508+
};
509+
}
510+
511+
private void LoadFlatData()
512+
{
513+
List<TreeItem>
514+
items = new List<TreeItem>
515+
();
516+
517+
items.Add(new TreeItem()
518+
{
519+
Id = 1,
520+
Text = "Project",
521+
ParentId = null,
522+
HasChildren = true,
523+
Icon = "folder",
524+
Expanded = true
525+
});
526+
527+
items.Add(new TreeItem()
528+
{
529+
Id = 2,
530+
Text = "Design",
531+
ParentId = 1,
532+
HasChildren = true,
533+
Icon = "brush",
534+
Expanded = true
535+
});
536+
items.Add(new TreeItem()
537+
{
538+
Id = 3,
539+
Text = "Implementation",
540+
ParentId = 1,
541+
HasChildren = true,
542+
Icon = "folder",
543+
Expanded = true
544+
});
545+
546+
items.Add(new TreeItem()
547+
{
548+
Id = 4,
549+
Text = "site.psd",
550+
ParentId = 2,
551+
HasChildren = false,
552+
Icon = "psd",
553+
Expanded = true
554+
});
555+
items.Add(new TreeItem()
556+
{
557+
Id = 5,
558+
Text = "index.js",
559+
ParentId = 3,
560+
HasChildren = false,
561+
Icon = "js"
562+
});
563+
items.Add(new TreeItem()
564+
{
565+
Id = 6,
566+
Text = "index.html",
567+
ParentId = 3,
568+
HasChildren = false,
569+
Icon = "html"
570+
});
571+
items.Add(new TreeItem()
572+
{
573+
Id = 7,
574+
Text = "styles.css",
575+
ParentId = 3,
576+
HasChildren = false,
577+
Icon = "css"
578+
});
579+
580+
FlatData = items;
581+
}
582+
}
583+
````
386584

387585
## See Also
388586

0 commit comments

Comments
 (0)