Prerequisites

• .NET Framework 4.0 or above
• jQuery 1.8 or above
• jQuery UI 1.9.0 or above - required for the autocomplete

Included files

• SharkDev.TreeView.css
• SharkDev.TreeView.png
• SharkDev.treeView.js
• SharkDev.MVC.dll
• SharkDev.Web.Controls.dll

Properties

• Id - unique identifier.
• Header
  • Text - text that appears in a header.
  • Visible - header is visible or not.
  • Expanded - first level is expanded on init.
• ClientHandlers
  • ContentSelect - JavaScript function that triggers after node is selected. Function accepts one parameter which represent JavaScript object with three fields - selected ID, text and parent ID.
• AutoCompleteHandler - the function on the server side, which is triggered on typing (min 3 charactes). Returns JSON array in a format {Id : value, Text: value, ParentId : value }. On a server side you can use Node class.
• Height - height
• Width - width
• DataOnClient - serialize data on client. If it is true, you don't need AutoCompleteHandler.
• Attributes - dictionary of custom attributes. Will be serialized on a node itself, thus you can get it in ContentSelect handler.

Example

@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.Tree)

What is inside DLL-s

SharkDev.MVC.dll (namespace SharkDev.MVC) contains

• TreeView() - extension method that accepts TreeViewSettings
• TreeViewSettings - simple class that represents properties
• GetContent() - accepts Node collection

SharkDev.Web.Controls.dll (namespace SharkDev.Web.Controls) contains

• Node - class that represents every node

namespace SharkDev.Web.Controls.TreeView.Model
{
    public class Node
    {
        public string Id { get; set; }
        public string Term { get; set; }
        public string ParentId { get; set; }
        public IDictionary Attributes { get; set; }
    }
}