How to trace the parent id and parent label based on the sub menu item - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: id, jqxMenu, label, Menu, parent, scrollbar, sub

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 12 years, 4 months ago.

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

Author

How to trace the parent id and parent label based on the sub menu item Posts

October 4, 2012 at 9:09 pm How to trace the parent id and parent label based on the sub menu item #8939

SushmaSriram

Member

Hi Team,

I have a 2-level horizontal menu.

When clicked on a sub menu item, how can I get the parent id and also the label of the parent menu item.

Also, one of my sub menu list is very long, hence is there a possibility to have a single column with scroll bar on it?

thanks,
Sushma

October 8, 2012 at 6:43 am How to trace the parent id and parent label based on the sub menu item #9029

Dimitar

Participant

Hello Sushma,

Here is a way of accessing the id and label of the top-level elements of a menu when a sub menu item is clicked. Note that you need to set ids to every ul and its parent li in the HTML. If the ul id is named “name-ul”, for example, the li id must be named “name”.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                $("#jqxMenu").jqxMenu({ width: 600, height: 30 });
                $("#jqxMenu").bind('itemclick', function () {
                    var children = $("#jqxMenu ul:first").children();
                    // In case a top-level menu item is clicked
                    if ($(args).is(children)) {
                    }
                    // In case another menu item is clicked
                    else {
                        var popup = $(args).parents(".jqx-menu-popup:last");
                        var ul = $(popup.children()[0]).find('ul:first');
                        var textul = "#" + ul[0].id;
                        var n = textul.indexOf("-ul");
                        var text = textul.slice(0, (n));
                        id = $(text)[0].id; // the id variable stores the id
                        label = $(text)[0].innerHTML; // the label variable stores the label
                    };
                });
            });
        </script>
        <div id='jqxWidget'>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li id="about">About Us
                        <ul id="about-ul">
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                        </ul>
                    </li>
                    <li>Services </li>
                    <li id="products">Products
                        <ul id="products-ul">
                            <li id="new"><a href="#">New</a>
                                <ul id="new-ul">
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li id="used"><a href="#">Used</a>
                                <ul id="used-ul">
                                    <li><a href="#">Corporate Use</a></li>
                                    <li><a href="#">Private Use</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Featured</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

As for your second question, it is not possible to add a scrollbar to a sub menu. However, please take a look at the following demo: Columns.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 8, 2012 at 12:29 pm How to trace the parent id and parent label based on the sub menu item #10713

SushmaSriram

Member

Hi,

Could you please let me know how to retrieve parent id and label based on below example:

In this demo the jqxMenu is built from JSON data.

$(document).ready(function () {
var theme = getTheme();
var data = [
{
“text”: “Chocolate Beverage”,
“id”: “1”,
“parentid”: “-1”,
“subMenuWidth”: ‘250px’
}, {
“id”: “2”,
“parentid”: “1”,
“text”: “Hot Chocolate”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Peppermint Hot Chocolate”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Salted Caramel Hot Chocolate”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “White Hot Chocolate”
}, {
“id”: “6”,
“text”: “Espresso Beverage”,
“parentid”: “-1”,
“subMenuWidth”: ‘200px’
}, {
“id”: “7”,
“parentid”: “6”,
“text”: “Caffe Americano”
}, {
“id”: “8”,
“text”: “Caffe Latte”,
“parentid”: “6”
}, {
“id”: “9”,
“text”: “Caffe Mocha”,
“parentid”: “6”
}, {
“id”: “10”,
“text”: “Cappuccino”,
“parentid”: “6”
}, {
“id”: “11”,
“text”: “Pumpkin Spice Latte”,
“parentid”: “6”
}, {
“id”: “12”,
“text”: “Frappuccino”,
“parentid”: “-1”,
“subMenuWidth”: ‘250px’
}, {
“id”: “13”,
“text”: “Caffe Vanilla Frappuccino”,
“parentid”: “12”
}, {
“id”: “15”,
“text”: “450 calories”,
“parentid”: “13”
}, {
“id”: “16”,
“text”: “16g fat”,
“parentid”: “13”
}, {
“id”: “17”,
“text”: “13g protein”,
“parentid”: “13”
}, {
“id”: “14”,
“text”: “Caffe Vanilla Frappuccino Light”,
“parentid”: “12”
}]
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parentid’ },
{ name: ‘text’ },
{ name: ‘subMenuWidth’ }
],
id: ‘id’,
localdata: data
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);
// perform Data Binding.
dataAdapter.dataBind();
// get the menu items. The first parameter is the item’s id. The second parameter is the parent item’s id. The ‘items’ parameter represents
// the sub items collection name. Each jqxTree item has a ‘label’ property, but in the JSON data, we have a ‘text’ field. The last parameter
// specifies the mapping between the ‘text’ and ‘label’ fields.
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);
$(‘#jqxWidget’).jqxMenu({ source: records, height: 30, theme: theme, width: ‘400px’ });
$(“#jqxWidget”).bind(‘itemclick’, function (event) {
$(“#eventLog”).html(“Id: ” + event.args.id + “, Text: ” + $(event.args).text());
});
});

November 8, 2012 at 12:33 pm How to trace the parent id and parent label based on the sub menu item #10716

SushmaSriram

Member

Hi,

Sorry for the previous post.

Could you please let me know how to retrieve parent id and label based on below example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxMenu is built from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var data = [
                {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "subMenuWidth": '250px'
                }, {
                    "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1",
                    "subMenuWidth": '200px'
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6"
                }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1",
                    "subMenuWidth": '250px'
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13"
                }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12"
                }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'subMenuWidth' }
                    ],
                    id: 'id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                $('#jqxWidget').jqxMenu({ source: records, height: 30, theme: theme, width: '400px' });
                $("#jqxWidget").bind('itemclick', function (event) {
                    $("#eventLog").html("Id: " + event.args.id + ", Text: " + $(event.args).text());
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" id="eventLog"></div>
    </div>
</body>
</html>

November 8, 2012 at 2:39 pm How to trace the parent id and parent label based on the sub menu item #10732

Dimitar

Participant

Hi Sushma,

Here is the example, with parent id and label logged when a menu item is clicked:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxMenu is built from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var data = [
                {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "subMenuWidth": '250px'
                }, {
                    "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1",
                    "subMenuWidth": '200px'
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6"
                }, {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1",
                    "subMenuWidth": '250px'
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13"
                }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12"
                }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'subMenuWidth' }
                    ],
                    id: 'id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter
                // specifies the mapping between the 'text' and 'label' fields.
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
                $('#jqxWidget').jqxMenu({ source: records, height: 30, theme: theme, width: '400px' });
                $("#jqxWidget").bind('itemclick', function (event) {
                    var id = event.args.id;
                    var itemCount = event.args.owner.items.length;
                    for (var i = 0; i < itemCount; i++) {
                        if (event.args.owner.items[i].id == id) {
                            parentId = event.args.owner.items[i].parentId;
                            break;
                        };
                    };
                    var parentLabel;
                    for (var i = 0; i < itemCount; i++) {
                        if (event.args.owner.items[i].id == parentId) {
                            parentLabel = event.args.owner.items[i].element.innerHTML;
                            break;
                        };
                    };
                    $("#eventLog").html("Id: " + id + ", Text: " + $(event.args).text() + ", Parent Id: " + parentId + ", Parent label: " + parentLabel);
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
        <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" id="eventLog">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.