This is a migrated thread and some comments may be shown as answers.

Right-click menu (ContextMenu) on tree items

20 Answers 661 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

20 Answers, 1 is accepted

answered on 17 Feb 2011, 10:07 PM

My pleasure.
I am developing using mvc. I used the context menu plugin from this site : http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/. Download it and include it in your page:
Give this a go and let me know how it goes or where you need me to clarify mate.

<%= Html.Telerik().TreeView()
   .Name("TreeView")
   .ClientEvents(events => events
   .OnDataBinding("onDataBinding").OnSelect("onSelect")
   )
   %>

Script:
function onDataBinding(e) {
   var treeview = $('#TreeView').data('tTreeView');
   var jsonObject;
   jsonObject = <%= Model.type%>;
   treeview.bindTo(jsonObject);

   // Show menu when a list item is clicked
   $(".t-treeview span.t-in").contextMenu({
   menu: 'myMenu'
   }, function (action, el, pos) {

   switch(action)
   {
   case 'create':
   $("#divnewfolder").dialog( "open" );
   break;
   case 'edit':
   $("#divrenamefolder").dialog( "open" );
   break;
   case 'delete':
   $("#divdelete").dialog( "open" );
   break;
   }
   });

   $(".t-treeview span.t-in").mousedown(function(e){
//i check if it is a right click
   if (e.button == 2) {
   $('#hfrightclick').val($(this).siblings('input.t-input').val());
   }
   });
   }

answered on 23 Mar 2011, 12:32 AM

Thanks everyone for the discussion. I am using the plugin at http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/#download
The following code seems to be working for me: Check the OnDataBound(). Also check-out the lat reply at this forum for positioning the context-menu. http://plugins.jquery.com/content/contextmenu-pops-wrong-place

     <%= Html.Telerik().TreeView()
   .Name("GroupsTreeView")
   .DragAndDrop(true)
   .ClientEvents(events => events
   .OnDataBound("onDataBound"))
   .BindTo(Model, (item, group) =>
   {
   // bind initial data - can be omitted if there is none
   item.Text = group.GroupName;
   item.Value = group.GroupID.ToString();
   item.LoadOnDemand = true;
   })

   .DataBinding(dataBinding => dataBinding
   .Ajax().Select("AjaxLoading", "Groups")
   )
   %>
</div>
<ul id="myMenu" class="contextMenu">
   <li class="edit"><a href="#edit">Edit</a> </li>
   <li class="cut separator"><a href="#cut">Cut</a> </li>
   <li class="copy"><a href="#copy">Copy</a> </li>
   <li class="paste"><a href="#paste">Paste</a> </li>
   <li class="delete"><a href="#delete">Delete</a> </li>
   <li class="quit separator"><a href="#quit">Quit</a> </li>
</ul>

<script type="text/javascript">
function onDataBound(e) {
   BindTreeViewContextMenu();
   }

function BindTreeViewContextMenu() {
   // Show menu when a list item is clicked
   $("#GroupsTreeView .t-in").each(function () {
   $(this).contextMenu({
   menu: 'myMenu'
   }, function (action, el, pos) {
   alert(
   'Action: ' + action + '\n\n' +
   'Element text: ' + $(el).text() + '\n\n' +
   'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' +
   'X: ' + pos.docX + ' Y: ' + pos.docY + ' (relative to document)'
   );
   });
   });

   }

</script>

answered on 29 Mar 2011, 07:04 PM

I am using this:  var currentValueId = $(el).next('.t-input').val();

$("#TreeView .t-in").each(function () {
   $(this).contextMenu({
   menu: 'myMenu'
   }, function (action, el, pos) {
   var currentValueId = $(el).next('.t-input').val();
   switch (action) {
   case 'add': OnAddWindowLoad(currentGroupId); break;
   case 'edit': OnEditWindowLoad(currentGroupId); break;
      ....etc


   }
   });
   });

hth,

answered on 26 Jan 2012, 07:27 PM

I am attempting to use the .val() method to pull the next value but it keeps coming up for me as "undefined". Can you help me figure out what I am missing?

