jQWidgets Forums

Tagged: functionality, highlight, item, jqxtree, search, Tree

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 2 months ago.

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

Author

Tree Search functionalites Posts

January 10, 2014 at 4:33 am Tree Search functionalites #47654

Gowri

Participant

hi,
is it possible to have search and highlighting the tree node? If so please share the code

Thanks in advance,
Gowri.

January 10, 2014 at 7:18 am Tree Search functionalites #47666

Dimitar

Participant

Hello Gowri,

Here is how to achieve this functionality:

<!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);
            $("#search").click(function () {
                var value = $("#value").val();
                var treeItems = $('#jqxTree').jqxTree('getItems');
                for (var i = 0; i < treeItems.length; i++) {
                    var currentItem = treeItems[i];
                    if (currentItem.label == value) {
                        $("#" + currentItem.id + " div:eq(0)").css("border", "2px solid Green");
                    } else {
                        $("#" + currentItem.id + " div:eq(0)").css("border", "none");
                    };
                };
            });
        });
    </script>
</head>
<body class='default'>
    <input type="text" id="value" />
    <button id="search">
        Search tree</button>
    <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/

Author

Posts

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

You must be logged in to reply to this topic.