Hi,
I need Tree structure View. I can do the things Folder under files but I need folder under another folder after that file. Multiple hierarchy in Tree view. Can please help me out sample and explanation and how do we form the data in Dynamically.below is my sample
Kannan.
Kannan,
Which platform do you need a solution for? Are you using WPF, Silverlight, Windows Forms, ASP.NET, or jQuery?
We are using MVC 4 and JQuery. Fetch data and store it into List then pass the JSon data to JQuery and Bind it .
Can you please guide me .
Hello Kannan R,
Can you please specify which control you would like this implemented in. From the description in your first post, it seems that you may be looking for the igTree or the igHierarchicalGrid. You can view samples of these controls at http://igniteui.com/ . Also, you mentioned a sample in your first post, however, nothing was attached. Can you kindly provide the sample you mentioned in your reply. I look forward to hearing from you.
Thanks for the mail. I attached the Sample for your reference .Now my concern is how to populate the data dynamically . In this sample we hard coded . I want these information fetch into DB and load <!DOCTYPE html><html><head> <title>Tree View</title> <script src="script/jquery-1.9.1.min.js"></script> <script src="script/jquery-ui.min.js"></script> <style type="text/css">.treeview { color: #888; font-family: 'Linux Biolinum O'; padding: 15px;}.treeview:nth-child(even){background:#ccc;}.tree-element { padding-left: 26px; cursor: pointer; font-weight: 600; }.folder{background:url(./images/folder-small.png) 0 0 no-repeat;}.tree-element * { font-weight: 300;}.inline-block { display: inline-block; border: 1px solid red;}.tree-indicator { left: -40px; margin-right: -22px; position: relative; float: left; font-size: small;}.test .tree-indicator { float: none;}.align-right { float: right;}.align-right::after { clear: both;}.treeview a { display: block; color: #888; padding-bottom: 8px; text-decoration: none;}.new-unread { display: inline-block; border-radius: 50%; height: 60%; width: 20px; text-align: center; font-size: 7pt; background-color: purple; font-weight: bold; color: white; vertical-align: baseline;}.ppt{background:url(./images/ppt.png) 0 0 no-repeat;padding: 0 0 0 20px;}.word{background:url(./images/word.png) 0 0 no-repeat;padding: 0 0 0 20px;}.pdf{background:url(./images/pdf.png) 0 0 no-repeat;padding: 0 0 0 20px;}</style><script type="text/javascript"> $(function() { $('.treeview .tree-element').addClass('collapsed').children('.tree-element').css('display', 'none') }); $(function() { $('.treeview .tree-element') .click(function(evt) { evt.stopPropagation(); $(this).children('.tree-element').slideToggle().promise().done(function() { var isCollapsed = $(this).css('display') == 'none'; $(this) .parent() .removeClass('collapsed expanded') .addClass(isCollapsed ? 'collapsed' : 'expanded') .children('.tree-indicator') .html(isCollapsed ? $(this).closest('.treeview').attr('data-ui-collapsed-indicator') : $(this).closest('.treeview').attr('data-ui-expanded-indicator') ); }); }).each(function() { var c = $(this).hasClass('collapsed'); if (c) $(this).children('.tree-element').hide(); $(this).prepend( $('<span>') .addClass('tree-indicator') .html($(this).closest('.treeview').attr('data-ui-' + (c ? 'collapsed' : 'expanded') + '-indicator')) .css('opacity', $(this).children('.tree-element').length ? 1 : 0) ); }); });</script></head><body><div class="treeview" style="width: 200px" data-ui-collapsed-indicator="▶" data-ui-expanded-indicator="▼"> <div class="tree-element folder">Folder1 <div class="tree-element folder">Sub Folder <div class="tree-element"> <a href="#" class="ppt">File.PPT</a> <a href="#" class="word">File.DOC</a> <a href="#" class="pdf">File.PDF</a> </div> </div> </div> <div class="tree-element folder">Folder2 <div class="tree-element folder">Sub Folder <div class="tree-element"> <a href="#" class="ppt">File.PPT</a> <a href="#" class="word">File.DOC</a> <a href="#" class="pdf">File.PDF</a> </div> </div> </div></div></body></html>
Attached, you will find a sample of an igTree in MVC as you requested. The data is fetched from the server side, then displayed in the Tree. Please let me know if this sample is a suitable example for you, and do not hesitate to contact me with any further questions.
Thanks for the mail. Its very useful but am not able to run because my target frame work is 4.0 but your sample web config mentioned 4.5
Hello Kannan,
I will be looking into how I might be able to get this sample working on your end as well. I will get back to you by the end of the day tomorrow with more information on this. In the meantime, please do not hesitate to contact me with more questions.
Please view the attached sample of the igTree using .NET Framework 4.0. Please let me know if you have any further questions.
Thanks for the mail and sorry for continues disturbing. While open the project faced issue .It seems again the package version problem am using VS 2010 and MVC 4