madhu goud

madhu goud

  • NA
  • 36
  • 14.3k

How to bind data on treeview node click in mvc 4

Jun 16 2016 5:07 AM
am binding tree view based on table in sql server,
i have added column description to my table now i want bind on tree view node click,
 
i have tried
html helper
 
 
@helper GetTreeView(List<MvcApplication1.tblEmployee> siteMenu, int parentID)
{
foreach (var i in siteMenu.Where(a => a.ReportsTo.Equals(parentID)))
{
<li>
@{var submenu = siteMenu.Where(a => a.ReportsTo.Equals(i.EmpID)).Count();}
@if (submenu > 0)
{
<span class="collapse collapsible">&nbsp;</span>
}
else
{
<span style="width:15px; display:inline-block">&nbsp;</span>
}
<span>
<a>@i.Name</a>
</span>
@if (submenu > 0)
{
<ul>
@Treeview.GetTreeView(siteMenu, i.EmpID)
@* Recursive Call for Populate Sub items here*@
</ul>
}
</li>
}
}
 
controller class
public ActionResult Index()
{
List<tblEmployee> all = new List<tblEmployee>();
using (TestDemoEntities dc = new TestDemoEntities())
{
all = dc.tblEmployees.OrderBy(a => a.ReportsTo).ToList();
}
return View(all);
}
 
 
 
view
 
 
<div class="treeview">
@if (Model != null && Model.Count() > 0)
{
<ul>
@Treeview.GetTreeView(Model, Model.FirstOrDefault().ReportsTo)
</ul>
<div id="desc">
<p></p>
</div>
}
</div>
</div>
@* Here We need some Jquery code for make this treeview collapsible *@
@section Scripts{
<script>
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".collapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
</script>
 
 
 how to bind description on tree node click
 

Answers (3)