jQuery UI Widgets Forums Navigation Tree click enable on particular nodes

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • click enable on particular nodes #50036

    mallepaddi
    Participant

    Hi

    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

    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/

    click enable on particular nodes #50100

    mallepaddi
    Participant

    Hi

    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

    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/

    click enable on particular nodes #50103

    mallepaddi
    Participant

    Many thanks.

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

    Thanks

    click enable on particular nodes #50104

    mallepaddi
    Participant

    sorry, found them.

    click enable on particular nodes #50105

    mallepaddi
    Participant

    Hi

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

    Thanks

    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/

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

You must be logged in to reply to this topic.