Question

I wanted to create a tree view using MVC3 control toolkit and bind the data from the database dynamically to the recursive list.

Answer 1

I finally found better solution for this question..

I used jquery to create the tree which was much helpful for me.

After seaching for long time, I found something like this:

public class TreeView
    {
        public static List<Model> GetAllCategories()
        {
            string query="select * from tableName";
            string connString = "connectionString";
            var itemList = new List<Model>();

        using (var con = new SqlConnection(connString))
        {

            using (var cmd = new SqlCommand(qry, con))
            {
                con.Open();
                SqlDataReader reader = cmd.ExecuteReader();
                if (reader.HasRows)
                {
                    while (reader.Read())
                    {
                           //added my code here to get the data..
                        itemList.Add(
                             new Model(){
                                categoryId= reader.GetInt32(reader.GetOrdinal("categoryId"))
                             )};
                    }
                }
            }
        }
        return itemList;
    }        
}

In the controller I wrote my code as:

    public ActionResult Index()
    {
        List<Model> itemList= new List<Model>();
        itemList = TreeView.GetAllCategories();


            var president = itemList.
                              Where(x => x.Model.PAId == 0).ToList(); //    
            foreach (var item in president)
            {
                SetChildren(item, itemList);
            }
            return View(president);
        }

    private void SetChildren(Model model, List<Model> itemList)
    {
        var childs = itemList.
            Where(x => (x.Model.PAId == model.categoryId)).ToList();
        if (childs.Count > 0)
        {
            foreach (var child in childs)
            {
                SetChildren(child, itemListList);
                model.Categories.Add(child);
            }
        }
    }

Index.cshtml :

<div id="divtree">
    @foreach (var item in Model)
    {
        <ul id="tree" >
            <li>
                @Html.ActionLink(item.Model.categoryName, "Action")
                @Html.Partial("Childrens", item)
            </li>
        </ul>
    }
</div>

<script type="text/javascript">
    $(function () {
        $('#treeViewContent').load('@Url.Action("CreateCategory","Category")');

        $('#divtree').jstree({
            "plugins": ["themes", "html_data", "ui", "cookies"]
        })
        .bind('loaded.jstree', function () {
            $(this).jstree('open_all');
        });
    });
</script>

Childrens.cshtml:

@foreach (var item in Model.Categories)
{ 
    <ul>
    @if (item != null)
    {        
        <li>
            @Html.ActionLink(item.Model.categoryName, "Action") 
            @if (item.Categories.Count > 0)
            {         
                @Html.Partial("Childrens", item)           
            }
        </li>
    }
    </ul> 
}

and finally got tree like this: