Creating a tree view - asp.net-mvc-3

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

Step 1: Get the details from the db to the obj like List or ArrayList
Step 2: Assign the List to viewdata in controller Action Result like
viewdata["name"]=List;
Step 3: Assign the viewdata to another List in cshtml treeview
ArrayList col = (ArrayList)ViewData["name"];
#if (col != null)
{
Html.Telerik().TreeView()
.Name("HierarchyTreeView")
.Items(items =>
{
for (int i = 0; i < col.Count; i++)
{
items.Add()
.Text(col[i].ToString())
.Value().Selected(True)
.Items((subItem) =>
{
subItem.Add()
.Text(Child.ToString()) //Here place child value
.Value();
});
}
}).ClientEvents(events => events
.OnSelect("onSelect")
).Render();
}
Step 4: Using the List assign the value to the tree view nodes using nested for loop
Step 5: Write onselect client event and get the selected value from Javascript and assign it to the javascript method of Grid filter.
function onSelect(e) {
var HNKey = treeView().getItemValue(e.item);
var HNText = treeView().getItemText(e.item);
}
Hope this will give some idea to start your process then from this you can ask questions.

Answer 2

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: