Step one - install and configure files

• Install required files via Nuget
• Change YOUR_ID with the id of your control in CSS file.
• Change URL to the SharkDev.TreeView.png in SharkDev.TreeView.css. If you have multiple SharkTree helpers on the same page you can configure style indvidual for each one - just change ID before CSS class name. If you want to apply same style on all SharkTree instances just remove ID on each line in CSS file.
• Reference SharkDev.MVC.dll and SharkDev.Web.Controls.dll in a project

Step two - prepare a data

Your data looks something like:

Create a collection of nodes (class Node)

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            Dictionary attributes = new Dictionary() {
                    { "name", "shark" },
                    { "surname", "Dev" },
                    { "son", "The Rock" }
                };

            List<Node> lstTreeNodes = new List<Node>();
            lstTreeNodes.Add(new Node() { Id = "3", Term = "Lizard", ParentId = "1" });
            lstTreeNodes.Add(new Node() { Id = "12", Term = "Horse", ParentId = "9" });
            lstTreeNodes.Add(new Node() { Id = "8", Term = "Tweetie", ParentId = "7" });
            lstTreeNodes.Add(new Node() { Id = "1", Term = "Reptile" });
            lstTreeNodes.Add(new Node() { Id = "2", Term = "Mammal" });            
            lstTreeNodes.Add(new Node() { Id = "4", Term = "Snake", ParentId = "1" });
            lstTreeNodes.Add(new Node() { Id = "5", Term = "Bird", ParentId = "1" });
            lstTreeNodes.Add(new Node() { Id = "10", Term = "Bovine", ParentId = "2" });
            lstTreeNodes.Add(new Node() { Id = "6", Term = "Salamander", ParentId = "3" });
            lstTreeNodes.Add(new Node() { Id = "7", Term = "Canary", ParentId = "5" });            
            lstTreeNodes.Add(new Node() { Id = "9", Term = "Equine", ParentId = "2" });
            lstTreeNodes.Add(new Node() { Id = "14", Term = "Cow", ParentId = "10" });
            lstTreeNodes.Add(new Node() { Id = "11", Term = "Canine", ParentId = "2" });            
            lstTreeNodes.Add(new Node() { Id = "13", Term = "Zebra", ParentId = "9" });            
            lstTreeNodes.Add(new Node() { Id = "15", Term = "Bessie", ParentId = "14", Attributes = attributes  });
            ViewBag.HeaderTree = lstTreeNodes;
            return View();
        }
}

Step three - configure helper extension on a view

@using SharkDev.MVC
@using SharkDev.Web.Controls.TreeView.Model
@{
    ViewBag.Title = "SharkTree - Home Page";
}
<link href="~/Content/SharkDev.TreeView.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/SharkDev.treeView.js"></script>

@Html.SharkDev().TreeView(settings =>   {
    settings.Id = "treeViewContainer";
    settings.Header.Text = "Tree root - Animal";
    settings.Header.Visible = true;
    settings.Header.Expanded = true;
    settings.ClientHandlers.ContentSelect = "function (e) { console.log(e); }";
    settings.AutoCompleteHandler = Url.Content("~/Home/GetBySample");
    settings.Height = 300;
    settings.Width = 270;
    settings.DataOnClient = true;
}).GetContent(ViewBag.HeaderTree)

Step four - use it