ksd123
asked on
Tree structure using Jquery / Javascript / Html
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/aspne t-ajax/int roduction- common_cha nges_backw ard_compat ibility.ht ml).
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
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/aspne
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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-c licked ');
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
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-c licked '); 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.
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
I would still suggest making a quick sample page and testing it first.
ASKER
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?
>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.
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.
ASKER
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).
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).
ASKER
Thank you so much
First thing I came across was http://jquery-plugins.net/tag/treeview