Do some element action on right click

Question

i'm trying for few days to find solution on internet to make right click same as left but with some additional functions.

When i click right click and mouse is pointed on some element, i need to select pointed item like on leftclick event from TreeView and $('custom-menu').prop('display','block');

There is code for opening div on left click:

function showContextMenu(event) {
    event.preventDefault;
    var contextMenu = document.getElementById('custom-menuDir');

    $("body").bind('click', function() {
        $("#custom-menuDir").hide();
    });

    contextMenu.style.display = 'block';
    contextMenu.style.left = event.clientX + 'px';
    contextMenu.style.top = event.clientY + 'px';
    return false;
}


function listenKeys(event) {
    var keyCode = event.which || event.keyCode;
    if (keyCode == 27) {
        hideContextMenu();
    }
}

function hideContextMenu() {
    var contextMenu = document.getElementById('custom-menuDir');
    contextMenu.style.display = 'none';
}

// This custom-menuAg is some other menu, its not typo error:
function PassingFunction(clicked_id) {

    $("#idOdeljenja").val(clicked_id);

    $.ajax({
        url: "@Url.Action("
        VratiNazivOrgJed ", "
        OrgJedinice ")",
        type: "GET",
        data: {
            'idOdeljenja': clicked_id
        },
        success: function(returnData) {
            var naziv = JSON.parse(returnData);
            $("#nazivOdeljenja").html(naziv);
        }
    });

    $.ajax({
        url: "@Url.Action("
        GetAgOdeljenja ", "
        Ag ")",
        type: "GET",
        data: {
            'idOdeljenja': clicked_id
        },
        success: function(returnData) {
            $("#gridAg").igGrid({
                primaryKey: "AgID",
                dataSource: returnData,
                autoGenerateColumns: false,
                renderCheckboxes: true,
                columns: [
                    {
                        headerText: 'AgID',
                        key: 'AgID',
                        dataType: 'number',
                        allowHiding: true,
                        hidden: true,
                        template: "<p>${AgID}</p>"
                    },
                    {
                        headerText: 'FondID',
                        key: 'FondID',
                        dataType: 'number',
                        allowHiding: true,
                        hidden: true,
                        template: "<p>${FondID}</p>"
                    },
                    {
                        headerText: 'Сигнатура',
                        key: 'AgSignatura',
                        dataType: 'string',
                        width: 200,
                        template: "<p>${AgSignatura}</p>"
                    },
                    {
                        headerText: 'Име',
                        key: 'AgIme',
                        dataType: 'string',
                        width: 200,
                        template: "<p>${AgIme}</p>"
                    },
                    {
                        headerText: 'Садржај',
                        key: 'AgSadrzaj',
                        dataType: 'string',
                        hidden: true,
                        width: 200,
                        template: "<p>${AgSadrzaj}</p>"
                    },
                    {
                        headerText: 'ГодинеОрг-од',
                        key: 'AgGodineOrgJca',
                        dataType: 'string',
                        width: 200,
                        template: "<p>${AgGodineOrgJca}</p>"
                    },
                    {
                        headerText: 'ГодинеОрг-до',
                        key: 'AgGodineOrgJca2',
                        dataType: 'string',
                        width: 200,
                        template: "<p>${AgGodineOrgJca2}</p>"
                    },
                    {
                        headerText: 'ГодинеГрађа-од',
                        key: 'AgGodineGradja',
                        dataType: 'string',
                        width: 200,
                        template: "<p>${AgGodineGradja}</p>"
                    },
                    {
                        headerText: 'ГодинеГрађа-до',
                        key: 'AgGodineGradja2',
                        dataType: 'string',
                        width: 200,
                        template: "<p>${AgGodineGradja2}</p>"
                    },

                    {
                        headerText: 'Очуваност',
                        key: 'OcuvanostID',
                        dataType: 'number',
                        allowHiding: true,
                        hidden: false,
                        template: "<p>${OcuvanostID}</p>"
                    },
                    {
                        headerText: 'Сређеност',
                        key: 'SredjenostID',
                        dataType: 'number',
                        allowHiding: true,
                        hidden: false,
                        template: "<p>${SredjenostID}</p>"
                    },
                    {
                        headerText: 'Конзервација',
                        key: 'AgKonzervacija',
                        dataType: 'bool',
                        width: 100
                    },
                    {
                        headerText: 'Микрофилм',
                        key: 'AgMikrofilm',
                        dataType: 'bool',
                        width: 100
                    },
                    {
                        headerText: 'Допуна',
                        key: 'AgDopuna',
                        dataType: 'bool',
                        width: 100
                    },
                    {
                        headerText: 'Услов објављивања',
                        key: 'UslovObjavljivanjeID',
                        dataType: 'number',
                        allowHiding: true,
                        hidden: false,
                        template: "<p>${UslovObjavljivanjeID}</p>"
                    },
                    {
                        headerText: 'Услов доступност',
                        key: 'UslovDostupnostID',
                        dataType: 'number',
                        allowHiding: true,
                        hidden: false,
                        template: "<p>${UslovDostupnostID}</p>"
                    },
                    {
                        headerText: 'Напомена',
                        key: 'AgNapomena',
                        dataType: 'string',
                        width: 200,
                        template: "<p>${AgNapomena}</p>"
                    },
                ],
                features: [{
                        name: 'Selection',
                        mode: 'row',
                        multipleSelection: true,
                        /*FALSE!*/
                        activation: true
                    },
                    {
                        name: 'Paging',
                        type: 'local',
                        pageSize: 20
                    },
                    {
                        name: 'Sorting',
                        type: 'local'
                    }, {
                        name: 'Filtering',
                        type: 'local',
                        mode: 'simple'
                    }

                ]
            });


            $('#gridAg').delegate('.ui-iggrid-activerow', 'click', function(e) {
                prikazDokumenata();
            });

            $('#gridAg').delegate('.ui-iggrid-activerow', 'dblclick', function(e) {
                IzmenaAgID();
            });

            $('#gridAg').bind("contextmenu", function(e) {
                e.preventDefault();
                var rowIndex = $(e.target).closest('tr').index();
                $('#gridАg').igGridSelection('selectRow', rowIndex);
                $("#custom-menuAg").css({
                    top: e.pageY + "px",
                    left: e.pageX + "px"
                }).show(200);
            });

            $(document).bind('click', function() {
                $("#custom-menuAg").hide();
            });
        },
        error: {}
    });
}

