Change node color in treeview

Question

0.00/5 (No votes)

See more:

Hi All,
I have a treeview with nodes.I am implementing searching through treeview nodes .Once matching node is find ,the node color should be changed .it is working fine ,but the problem is while searching for a new node the previously searched node color is also changed . Any help will be really appreciated .Thanks in advance.

What I have tried:

protected void btn_search_Click(object sender, EventArgs e)
       {
           try
           {
               FindNodesByString();

           }

           catch { }
       }

       private void FindNodesByString()
       {
           foreach (TreeNode currentNode in tv_AccountView.Nodes)
           {
               FindNodeByString(currentNode);
           }
       }

       private void FindNodeByString(TreeNode parentNode)
       {
           FindMatch(parentNode);
           foreach (TreeNode currentNode in parentNode.ChildNodes)
           {
               //currentNode.Text = currentNode.Text;
               FindMatch(currentNode);
               FindNodeByString(currentNode);
           }
       }
      private void FindMatch(TreeNode currentNode)
       {
           if (currentNode.Text.ToUpper().Contains(txt_searchbyname.Text.ToUpper()))
           {
               currentNode.Expand();
               currentNode.Text = "<div style='background-color:#ffffcc;color:#ff9900;'>" + currentNode.Text + "</div>";

   /// currentNode.ShowCheckBox = true;
               //return;
           }
           else
           {
               currentNode.Text = currentNode.Text;
               // currentNode.Collapse();
             //  currentNode.ShowCheckBox = false;
           }
       }

Posted 22-Aug-18 8:24am

Member 12926744

Updated 22-Aug-18 11:49am

Add a Solution

Comments

j snooze 22-Aug-18 17:22pm

Are you sure the previous node isn't just keeping its color change? You would have to track the previous node and change the color back on a new search...or is there a post back on each search?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Answer 1 · 2018-08-22T11:50:00

That's because you are setting the color with a div element. Once that's been rendered in the client/browser, it will remain there. Your else block of your code will still hold the Text with the <div> element to it. You would need to implement a bit of text parsing to resolve that.

Here's a quick demo:

ASPX:

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode Text="Vincent">
                    <asp:TreeNode Text="Vynn" />
                    <asp:TreeNode Text="Vianne" />
                </asp:TreeNode>
                <asp:TreeNode Text="Maverick" />
            </Nodes>
        </asp:TreeView>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    </form>
</body>
</html>

CODE BEHIND:

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text.RegularExpressions;

namespace WebFormDemo
{
    public partial class TreeView : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void Button1_Click(object sender, EventArgs e) {

            bool found = false;
            foreach (TreeNode node in TreeView1.Nodes) {
                found = IsNodeMatch(node, TextBox1.Text);

                if (!found) {
                    foreach (TreeNode childNode in node.ChildNodes) {
                        found = IsNodeMatch(childNode, TextBox1.Text);
                    }
                }
            }

            if (!found)
                Response.Write("Search did not match anything.");

        }

        private bool IsNodeMatch(TreeNode node, string searchText) {
            if (node.Text.ToLower().Equals(searchText.ToLower())) {
                node.Text = string.Format("<div style='color:#ff9900' >{0}</div>", node.Text);
                return true;
            }
            else {
                node.Text = ParseText(node.Text);
            }

            return false;
        }

        private string ParseText(string text) {
            string pattern = "<div(.*?)>(.*?)</div>";
            var regex = new Regex(pattern);

            var match = regex.Match(text);
            if (match.Length > 0)
                return match.Groups[2].Value;

            return text;
        }

    }
}

The key there is the ParseText() that is used within the else block to trim down the div element.