Popup menu for any HTML element (including tree items)

17 posts, 0 answers
  1. Denis
    Denis 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>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    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!
  3. Constantine
    Constantine 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
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    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!
  5. Timothy
    Timothy avatar
    37 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.
  6. RichardAD
    RichardAD avatar
    105 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
  7. ping0
    ping0 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.


  8. Constantine
    Constantine 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).

  9. Constantine
    Constantine 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'
       });
    });



  10. Matteo
    Matteo 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
  11. Pavel
    Pavel 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'}}
                        ]
                    }
  12. Sudhanshu
    Sudhanshu 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  ? 
  13. Sudhanshu
    Sudhanshu 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  ? 
  14. Josh
    Josh 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?
  15. Andrew
    Andrew avatar
    171 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?
  16. Jason
    Jason 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
  17. Brian
    Brian avatar
    1 posts
    Member since:
    May 2014

    Posted 01 May 2014 in reply to Constantine 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