.collapse {
    width: 15px;
    background-image: url('images/ui-icons_454545_256x240.png');
    background-repeat: no-repeat;
    background-position: -36px -17px;
    display: inline-block;
    cursor: pointer;
}
.expand {
    width: 15px;
    background-image: url('images/ui-icons_454545_256x240.png');
    background-repeat: no-repeat;
    background-position: -50px -17px;
    display: inline-block;
    cursor: pointer;
}
.treeview ul {
    font: 14px Arial, Sans-Serif;
    margin: 0px;
    padding-left: 20px;
    list-style: none;
}
.treeview > li > a {
    font-weight: bold;
}
.treeview li {} .treeview li a {
    padding: 4px;
    font-size: 12px;
    display: inline-block;
    text-decoration: none;
    width: auto;
}

<!-- (added dynamically generated HTML of Tree View):-->

<div id="nav" style="border: solid 1px lightblue; padding: 5px; overflow: auto; background-color: #FAFAFA; position: absolute; width: 90%; height: 600px; top: 150px; border-radius: 4px; ">
    <div class="treeview" oncontextmenu="return showContextMenu(event);" id="nav2">
        <ul>
            <li>
                <span class="collapse collapsible">&nbsp;</span>
                <span>
                <a href="#" id="822" onclick="PassingFunction(822)" style="font-weight: normal;">1-Фонд</a>
                </span>
                <ul>
                    <li>
                        <span class="collapse collapsible">&nbsp;</span>
                        <span>
                      <a href="#" id="1575" onclick="PassingFunction(1575)" style="font-weight: normal;">-одељење1</a>
                      </span>
                        <ul>
                            <li>
                                <span style="width:15px; display:inline-block">&nbsp;</span>
                                <span>
                            <a href="#" id="1577" onclick="PassingFunction(1577)" style="font-weight: bold;">-одељење</a>
                            </span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span class="collapse collapsible">&nbsp;</span>
                        <span>
                      <a href="#" id="1576" onclick="PassingFunction(1576)">-одељење</a>
                      </span>
                        <ul>
                            <li>
                                <span style="width:15px; display:inline-block">&nbsp;</span>
                                <span>
                            <a href="#" id="1597" onclick="PassingFunction(1597)">-ссссс</a>
                            </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<!--HTML OF custom-menuDir:-->

