Popup menu for any HTML element (including tree items)

Thread is closed for posting
17 posts, 0 answers
  1. FEFA79FE-FF20-453A-B937-A2CD2F155E84
    FEFA79FE-FF20-453A-B937-A2CD2F155E84 avatar
    9 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

    Requirements

    Kendo UI Suite and Version

    		 any

    jQuery Version

    		>= 1.6.2

    Supported Browsers and Platforms

    		 IE >= 8, Chrome >=18, Opera >= 9.5

    Components/Widgets used 

    PROJECT DESCRIPTION 
    Popup menu, also known as "context menu". You can use this for any HTML element, include tree nodes. Also, supporting "popup" callback for enabling/disabling items in menu according HTML element state.

    Using example:

    <script type="text/javascript">
    var menu = kendoCustom.contextMenu({
                trigger: '#treeView li',
                menu: 'ul#menu',
                click: function (item, trigger, point) {
                    alert('Trigger ' + trigger.attr('id') + ' clicked: ' + item.text().trim());
                },
                popup: function (item, point) {                
                    return true; // menu will not popup if you return false
                }
            });
    </script>
    ...

    <ul id="menu">
        <li><img src="http://icons.iconarchive.com/icons/visualpharm/must-have/16/Edit-icon.png"/>pop Item 1</li>
        <li id="item2">pop Item 2</li>
        <separator></separator>
        <li>pop Item 4</li>
    </ul>
  3. F45C0710-0786-45B2-AE04-040FFA6E9F8B
    F45C0710-0786-45B2-AE04-040FFA6E9F8B avatar
    2895 posts
    Member since:
    Nov 2020

    Posted 27 Jun 2012 Link to this post

    Hi Denis,

    Thank you for providing this solution.
    As a small sign of our appreciation for sharing it I have updated your Telerik points.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. AF8F6654-A565-415F-8133-1B25AB430619
    AF8F6654-A565-415F-8133-1B25AB430619 avatar
    9 posts
    Member since:
    Apr 2012

    Posted 02 Jul 2012 Link to this post

    Hello, I have my own implementation of context menu. It based on Menu widget.

    Simple usage as usual.

    HTML:

    <div id="myDiv">Click here with right mouse button.</div>

    <div id="myDiv2">You can also click here.</div> 
     
    <div id="contextMenu"></div>

    JavaScript:

    $(document).ready(function()  {
            var cm = $('#contextMenu').kendoMenuEx({
            dataSource: [
                {
                    text: 'item #1',
                    imageUrl: "../../content/shared/icons/sports/baseball.png",
                    data: {id: 5, extra: 'extradata'},
                    click: function (e) {
     
                        alert("this item id: " + this.data('data').id);
                    }
                },
                {text: 'item #2', imageUrl: "../../content/shared/icons/sports/golf.png"},
                {text: 'item #3', imageUrl: "../../content/shared/icons/sports/swimming.png",
                    items: [
                        {text: 'item #31', imageUrl: "../../content/shared/icons/16/video.png"},
                        {text: 'item #32', imageUrl: "../../content/shared/icons/16/photo.png"}
                    ]
                },
            ],
            anchor: '#myDiv, #myDiv2',
            delay: 1500
        });
    });

    Download code here: https://github.com/insanio/kendoui.ex

    Demo is here: http://www.falsecode.ru/blog/demos/kendoui/examples/web/index.html
  7. F45C0710-0786-45B2-AE04-040FFA6E9F8B
    F45C0710-0786-45B2-AE04-040FFA6E9F8B avatar
    2895 posts
    Member since:
    Nov 2020

    Posted 05 Jul 2012 Link to this post

    Hello Constantine,

    Thank you for the contribution.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. 590DACEB-2E86-472B-AC9B-8AB37756443E
    590DACEB-2E86-472B-AC9B-8AB37756443E avatar
    41 posts
    Member since:
    Aug 2011

    Posted 29 Jul 2012 Link to this post

    To Denis,
    Your solution works well, however for binding to a grid I added the following code below menu.show
        menu.addItems = function (newTrigs) {
           $(newTrigs).each(function () { $(this).bind("contextmenu", menu.show); });
        }

    and used the DataBound event to add new items after paging/scrolling.
  11. 27222E5F-F452-475C-A4F0-1774DAAD9620
    27222E5F-F452-475C-A4F0-1774DAAD9620 avatar
    149 posts
    Member since:
    Feb 2012

    Posted 27 Nov 2012 Link to this post

    Constantine:

    Do you have any suggestions on how to create a dynamic popup menu for this scenario?

    Table X shows a list of IDs (ID1, ... IDi, ... IDn)
    Each ID corresponds to a table (initially hidden)
    When IDi is selected the table is made visible.
    Each table T has a 'download data' icon in its header row

    When the icon in table T is clicked, a list of available sources is to be displayed as a popup menu.  When a source is selected the corresponding data should to loaded into T.

    Due to complications of page generation it is easier to add the download icon using jQuery when an ID is selected in X.

    Suppose ID1 is selected:

    If table for ID1 does not have download icon, add it (CSS is used to show the download icon)
    var $row1 = $('#'+IdSelected).find("thead tr:nth-child(1)");
    var icon = '<a class="download-icon" data-action="load" href="#" title="Load"></a>';
    var td = $('<th colspan="3">').html(icon);
    var $row = $('<tr>').html(td).insertBefore($row1);
    At this point I would want to hook up a popmenu to $('#'+IdSelected+' .download-icon') or explicitly raise a popmenu from within a .on click handler attached to the tables.

    The popmenu items would also vary dynamically and be populated via remote connected datasource.

    Thanks!
    Richard
  13. E8AC37A7-71E7-4C63-B68B-5219285DCD7B
    E8AC37A7-71E7-4C63-B68B-5219285DCD7B avatar
    5 posts
    Member since:
    Sep 2012

    Posted 30 Nov 2012 Link to this post

    Constantine:

    I am trying out your context menu. Unfortunately it is rendering subitems incorrectly in Chrome 23.0.1271.91m I have tried to describe the issue here .

    Perhaps someone else has solved this or has Constantine's contact? I will try to look into it at some point and report back.


  15. AF8F6654-A565-415F-8133-1B25AB430619
    AF8F6654-A565-415F-8133-1B25AB430619 avatar
    9 posts
    Member since:
    Apr 2012

    Posted 30 Nov 2012 Link to this post

    ping0:

    I slightly modified my example of menu to test your ussues. I dont have any blurrs, and css problems (except ">" icon, I already fixed it).
  17. AF8F6654-A565-415F-8133-1B25AB430619
    AF8F6654-A565-415F-8133-1B25AB430619 avatar
    9 posts
    Member since:
    Apr 2012

    Posted 02 Dec 2012 Link to this post

    RichardAD:

    As far as I know there is no possibility to bind kendoMenu to remote kendo.data.DataSource.

    Something like that:
    $.get('/get/sources.json?id=' + IdSelected, function(r) {
     
       $('#cxMenu').kendoMenuEx({
           
          dataSource: r,
          anchor: '#'+IdSelected+' .download-icon',
          event: 'click'
       });
    });



  19. 7AF19BB5-E91E-4BD2-A3DB-A0A503CBCC6E
    7AF19BB5-E91E-4BD2-A3DB-A0A503CBCC6E avatar
    6 posts
    Member since:
    Apr 2012

    Posted 03 Jan 2013 Link to this post

    Hi Constantine,

    Does your menu implementation work on mobile devices?

    And how do you handle "click" event on subitems? It seems it does not work (is it implemented just for the first level of items inside datasource?).

    Thank you
  21. B38664BB-A95F-4926-A955-0D26530DC9D9
    B38664BB-A95F-4926-A955-0D26530DC9D9 avatar
    1 posts
    Member since:
    Sep 2012

    Posted 20 Jan 2013 Link to this post

    >>> And how do you handle "click" event on subitems?
    For Example:
     var OrderPaymentContext = [
                  {
                        text: 'Fin. Operation', imageUrl: "img/ico/16/folder.png",
                        click: function (e) {
                            var ActionName = this.item.data('data').ActionName;
                            switch(ActionName)
                            {
                                case "AddContrPayment" :
                                {
                                    AddContrPayment();
                                    break;
                                }
                                case "AddOrderPayment" :
                                {
                                    AddOrderPayment();
                                    break;
                                }
                                case "JournalContrPayment":
                                {
                                    break;
                                }
                            }
                        },
                        items:
                        [
                            { text: 'Add Order Payment', imageUrl: "img/ico/16/folder.png",data: {ActionName: 'AddOrderPayment' }},
                            { text: 'Add Payment', imageUrl: "img/ico/16/folder.png",data: {ActionName: 'AddContrPayment' }},
                            { text: 'Open Journal', imageUrl: "img/ico/16/folder.png",data: {ActionName: 'JournalContrPayment'}}
                        ]
                    }
  23. C3469D5D-CC46-437F-B5E7-50217CB72007
    C3469D5D-CC46-437F-B5E7-50217CB72007 avatar
    2 posts
    Member since:
    Apr 2013

    Posted 22 Apr 2013 Link to this post

    Does any body know how to access the data on right click in a context menu from tree item if the tree has remote binding implementation not local binding  ? 
  25. C3469D5D-CC46-437F-B5E7-50217CB72007
    C3469D5D-CC46-437F-B5E7-50217CB72007 avatar
    2 posts
    Member since:
    Apr 2013

    Posted 22 Apr 2013 Link to this post

    Do you know how to access the data on right click in a context menu from tree item if the tree has remote binding implementation not local binding  ? 
  27. B7FBB153-02A7-41E0-BEFE-D7B25E6A16CC
    B7FBB153-02A7-41E0-BEFE-D7B25E6A16CC avatar
    50 posts
    Member since:
    Jul 2009

    Posted 14 May 2013 Link to this post

    Will your context widget respect screen boundaries in the future?
  29. B92CBB5A-325C-46EC-B4B7-9CA57FC3963C
    B92CBB5A-325C-46EC-B4B7-9CA57FC3963C avatar
    176 posts
    Member since:
    Jun 2009

    Posted 19 Jun 2013 Link to this post

    Constantine: 
    The menu does not work in IE10.
    Are you still working on this?
  31. 457055F3-2CF5-419F-9D43-58DCD80C6AFF
    457055F3-2CF5-419F-9D43-58DCD80C6AFF avatar
    4 posts
    Member since:
    Sep 2012

    Posted 26 Aug 2013 Link to this post

    Hi Denis,

    Quick (and probably dumb) question. How are you determining that it's a right-click? I actually want a menu that opens on a left click so I'd like to adjust it.

    Thanks,
    Jason
  33. 698BB101-DF35-440A-BE7A-584DE555A8E2
    698BB101-DF35-440A-BE7A-584DE555A8E2 avatar
    1 posts
    Member since:
    May 2014

    Posted 01 May 2014 in reply to AF8F6654-A565-415F-8133-1B25AB430619 Link to this post

    I followed @Constantine's demo link, the contextmenu works fine on FF (28), but non on my Win 7 MSIE 9 browser
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.