click enable on particular nodes - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: element, getItem, item, jqxtree, level, Tree

This topic contains 7 replies, has 2 voices, and was last updated by Dimitar 10 years, 11 months ago.

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

Author

click enable on particular nodes Posts

February 25, 2014 at 4:50 am click enable on particular nodes #50036

mallepaddi

Participant

I am generating tree with 3 levels, let’s say Country -> State -> Place

When we need to make an backend action only when user clicks “Place” node, how to find it ?

Nothing should happen clicking on Country and Sate .

Thanks

February 25, 2014 at 12:39 pm click enable on particular nodes #50092

Dimitar

Participant

Hello mallepaddi,

Here is an example, which alerts a message only when the item level is 1 (levels are zero-based numbered). In your case, you will need to check for the second level.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander
            $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: '370px' });
            // Create jqxTree
            var source = [
            {
                icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                  { icon: "../../images/calendarIcon.png", label: "Calendar" },
                  { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
            },
            {
                icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                 { icon: "../../images/folder.png", label: "Admin" },
                 { icon: "../../images/folder.png", label: "Corporate" },
                 { icon: "../../images/folder.png", label: "Finance" },
                 { icon: "../../images/folder.png", label: "Other" },
                ]
            },
            { icon: "../../images/recycle.png", label: "Deleted Items" },
            { icon: "../../images/notesIcon.png", label: "Notes" },
            { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
            { icon: "../../images/favorites.png", label: "Favorites" }
            ];

            $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%' });
            $('#jqxTree').jqxTree('selectItem', null);
            $('#jqxTree').on('select', function (event) {
                var args = event.args;
                var item = $('#jqxTree').jqxTree('getItem', args.element);
                var label = item.label;
                if (item.level == 1) {
                    alert("Clicked a second-level item!");
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id='jqxExpander'>
            <div>
                Folders
            </div>
            <div style="overflow: hidden;">
                <div style="border: none;" id='jqxTree'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

February 25, 2014 at 1:43 pm click enable on particular nodes #50100

mallepaddi

Participant

many thanks.

perfect it works.

But please help me where i can find more documentation like item.level and other possible attributes on “item” and “element” ?

Thanks

February 25, 2014 at 2:01 pm click enable on particular nodes #50102

Dimitar

Participant

Hi mallepaddi,

You can find all available information about the jqxTree methods and properties in the API Documentation. Here is an excerpt from there about getItem:

Gets the selected tree item.

Item Fields
label – gets item’s label.
value – gets the item’s value.
disabled – gets whether the item is enabled/disabled.
checked – gets whether the item is checked/unchecked.
element – gets the item’s LI tag.
parentElement – gets the item’s parent LI tag.
isExpanded – gets whether the item is expanded or collapsed.
selected – gets whether the item is selected or not.

Best Regards,
Dimitar

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

February 25, 2014 at 2:05 pm click enable on particular nodes #50103

mallepaddi

Participant

Many thanks.

But those mentioned properties are not found in API section, like item.parentElement ?

Thanks

February 25, 2014 at 2:06 pm click enable on particular nodes #50104

mallepaddi

Participant

sorry, found them.

February 25, 2014 at 2:08 pm click enable on particular nodes #50105

mallepaddi

Participant

How about “event”, like event.args.element ?

Thanks

February 26, 2014 at 6:08 am click enable on particular nodes #50131

Dimitar

Participant

Hi mallepaddi,

Just expand any of the jqxTree events (e.g. select) in the API Documentation and you will see their event arguments.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.