Position a context menu

3 posts, 1 answers
  1. George
    George avatar
    110 posts
    Member since:
    Oct 2014

    Posted 03 Feb 2015 Link to this post

    I have a bunch of buttons that each bring up the same context menu.  I need the context menu to position itself at the mouse click on the button.

    In ASP.NET this is accomplished by using code like this.

    function OpenAddRowMenu(event) {
        var contextMenu =  $("#AddRowMenu");
        if ((!event.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), event.relatedTarget))) {
        else {
            alert("Event error");

    The button

    <button class="btn btn-primary" onclick="OpenAddRowMenu(event); return false;">Add Row</button>
    I cannot find anything on positioning a context menu or any possible parameters to show().  The MVC documentation is really thin and the examples only show so much.
  2. Answer
    Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 05 Feb 2015 Link to this post

    Hi George,

    You can use the open method of the context menu to position it. Here is a demo which shows how to open it when the user clicks over a button: http://dojo.telerik.com/@korchev/AHoYi

    Atanas Korchev

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. George
    George avatar
    110 posts
    Member since:
    Oct 2014

    Posted 05 Feb 2015 in reply to Atanas Korchev Link to this post

    It works, thanks. 

    $("button").on("mouseup", function(e) {
        var contextMenu = $("#context-menu").data("kendoContextMenu");       
         contextMenu.open(e.clientX, e.clientY);

    Too bad I could not find that in the Kendo documentation where the examples and specifics are pretty non-existent, repeatedly the same giving little information in lots of text.  I knew there was an open but could not find its parameters. Many hours of web searching and bothering Telerik with this post could have been avoided with some documentation that enumerates methods and their parameters, Microsoft manages this pretty well although they provide fewer examples on newer stuff.

    In the end I discovered from examples, and trial and error, that .Filter(".classname")  will bring a context menu up on any button  I put the class one that and .ShowOn("click") will use the left button instead of the right.

    <%= Html.Kendo().ContextMenu()
    .Items(items => {
                    .LinkHtmlAttributes(new { onclick = "return OnMenuItem('Edit');" });

Back to Top