how to show the node details in a treeview

Question

0.00/5 (No votes)

See more:

Hi

I have a treeview with following data for ex

-Asp.net
-Controls
-Textbox
+validators

so when user clicks on the textbox node i have to show in a label the complete details of the textbox and that label should come under the textbox only.

thanks in advance

Posted 9-Apr-12 22:50pm

lakshmichawala

Add a Solution

2 solutions

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)

Muralikrishna8811 · Answer 1 · 2012-04-09T23:01:00

Solution 1

Hi

Hi Check this code once for displaying properties with respective control

ASP.NET

<asp:TreeView ID="TreeView1" runat="server"
           onselectednodechanged="TreeView1_SelectedNodeChanged">
       <Nodes>
         <asp:TreeNode Text="TextBox"  >

         </asp:TreeNode>
         <asp:TreeNode Text="DropdownList"></asp:TreeNode>
         <asp:TreeNode Text="Button"></asp:TreeNode>
       </Nodes>
       </asp:TreeView>

In code behind file you need to write below code

C#

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
  {
      showControlDetails.Visible = true;
      TreeView rootview = (TreeView)sender;
      Control txtchck =null;

      switch (rootview.SelectedNode.Text)
      {
          case ("TextBox"):
              txtchck = new TextBox();
              break;
          case ("DropdownList"):
              txtchck = new DropDownList();
              break;
          case ("Button"):
              txtchck = new Button();
              break;

      }
      if (txtchck != null)
      {
          Type controlType = txtchck.GetType();

          PropertyInfo[] properties = controlType.GetProperties();

          foreach (PropertyInfo controlProperty in properties)
          {
              TreeNode tnd = new TreeNode();
              tnd.Text = controlProperty.Name;
              rootview.SelectedNode.ChildNodes.Add(tnd);

          }
      }
  }

Here this time it is just for adding sub nodes

I'll modify it and post here to show as tooltip

And you should import namespaces System.Reflection;
Here i did only for textbox you can modify it to fulfill your requirement
and i hope you know how to add nodes to treenode

All the Best

Posted 9-Apr-12 23:01pm

Muralikrishna8811

Updated 10-Apr-12 0:26am

v2

Comments

lakshmichawala 10-Apr-12 5:08am

Hi murali thanks for ur help .but the textbox properties should come in a label but not added to the treeview

Muralikrishna8811 10-Apr-12 5:11am

you mean whenever user selects node i.e TextBox

details should be displayed in list of labels in another side

i'm i right

Muralikrishna8811 10-Apr-12 5:13am

you can show in labels under textbox node

for this you need to add all labels to textbox node ha

Muralikrishna8811 10-Apr-12 5:19am

Hi place this code Under foreach loop

treenode tnd=new treenode();
tnd.text=controlProperty.Name;
treeview1.nodes[2].add(tnd);

lakshmichawala 10-Apr-12 5:23am

hi murali . when user clicks on the textbox the details of the textbox should come like howover...simply i can say like a tooltip.but i cannot user tooltip there

Muralikrishna8811 10-Apr-12 5:24am

U mean popup should come just under textbox node

Muralikrishna8811 10-Apr-12 5:25am

Yeah we can do whatever it requires but getting properties is main thing after that all are comes under presentation

Muralikrishna8811 10-Apr-12 5:29am

In that case my suggestion is just use accordian panels or something like that
it's more effective than tree structure I think

Its just suggestion only

lakshmichawala 10-Apr-12 5:29am

yes murali ...now ur right..how can i show like that..how can i proceed with this ..could u please guide me in this regard

Muralikrishna8811 10-Apr-12 5:30am

K I'll guide you sure.

Muralikrishna8811 10-Apr-12 5:32am

is that strict requirement to use treeview in this case

lakshmichawala 10-Apr-12 5:33am

thanks murali ...what all things i go with :-)

lakshmichawala 10-Apr-12 5:34am

yes murali

Muralikrishna8811 10-Apr-12 5:37am

k unfortunately we are unable to insert panels in treeview

so we need to go for another process

do u familiar with Jquery

lakshmichawala 10-Apr-12 5:42am

no murali..iam good at javascript

Muralikrishna8811 10-Apr-12 5:47am