<div id="custom-menuDir" class="custom-menu" style="display: none; border-radius: 4px;">
    <ol>
        <li class="list-devider"></li>
        <li>
            <a onclick="novoOdeljenje();" style="cursor: pointer; margin-left: 21px; color: steelblue; ">
               Ново одељење/одсек
            </a>
        </li>
        <li>
            <a onclick="prebaciAG();" style="cursor: pointer; margin-left: 21px; color: steelblue; ">
                Пребаци архивску грађу
            </a>
        </li>

        <li class="list-devider"></li>
        <li>
            <a onclick="ProveraSum();" style="cursor: pointer; margin-left: 21px; color: steelblue; ">
                Подаци
            </a>
        </li>
    </ol>
</div>

are you looking for this https://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app ? — Dhaval Pankhaniya, Oct 27 '17 at 11:51
I hope understood correctly that is you would like to focus that when you right click then focus on which element. event.target.focus() can you try this — Ferhat BAŞ, Oct 27 '17 at 11:56
@DhavalPankhaniya My contextMenu work correctly when i click only right click. But i need to select first item from tree view, and then to show contextMenu for this item by clicking right click. I want to do both operations (select item + open contextMenu) just on right click. — krazors, Oct 27 '17 at 11:57

score 1 · Answer 1 · answered Oct 27 '17 at 12:03

1

I think this is what you are looking for, if you can use jQuery. See the comments in-line for explanation.

// Remove the default document right-click menu
$(document).bind("contextmenu",function(e){
  return false;
});

// On clicking on one of the menu items, unhighlight all others and hide all context menus. 
// Then highlight the one that was right-clicked and show it's context-menu
$(".menu li").contextmenu(function() {
  $('.context-menu').hide();
  $('.selected').removeClass('selected');
  $(this).addClass('selected').find(".context-menu").show();
});

// When the document is clicked, hide all context menus and remove the highlighting.
$(document).on('click', function() {
  $('.selected').removeClass('selected');
  $('.context-menu').hide();
})

.menu {
  position:relative;
  list-style:none;
  padding:none;
}

.menu li.selected {
  background: yellow;
}

.context-menu {
  display:none;
  padding:0;
  list-style:none;
  position:absolute;
  background:white;
  border:1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li>Menu item
    <ul class="context-menu">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  <li>Menu item 2
    <ul class="context-menu">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
</ul>

answered Oct 27 '17 at 12:03

Jonathan

6,507
5
37
47

Hello Jonathan, i think i made some confusion here. My Tree View html is made through controller and every single tag have onclick="PassingFunction(#assigned-id-from-DB)" ... Then i load other data for this selected item through the ajax on page. I need to load everything on right click as like on left click, and then to show contextMenu. Sincerely, krazors – krazors Oct 27 '17 at 12:13
Can you add your HTML to your question? – Jonathan Oct 27 '17 at 12:16
Jonathan, as you asked, i added HTML to question. – krazors Oct 27 '17 at 12:21
Awesome! Thank you for making it the rendered HTML, too - that's great! I don't see the div `#custom-menuDir` in the HTML. Also, if you could add the `PassingFunction` function, that would be good. – Jonathan Oct 27 '17 at 12:28
I hope that's it what you need to consider solution. – krazors Oct 27 '17 at 12:34
Yes, that is looking more like what is necessary. I have updated your code to use a code snippet and formatted it to make it easier to read. I have some other things I have to do right now, but I'll look at it later today if no one else has come up with the solution. – Jonathan Oct 27 '17 at 12:43
Thank you anyway. At least, u were nice, unlike many people here on stackoverflow ... See you later :) – krazors Oct 27 '17 at 12:48

Do some element action on right click

1 Answers1