DESCRIPTION

When we think about a tree structure, the picture which comes to our mind is a hierarchical structure which can be expanded or collapsed. Additionally there can be drag-drop functionality. So the WijTree component already offer these features; however with its flexible structure, it also allows users to customize it as per their requirements. In this blog article we will learn about a useful customization which can be added to WijTree to enhance its functionality. So we will take a look at how we can add a search functionality within WijTree. Here is a quick preview of what we will end up implementing: So as you can notice, this implementation allow a user to search for any node in the tree. This could be done by either using the exact node text or entering a part of the node text and it will highlight all the matching nodes in the tree. If the node text is not found then it will show an alert saying that no matching nodes found.

IMPLEMENTATION

So basically we are using a WijDialog to act as a search dialog and therefore the WijTree search code will also go inside the WijDialog actions. Here is how this will look:

           $("#dialog-modal").wijdialog({  
                autoOpen: false,  
                height: 180,  
                width: 350,  
                modal: true,  
                buttons: {  
                    "Search": function () {  
                        var count = 0;  
                        var textToFind = $("#txtFind").val().toLowerCase();  
                        $(".wijmo-wijtree-list span").each(function (n) {  
                            var nodeText = $(this).text().toLowerCase();  
                            if ($(this).hasClass("highlighted")) {  
                                $(this).toggleClass("highlighted");  
                            }  
                            if (nodeText === textToFind || nodeText.indexOf(textToFind) >= 0) {  
                                $(this).parents('a').parents('span').parents('li').parents('ul').first().slideDown();  
                                $(this).toggleClass("highlighted");  
                                $("#dialog-modal").wijdialog("close");  
                                $("#txtFind").val("");  
                                count++;  
                            }  
                        });  
                        if (count == 0)  
                            alert('Node Not Found');  
                        $("#txtFind").val("")  
                    },  
                    Cancel: function () {  
                        $(this).wijdialog("close");  
                        $("#txtFind").val("")  
                    }  
                }  
            });  

            $("#tree").wijtree({  
                allowEdit: false  
            });  

            $("#btnSearch").click(function () {  
                $('#dialog-modal').wijdialog('open');  
            });

You must have noticed that we are adding and removing a highlighted class conditionally in the code above. This class actually holds the styling which is applied to a matching node. This is how it looks:

        .highlighted  
        {  
            background-color: Yellow;  
        }

So it is all done. Very simple. Just add this code to your HTML file and you are good to go. A sample application demonstrating this implementation can be downloaded using the link below. Download Sample