k k javascript is enough
I'll post some sample code for your requirement

Muralikrishna8811 10-Apr-12 6:26am

Hi
I updated solution plz check it once

lakshmichawala 10-Apr-12 7:06am

Thanks murali ... iam in a meeting didnot see ur comment...i will also try with all possible cases....lets share my code if i achieve it.

Muralikrishna8811 10-Apr-12 7:28am

Sure

Muralikrishna8811 10-Apr-12 7:32am

did You check what I tried which I updated in solution

Muralikrishna8811 10-Apr-12 7:43am

Hiyou are doing it in static mode right i mean

Asp.net->Controls->TextBox

how you getting this process .from DB or this is entire in static

lakshmichawala 10-Apr-12 7:42am

hi murali i check ur code its just adding the properties as a node to selected node but popup is not comming na

Muralikrishna8811 10-Apr-12 7:44am

popup 'll come just beside node

and if popup displays. the below nodes'll not move to down
and popup is overlaps below nodes is it k for you

Muralikrishna8811 10-Apr-12 8:37am

HiAdd this div to your page then
<div id="showControlDetails1" style=" background-color:#136012; position:fixed;left:500px;top:600px; border-color:Red;">
dsfsdfsdfsdf
</div>

after that you need to add javascript code with Jquery reference files

Muralikrishna8811 10-Apr-12 8:43am

Hi I tried code for your requirement
and posted here in another solution plz check it once

let me know if there is any issues

Muralikrishna8811 · Answer 2 · 2012-04-10T02:41:00

Hi,

This is Updated Solution for displaying popup on client click

ASP.NET

<asp:treeview id="TreeView1" runat="server" xmlns:asp="#unknown">
      <nodes>
        <asp:treenode text="TextBox">

        </asp:treenode>
        <asp:treenode text="DropdownList"></asp:treenode>
        <asp:treenode text="Button"></asp:treenode>
      </nodes>
      </asp:treeview>

XML

<div id="showControlDetails1" style="   background-color:#136012;   position:fixed;left:500px;top:600px; border-color:Red;">
     dsfsdfsdfsdf
    </div>

After that you need to add javascript file

JavaScript

$(document).ready(function () {

    jQuery.fn.elementlocation = function () {
        var curleft = 0;
        var curtop = 0;

        var obj = this;

        do {
            curleft += obj.attr('offsetLeft');
            curtop += obj.attr('offsetTop');

            obj = obj.offsetParent();
        } while (obj.attr('tagName') != 'BODY');


        return ({ x: curleft, y: curtop });
    };
    $("#TreeView1 a").each(function () {
        $(this).click(function (eventObj) {

            var location = $(this).elementlocation();
            var x = eventObj.pageX - location.x;
            var y = eventObj.pageY - location.y;
            $.get("default8.aspx", { methodtype: "getProperties", controlname: $(this).text() }, function (data) {
                $("#showControlDetails1").html(data);
                $("#showControlDetails1").css('left', x);
                $("#showControlDetails1").css('top', y);
                $("#showControlDetails1").show();
            });

            return false;
        });
    });

    $("#showControlDetails1").mouseleave(function () {
        $("#showControlDetails1").hide();
    });
});

Here you need to change default8.aspx to your page name

And code behind file needs following code

C#

protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           if (Request.QueryString["methodtype"] != null)
           {
               if (Request.QueryString["methodtype"].ToString() == "getProperties")
               {
                   Response.Clear();
                   string cntname = Request.QueryString["controlname"].ToString();
                   Control txtchck = null;
                   string stresult = "";
                   switch (cntname)
                   {
                       case ("TextBox"):
                           txtchck = new TextBox();
                           break;
                       case ("DropdownList"):
                           txtchck = new DropDownList();
                           break;
                       case ("Button"):
                           txtchck = new Button();
                           break;

                   }
                   if (txtchck != null)
                   {
                       Type controlType = txtchck.GetType();

                       PropertyInfo[] properties = controlType.GetProperties();

                       foreach (PropertyInfo controlProperty in properties)
                       {
                           stresult = stresult + controlProperty.Name+"<br />";
                       }

                   }
                   Response.Write(stresult);
                   Response.End();
               }
           }

       }
   }

I hope you know how to add Jquery reference to page

All the Best