jQWidgets Forums

Tagged: JavaScript Menu, jQuery Menu, jqwidgets menu, Menu, XML

This topic contains 3 replies, has 2 voices, and was last updated by Hristo 6 years, 9 months ago.

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

Author

nested xml menuitems for contexmenu Posts

June 4, 2018 at 1:31 pm nested xml menuitems for contexmenu #100468

Robert_1

Participant

Hi,

i have the following xml-structure to show as a jqx 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’
};

June 5, 2018 at 10:42 am 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

June 8, 2018 at 9:51 am nested xml menuitems for contexmenu #100532

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’});

June 11, 2018 at 11:11 am 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

Author

Posts

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

You must be logged in to reply to this topic.