Show matching characters of nodes bold using javascript

3 posts, 0 answers
  1. Dev
    Dev avatar
    28 posts
    Member since:
    Jan 2011

    Posted 21 Jul 2012 Link to this post

    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. Dev
    Dev avatar
    28 posts
    Member since:
    Jan 2011

    Posted 24 Jul 2012 Link to this post

    Does telerik team have any answer for this? Awaiting for your valuable response..
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dev
    Dev avatar
    28 posts
    Member since:
    Jan 2011

    Posted 31 Jul 2012 Link to this post

    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.
Back to Top