positioning kendo right click menu

Question

I have right click menu (contentmenu) but it show only in one static position (int he bottom). Can you help me? I use this code:

<ul class ="k-column-menu" id="contextmenu" style=" display:none; position: absolute; background-color:white; border-style:solid; border-width:1px;" >
<li>Genres</li>
<li>About</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

and this

$(document).ready(function () {
        $(document).bind('contextmenu', function (event){
            $("#contextmenu").kendoMenu({ position: "relative", orientation: "vertical" }).show();
         event.preventDefault();
        });

        $(document).bind('click', function () {
                $("#contextmenu").hide();
        });

    });

I solved this issue like this:

$(document).ready(function () {
        $(document).bind('contextmenu', function (event){
            $("#contextmenu").css({ "top": event.pageY + "px", "left": event.pageX + "px" }).kendoMenu({orientation: "vertical"}).show();
            event.preventDefault();
        });

        $(document).bind('click', function () {
                $("#contextmenu").hide();
        });

    });

Iwant to ask another question. How can i make this menu to show only when right clicking on the columns header and nowhere else on the page or table

Answer 1

You just need to specify the <th> tag when you bind the click event.

Updated link:

Here is a simple example.!

Another Update

and here is another example according your requirement you only need to change

this:

$(document).bind('contextmenu', function (event){
     $("#contextmenu").kendoMenu({ position: "relative", orientation: "vertical"}).show();
     event.preventDefault();
});

to this:

$(".k-header").bind('contextmenu', function (event){
     $("#contextmenu").kendoMenu({ position: "relative", orientation: "vertical"}).show();
     event.preventDefault();
});