Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Tree structure using Jquery / Javascript / Html

Posted on 2013-10-25
8
Medium Priority
?
2,181 Views
Last Modified: 2013-10-29
Hi Experts,

My web application was developed using C#/ASP.NET and for each menu/tab we have a help icon and if we click on help icon it should open a new browser window and should redirect to corresponding contents page (Html files) highlighting left hand side node (contents) and displaying details in the right hand side, similar to this tree structure (http://www.telerik.com/help/aspnet-ajax/introduction-common_changes_backward_compatibility.html).

Foar eg: from application we pass Page name( Page1,Subpage1...etc) like this http://testserver/mauals/index.html?Page1.htm (Assuming user has clicked Help icon on  Page1) and it should Highlight Page1 on the left side of Tree structure and display contents in the right pane.

Can any one help me (with sample code) for the above task  using Jquery/Javascript/Html ?

Thanks in advance
0
Comment
Question by:ksd123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39602883
There was nothing on Google that fit your needs?

First thing I came across was http://jquery-plugins.net/tag/treeview
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39602888
You can do this on all serverside code (.NET), all client side (jquery/js) or a combo. I do this very thing on some of my internal db sites but I am using classic asp.    If using all serverside, you first need to grab the page name.  You can do this by hardcoding a variable called pageName for instance or what I do is grab the page name from the url.  I don't know how to do that in .net but this may help http://forums.asp.net/t/318949.aspx

Next on your tree code, you have to give the selected page some type of css class that will make it highlight.  

There are also plenty of jquery tree projects.  One is http://www.jstree.com/demo.  If you hard code a javascript variable called pageName, you can then use jquery to mark the appropriate li link with the class jstree-clicked and that will make the branch highlighted.

Using the jstree demo html
  <div id="demo1" class="demo" style="height:100px;">
	<ul>
		<li id="phtml_1">
			<a href="#">Root node 1</a>
			<ul>
				<li id="phtml_2">
					<a href="#">Child node 1</a>
				</li>
				<li id="phtml_3">
					<a href="#">Child node 2</a>
				</li>
			</ul>
		</li>
		<li id="phtml_4">
			<a href="#">Root node 2</a>
		</li>
	</ul>
</div>

Open in new window

You can targe an anchor branch (the 'a' uder the 'li') with jquery like this
  <div id="demo1" class="demo" style="height:100px;">
	<ul>
		<li id="phtml_1">
			<a href="#">Root node 1</a>
			<ul>
				<li id="phtml_2">
					<a href="#">Child node 1</a>
				</li>
				<li id="phtml_3">
					<a href="#">Child node 2</a>
				</li>
			</ul>
		</li>
		<li id="phtml_4">
			<a href="#">Root node 2</a>
		</li>
	</ul>
</div>

Open in new window

I have a working sample I made where I added css to make the targeted a link large.  You can see I hardcoded the page name to match the id of the li.http://jsbin.com/iSEcUBU/1/edit?html,css,js,output
$( document ).ready(function() {
  var pageName="phtml_2";
  $('div#demo1 ul li').each(function(){
    if($(this).attr('id')==pageName){
       $(this).find('a').addClass('jstree-clicked ');
    }
    
  });
});

Open in new window

If you need a little refresher or start with jquery spend a few hours on http://www.codecademy.com/learn
0
 

Author Comment

by:ksd123
ID: 39603695
Thanks padas for your sample code and appreciate your time.

1) I need one more help,in the tree structure left pane shows (Root node 1,child node 1 etc)  and  need  sample code that  shows Details of the Highlighted node  in the Right pane  using Jquery / HTML?

2)I  just want to double check with you that the below JQuery code for highlighting selection of node will be compatable with all browsers (ie7,ie8,ie9,google chrome etc) ?, I heard that  sometime's it may not work (Highlight) in some browsers. Can you suggest me on this ?

$(this).find('a').addClass('jstree-clicked ');
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39603991
I develop on a mac and personally don't support the older browsers in anything I do.  I understand the need for corporate account though.  

The first step is using the jstree demo in ie7,8 and 9.  If that works, then it should be good.   The code $(this).find('a').addClass('jstree-clicked '); is simply adding a class to the anchor so you end up with <a class="stree-clicked" href="#">something</a>.   Jquery 1.x supports the older ie browsers.  Jquery 2.x is lighter weight because they took out the support for older browsers.  So as long as you are using jquery 1.x all should be good.  

I would still suggest making a quick sample page and testing it first.
0
 

Author Comment

by:ksd123
ID: 39605442
I have created sample page and it's working fine  in all browsers and just need  sample code that  shows Details (static content) of the Highlighted node  in the Right pane  using Jquery / HTML?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39605481
>just need  sample code

http:Q_28277863.html#a39602888

If you take the time to recreate the sample code including html, project css and js, you will see this works.
0
 

Author Comment

by:ksd123
ID: 39608158
Thank you Padas.

I am just asking sample code for the right pane, in the tree structure if I click on "Child node 1" it should display some static content related to "Child node 1"in the right pane  similar to this (http://www.telerik.com/help/aspnet-ajax/introduction-common_changes_backward_compatibility.html).
0
 

Author Closing Comment

by:ksd123
ID: 39608161
Thank you so much
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question