The generated HTML looks like this:
<div class="t-widget t-treeview t-reset" id="OutlineTree"><ul class="t-group t-treeview-lines"><li class="t-item t-first"><div class="t-top"><span class="t-in"><img alt="Included in Designator" class="t-image" src="/ReviewContentManager/Content/Common/Images/Icons/accept.png" style="width: 16px; height: 16px;" />
Z Z Top
<button class="grid-row-action-button right" name="rowActionMenu_7c09bfbf-7de8-4320-aae4-f6814efcba51" style="display: none" onclick="Grid_showRowAction(event, '7c09bfbf-7de8-4320-aae4-f6814efcba51');">▼</button></span><input class="t-input" name="itemValue" type="hidden" value="7c09bfbf-7de8-4320-aae4-f6814efcba51" /></div>

So the hidden element is there. My function is as follows where currentValueId is coming up undefined:
function tv_OnSelect(e) {
    var currentValueId = $(e).next('.t-input').val();
    jQuery('[id^=rowActionMenu], .grid-row-action-button').hide();
    document.getElementsByName('rowActionMenu_' + currentValueId).style.visibility = "visible";
}

Thanks!

answered on 09 Feb 2012, 10:52 PM

The context menu as suggested works perfectly.
Except now, my "drag & drop" all of a sudden stopped working. it's the $(document).ready.... that kills my "drag & drop".

When I don't do the $(document).ready part my treeview is rendered as
<div class="t-widget t-treeview t-reset" id="TreeView" jQuery164022326143430375406="2">

when I do use $(document).ready, My tree is rendered as
<div class="t-widget t-treeview t-reset" id="TreeView" jQuery16406377481044573372="82">

I wonder what's going on with that? any suggestions?

here's a simplified version of my code:

@(Html.Telerik().TreeView()
                .Name("TreeView")
                .DragAndDrop(settings => settings.Enabled(true))
                .ClientEvents(e=>e
                                .OnSelect("trvItem_Selected")
                                .OnNodeDrop("HandleNodeDrop")
                )
                .BindTo
                (
                    Model.RootJobs.Values, mappings =>
                    {
                        mappings.For<Monitor>(binding => binding
                                                                    .ItemDataBound((item, job) =>
                                                                    {
                                                                        item.Text = job.JobName;
                                                                        item.HtmlAttributes.Add("id", job.JobId);
                                                                        item.ImageHtmlAttributes.Add("id", job.JobId);
                                                                    })
                                                                    .Children(childJob => childJob.Children));
                    }
                )
)

<ul id="myMenu" class="contextMenu">
<li class="add"><a href="#add">Add New</a></li>
<li class="edit"><a href="#edit">Edit</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
</ul>

@using (Ajax.BeginForm("AddValidator", "Monitor", new AjaxOptions(){ HttpMethod = "Post", InsertionMode = InsertionMode.Replace }, new { id = "frmAddJobValidator"}))
{
    <input type="hidden" name='parentJobId' value='' />
}

@using (Ajax.BeginForm("EditValidator", "Monitor", new AjaxOptions(){ HttpMethod = "Post", InsertionMode = InsertionMode.Replace }, new { id = "frmEditJobValidator"}))
{
    <input type="hidden" name='jobId' value='' />
}

@using (Ajax.BeginForm("DeleteValidator", "Monitor", new AjaxOptions(){ HttpMethod = "Post", InsertionMode = InsertionMode.Replace }, new { id = "frmDeleteValidator" }))
{
    <input type="hidden" name='jobId' value='' />
}

@using (Ajax.BeginForm("DragAndDrop", "Monitor", new AjaxOptions(){ HttpMethod = "Post",InsertionMode = InsertionMode.Replace }, new{ id = "frmDragAndDrop" }))
{
    <input type="hidden" name='draggedItemId' value='' />
    <input type="hidden" name='targetItemId' value='' />
}

</script>

answered on 12 Feb 2012, 11:15 AM

found a solution here to make draggable and context work nicely together
http://stackoverflow.com/questions/6788566/jquery-context-menu-clashes-with-jquery-draggable

you should change the context menu source like this:

jQuery(this).mousedown( function(e) {
    var evt = e;
    if (e.button != 2) return; //Added to make this compatible with draggable
    evt.stopPropagation();
    jQuery(this).mouseup( function(e) {
        e.stopPropagation();
        var srcElement = jQuery(this);