Customizing RadTreeView: adding custom context menu trigger
Background:
I have Telerik's RadTreeView control used on a page, it has a context menu for every node triggered by the right click, recently a change request arrived saying that it's not obvious for user that there a context menu there (that right click on node actually does something), so let's add also a custom trigger, let it appear when when user hovers node item and when clicked (left clicked) let it show the context menu for node item.
<img/> tag was chosen as trigger with "gear" as source image. Also when item is too long and RadTreeView has horizontal scroll (node's text doesn't fit and tree control's size is fixed) I needed to "gear" in rightmost position over node's text, if item's text is short enough, then increase it's size and show "gear" nearby, etc misc usability issues.
Solution:
I've implemented solution by handling client side events from rad controls. Solution has 2 pages: RadTreeViewAbsolute and RadTreeViewRelative which show how to accomplish the task using absolute and relative positioning. Note that for both types of positioning slightly different approaches were used:
- absolute looks great, but a bit heavy, cause I also attach 'scroll' event handle to parent container that has vertical scroll (otherwise when item is hovered and user scrolls with the mouse wheel "gear" element will remain in old position, so I hide it in this event).
- relative on the other hand just plays with left margin value (and additional values from margins and paddings of base dom structure of node item);
Pages use different css classes, main difference is treeGear class.
If your image will be of a different size adjust <img/> tag in <NodeTemplate>, treeGear class for corresponding positioning (to align vertically) and these two:
sender.PGC_imageSize = 13; <-- set image width value here
sender.PGC_extraMarginBeforeImage = 5; <-- set a value which is a margin between node item's text and "gear" element.
Note that when you click on "gear" highlighting of node item may disappear. This will happen if EnableDragAndDrop is not set or false. I haven't thought how to solve that because in my use case I have EnableDragAndDrop="true", but I will ask Telerik support about possible solution.
Note also that when <NodeTemplate> is used some events are triggered more than once, I observed that with mouse over and mouse out events, this is why (most likely) in relative positioning sometimes when "gear" element is hovered it may slightly reposition itself :)
Conclusion:
Choose yourself which approach fits better to your solution.
Source code: PGCGearsForTreeView.zip
Screenshot: RadTreeView with gears