How to Create TreeView with dynamic CheckBox using jQuery jstree plugin in ASP.Net MVC

Last Reply on Mar 15, 2016 10:07 AM By Shashikant

Posted on Mar 11, 2016 05:08 AM

How to Create Treeview with Checkbox Dyanamically Using MVC Razor.

 

I Would Like To Display Treeview using MVC Razor with Chekbox, it Shows Data From Two Tables when Click On Head Of Tree it Display Data on Node Using Head Node ID.

You are viewing reply posted by: Shashikant on Mar 15, 2016 10:07 AM.
Posted on Mar 15, 2016 10:07 AM Modified on on Apr 04, 2016 10:02 AM

Here I have created sample that will help you out.

and Get the the Themes Folder(Used for CSS) from below link

https://github.com/vakata/jstree/tree/master/dist

Index.aspx(View)

<div>
    <style type="text/css">
        html
        {
            margin: 0;
            padding: 0;
            font-size: 62.5%;
        }
        body
        {
            max-width: 800px;
            min-width: 300px;
            margin: 0 auto;
            padding: 20px 10px;
            font-size: 14px;
            font-size: 1.4em;
        }
        h1
        {
            font-size: 1.8em;
        }
        .demo
        {
            overflow: auto;
            border: 1px solid silver;
            min-height: 100px;
        }
    </style>
    <link rel="stylesheet" href="themes/default/style.min.css" />
    <div id="ajax" class="demo">
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $('#ajax').jstree({
            'plugins': ["defaults", "checkbox"],
            'core': {
                'data': {
                    "themes": {
                        "responsive": true
                    },
                    "url": "Models/TreeData.ashx",
                    "dataType": "json"
                }
            }
        });      
    </script>
</div>

TreeController(Controller)

public ActionResult Index()
{
    return View();
}

TreeData(HttpHandler)

public class TreeData : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string json = GetTreedata();
        context.Response.ContentType = "text/json";
        context.Response.Write(json);
    }

    private string GetTreedata()
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] {
            new System.Data.DataColumn("Id"),
            new System.Data.DataColumn("Text"),
            new System.Data.DataColumn("ParentId")
             
    });
        dt.Rows.Add(1, "IT", 0);
        dt.Rows.Add(2, "David", 1);
        dt.Rows.Add(3, "Jhon", 1);
        dt.Rows.Add(4, "HR", 0);
        dt.Rows.Add(5, "Kevin", 4);
        dt.Rows.Add(6, "Marry", 4);
        dt.Rows.Add(7, "Marketing", 0);
        dt.Rows.Add(8, "Todd", 7);
        dt.Rows.Add(9, "Andrea", 7);
        dt.Rows.Add(10, "Adam", 7);

        Node root = new Node { id = "root", children = { }, text = "root" };
        System.Data.DataView view = new System.Data.DataView(dt);
        view.RowFilter = "ParentId=0";
        foreach (System.Data.DataRowView kvp in view)
        {
            string parentId = kvp["Id"].ToString();
            Node node = new Node { id = kvp["Id"].ToString(), text = kvp["text"].ToString() };
            root.children.Add(node);
            AddChildItems(dt, node, parentId);

        }
        return (new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(root));
    }

    private void AddChildItems(System.Data.DataTable dt, Node parentNode, string ParentId)
    {
        System.Data.DataView viewItem = new System.Data.DataView(dt);
        viewItem.RowFilter = "ParentId=" + ParentId;
        foreach (System.Data.DataRowView childView in viewItem)
        {
            Node node = new Node { id = childView["Id"].ToString(), text = childView["text"].ToString() };
            parentNode.children.Add(node);
            string pId = childView["Id"].ToString();
            AddChildItems(dt, node, pId);
        }
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Node(Model)

public class Node
{
    public Node()
    {
        children = new System.Collections.Generic.List<Node>();
    }

    public string id { get; set; }

    public string text { get; set; }

    public System.Collections.Generic.List<Node> children { get; set; }
}

Screenshot