make only last level clickable - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 5 replies, has 2 voices, and was last updated by igikloppers 9 years, 5 months ago.

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

Author

make only last level clickable Posts

February 25, 2015 at 12:19 pm make only last level clickable #67651

Participant

Good day,

Is it possible to make only the last level of menu items clickable. In other words, I have a root menu, with child groups. Some of those groups have items, but some have more child groups and so on. In the end, I only want the items to be clickable, and not the groups/child groups.

Thanks in advance!
Igi

February 25, 2015 at 2:00 pm make only last level clickable #67658

Nadezhda

Participant

Hello Igi,

Please, provide us with more information.

Best Regards,
Nadezhda

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

February 25, 2015 at 3:02 pm make only last level clickable #67667

igikloppers

Participant

Hi,

Not sure if this will explain it better –

Group1
–ChildGroup1a
—-Item1a1
—-Item1a2
—-Item1a3
–ChildGroup1b
—-ChildGroup1b1
——Item1b1a
——Item1b1b
—-Item1b1
—-Item1b2
–ChildGroup1c
Group2
–Item2a
–Item2b
–ChildGroup2a
—-Item2a1
—-Item2ab

etc etc..

I only want the Items to be clickable, not the Groups or ChildGroups

Kind regards,
Igi

February 25, 2015 at 3:05 pm make only last level clickable #67668

igikloppers

Participant

I think I should also mention that it’s a dynamic menu using JSON

Kind regards,
Igi

February 26, 2015 at 1:53 pm make only last level clickable #67746

Nadezhda

Participant

Hi Igi,

Here is an example which shows how to display a message when you click on Items. I hope it would be helpful to you.

<!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="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
            {
                "text": "Group1",
                "id": "1",
                "parentid": "-1",
                "subMenuWidth": '150px'
            }, {
                "id": "2",
                "parentid": "1",
                "text": "ChildGroup1a"
            }, {
                "id": "3",
                "parentid": "2",
                "text": "Item1a1"
            }, {
                "id": "4",
                "parentid": "2",
                "text": "Item1a2"
            }, {
                "id": "5",
                "parentid": "2",
                "text": "Item1a3"
            }, {
                "id": "6",
                "text": "ChildGroup1b",
                "parentid": "1",
            }, {
                "id": "7",
                "parentid": "6",
                "text": "ChildGroup1b1"
            }, {
                "id": "8",
                "text": "Item1b1a",
                "parentid": "7"
            }, {
                "id": "9",
                "text": "Item1b1b",
                "parentid": "7"
            }, {
                "id": "10",
                "text": "Item1b1",
                "parentid": "6"
            }, {
                "id": "11",
                "text": "Item1b2",
                "parentid": "6"
            }, {
                "id": "13",
                "text": "Group2",
                "parentid": "-1",
                "subMenuWidth": '150px'
            },
            {
                "id": "14",
                "text": "Item2a",
                "parentid": "13"
            }, {
                "id": "15",
                "text": "Iteb2b",
                "parentid": "13"
            }, {
                "id": "16",
                "text": "ChildGroup2a",
                "parentid": "13"
            }, {
                "id": "17",
                "text": "Item2a1",
                "parentid": "16"
            }, {
                "id": "18",
                "text": "Item2ab",
                "parentid": "16"
            }]
            // 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, width: '300px', autoOpen: true });
            var items = $("#jqxWidget").jqxMenu('items');
            $("#jqxWidget").bind('itemclick', function (event) {
                var textItem = event.args.textContent;
                var itemCount = event.args.owner.items.length;
                for (var i = 0; i < itemCount; i++) {
                    if (items[i].element.textContent == textItem) {
                        var itemSubMenuElement = items[i].subMenuElement;
                        if (itemSubMenuElement == null) {
                            alert("This item has no children.");
                        }

                    };
                };
            });
        });
    </script>
</head>
<body>
    <div id='jqxWidget'>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

April 15, 2015 at 11:34 am make only last level clickable #69916

igikloppers

Participant

Thank you so much – this is exactly the solution I was looking for!

Kind regards,
Igi

Author

Posts

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

You must be logged in to reply to this topic.