jQuery UI Widgets Forums Navigation Menu, Context Menu nested xml menuitems for contexmenu

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 2 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • Robert_1
    Participant

    Hi,

    i have the following xml-structure to show as a jqx contextmenu.

    <contextmenu>
    <menuitem label=”Products” id=”1″>
    <menuitem label=”Audi” id=”2″ >
    <menuitem label=”A4″ id=”10″ action=”link10″ />
    <menuitem label=”A6″ id=”11″ action=”link11″ />
    </menuitem>
    <menuitem label=”VW” id=”3″>
    <menuitem label=”Tiguan” id=”20″ action=”link20″ />
    <menuitem label=”Touareg” id=”21″ action=”link21″ />
    </menuitem>
    </menuitem>
    </contextmenu>

    my dataadapter looks like this, but does not find any records:

    var source =
    {
    datatype: “xml”,
    datafields: [
    { name: ‘label’ },
    { name: ‘action’ }
    ],
    id: ‘id’,
    url: contextMenuUrl,
    // localdata: data,
    hierarchy:
    {
    // defines the root and record of each hiearchy level.
    root: ‘menuitem’,
    record: ‘menuitem’
    },
    root: ‘contextmenu’,
    record: ‘menuitem’
    };

    • This topic was modified 2 years, 1 month ago by  Robert_1.
    nested xml menuitems for contexmenu #100497

    Hristo
    Participant

    Hello Robert_1,

    Unfortunately, I cannot provide you example with our DataAdapter that you could convert your XML structure to the menu with nested elements.
    I would like to suggest you look at this example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="keywords" content="jQuery Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" />
        <meta name="description" content="This demo demonstrates how to use the jqxMenu widget as a Context Menu. In order to display the jqxMenu as Context Menu, you need to set the 'mode' property to 'popup'. " />
        <title id='Description'>
            This demo demonstrates how to use the jqxMenu widget as a Context Menu. In order to display the jqxMenu as Context Menu, you need to set the 'mode' property to 'popup'.
        </title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript">
            $(document).ready(function ()
            {
                var source2 = [
                    {
                        label: "Products", expanded: true, id: 1, items: [
                          { label: "Audi", items: [{ label: 'A4', id: 10 }, { label: 'A6', id: 11 }], id: 2 },
                          { label: "VW", items: [{ label: 'Tiguan', id: 20 }, { label: 'Touareg', id: 21 }], id: 3 }
                        ]
                    }
                ];
    
                // Create a jqxMenu
                var contextMenu = $("#jqxMenu").jqxMenu({ source: source2, width: '120px', height: '30px', autoOpenPopup: false, mode: 'popup' });
                // open the context menu when the user presses the mouse right button.
                $("#jqxWidget").on('mousedown', function (event)
                {
                    var rightClick = isRightClick(event) || $.jqx.mobile.isTouchDevice();
                    if (rightClick) {
                        var scrollTop = $(window).scrollTop();
                        var scrollLeft = $(window).scrollLeft();
                        contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                        return false;
                    }
                });
                // disable the default browser's context menu.
                $(document).on('contextmenu', function (e)
                {
                    return false;
                });
                function isRightClick(event)
                {
                    var rightclick;
                    if (!event) var event = window.event;
                    if (event.which) rightclick = (event.which == 3);
                    else if (event.button) rightclick = (event.button == 2);
                    return rightclick;
                }
            });
        </script>
    </head>
    <body>
        <div id='jqxWidget' style='vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 400px;'>
            <div id="jqxMenu"></div>
        </div>
    </body>
    </html>
    

    You could use an additional logic to convert the XML to JSON.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    Robert_1
    Participant

    Hi Hristo,

    thanks for yor answer.
    where can i find a general description for the required structure of the parameter “source”?

    $(“#jqxMenu”).jqxMenu({ source: source, width: ‘180px’, height: ‘180px’, mode: ‘vertical’});

    nested xml menuitems for contexmenu #100550

    Hristo
    Participant

    Hello Robert_1,

    You could find out more information in our API Documentation section.
    I would like to propose your attention to the source property:
    https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxmenu/jquery-menu-api.htm?search=menu

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.