This is a migrated thread and some comments may be shown as answers.

Show matching characters of nodes bold using javascript

2 Answers 83 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Dev
Top achievements
Rank 1
Dev asked on 21 Jul 2012, 06:14 AM
Hello,

I have a radwindow in which I have putted an aspx page that contains a user control inside. the user control have a treeview and a RadTextBox control. I want the filter functionality for treeview nodes. When I type characters in search box, it will hide the nodes which does not contains that characters and matching characters in remaining nodes gets bold. I have made javascript functions for this and working fine. I wraps the matching characters  with <b></b>  tags with regular expression. Here problem I am facing is it is showing <b></b> instead of making matching characters bold. I used same in listbox and it is working fine. Any idea regarding this? The code is as below :

For Javascript :

function filterList() {

            var treeview = $find("<%=RadTreeViewMain.ClientID%>");
            var textbox = $find("<%=txtSearchItems.ClientID%>");

            clearListEmphasis(treeview);
            createMatchingList(treeview, textbox.get_textBoxValue());
        }

        // Remove emphasis from matching text
        function clearListEmphasis(treeview)
        {
            var re = new RegExp("</{0,1}b>", "gi");
            var itemText;           
            var allNodes = treeview.get_allNodes();

            for (var i = 0; i < allNodes.length; i++) {

                var node = allNodes[i];
                itemText = node.get_text();
                node.set_text(itemText.replace(re, ""));
                //node.collapse();             
            }
        }

        // Emphasize matching text and hide non-matching items
        function createMatchingList(treeview, filterText)
        {
            if (filterText != "") {
                
                filterText = escapeRegExCharacters(filterText);

                var re = new RegExp(filterText, "i");
                var allNodes = treeview.get_allNodes();

                for (var i = 0; i < allNodes.length; i++)
                {
                    var node = allNodes[i];
                    var itemText = node.get_text();

                    if (itemText.match(re))
                    {
                        if (node.get_level() != 0)
                        {
                            var pNode = node.get_parent();
                            pNode.set_expanded(true);
                            pNode.set_visible(true);
                        }
                        node.set_text(itemText.replace(re, "<b>" + itemText.match(re) + "</b>"));
                        node.set_visible(true);                        
                    }
                    else {
                        node.set_visible(false);
                    }
                }
            }
            else {

                var allNodes = treeview.get_allNodes();

                for (var i = 0; i < allNodes.length; i++) {

                    var node = allNodes[i];

                    var itemText = node.get_text();
                    node.set_visible(true);
                    node.set_expanded(false);
                }
            }
        }
        
        // Clears the text from the filter.
        function clearFilterText() {
            var textbox = $find("<%=RadTreeViewMain.ClientID%>");
            textbox.clear();
        }

        // Escapes RegEx character classes and shorthand characters
        function escapeRegExCharacters(text) {
            return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
        }
       
And for use ascx :

<telerik:RadTextBox ID="txtSearchItems" runat="server" EmptyMessage="Search..." width="180px" BackColor="WhiteSmoke" autocomplete="off" onkeyup="filterList();" ></telerik:RadTextBox>

<telerik:RadTreeView ID="RadTreeViewMain" runat="server" EnableDragAndDrop="True" TabIndex="1" AccessKey="T"
    EnableDragAndDropBetweenNodes="True" CollapseAnimation-Type="Linear" MultipleSelect="true"
    CollapseAnimation-Duration="200" ExpandAnimation-Duration="200"
    ExpandAnimation-Type="Linear" AllowNodeEditing="True" Skin="Telerik" >       
</telerik:RadTreeView>


Thank you,
Dev

2 Answers, 1 is accepted

Sort by
0
Dev
Top achievements
Rank 1
answered on 24 Jul 2012, 06:55 AM
Does telerik team have any answer for this? Awaiting for your valuable response..
0
Dev
Top achievements
Rank 1
answered on 31 Jul 2012, 08:28 AM
Solved it my self by setting "node.get_textElement().innerHTML" instead of get_text().

function filterList() {

            var treeview = $find("<%=RadTreeViewMain.ClientID%>");
            var textbox = $find("<%=txtSearchItems.ClientID%>");

            clearListEmphasis(treeview);
            createMatchingList(treeview, textbox.get_textBoxValue());
        }

        // Remove emphasis from matching text
        function clearListEmphasis(treeview)
        {
            var re = new RegExp("</{0,1}b>", "gi");
            var itemText;           
            var allNodes = treeview.get_allNodes();

            for (var i = 0; i < allNodes.length; i++) {

                var node = allNodes[i];
                itemText = node.get_text();
                node.get_textElement().innerHTML = itemText.replace(re, "");
                //node.collapse();             
            }
        }

        // Emphasize matching text and hide non-matching items
        function createMatchingList(treeview, filterText)
        {
            if (filterText != "") {
                
                filterText = escapeRegExCharacters(filterText);

                var re = new RegExp(filterText, "i");
                var allNodes = treeview.get_allNodes();

                for (var i = 0; i < allNodes.length; i++)
                {
                    var node = allNodes[i];
                    var itemText = node.get_text();

                    if (itemText.match(re))
                    {
                        if (node.get_level() != 0)
                        {
                            var pNode = node.get_parent();
                            pNode.set_expanded(true);
                            pNode.set_visible(true);
                        }
                        node.get_textElement().innerHTML = itemText.replace(re, "<b>" + itemText.match(re) + "</b>");
                        node.set_visible(true);                        
                    }
                    else {
                        node.set_visible(false);
                    }
                }
            }
            else {

                var allNodes = treeview.get_allNodes();

                for (var i = 0; i < allNodes.length; i++) {

                    var node = allNodes[i];

                    var itemText = node.get_text();
                    node.set_visible(true);
                    node.set_expanded(false);
                }
            }
        }
        
        // Clears the text from the filter.
        function clearFilterText() {
            var textbox = $find("<%=RadTreeViewMain.ClientID%>");
            textbox.clear();
        }

        // Escapes RegEx character classes and shorthand characters
        function escapeRegExCharacters(text) {
            return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
        }


Thanks to the Telerik team for kind support.
Tags
TreeView
Asked by
Dev
Top achievements
Rank 1
Answers by
Dev
Top achievements
Rank 1
Share this question
or