Welcome to my blog.....
In this articles we discuss how to bind the tree structure in asp.net MVC using bootstrap through
programmatically.
In this article i'm considering a scenario, for an organization building project management hierarchy.
From below screen shot, PorfolioManager is the top level node and this hierarchy drill downs till team leader and team member.
.
Source Code: View:
1. Jquery
2. Bootstrap
Above two , you can refer from CDN
3. BootstrapTreetables.css can download from
bootstraptreetable.css
JS/CSS <script src="~/scripts/CustomContent/script/jquery-1.10.2.min.js"></script> <link href="~/scripts/CustomContent/css/bootstrap.min.css" rel="stylesheet"></link> <link href="~/scripts/CustomContent/css/BootstrapTreetable.css" rel="stylesheet"></link> <style> .tree li:last-child::before { height: 100% !important; } .tree { padding: 0px !important; } #myPortfolio { width: 100% !important; } </style> <script type ="text/javascript"> $(document).ready(function () { varselectedparentnode = null; $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Expand this branch'); $('.tree li ul>li').hide(); $('.tree li.parent_li> span').on('click', function (e) { var children = $(this).parent('li.parent_li').find(' >ul> li'); if (children.is(":visible")) { children.hide('fast'); $(this).attr('title', 'Expand this branch').find(' >i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else { children.show('fast'); $(this).attr('title', 'Collapse this branch').find(' >i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); } e.stopPropagation(); }); }); </script>
<h2> Binding tree structure Hirearchy </h2>
<div class="col-md-6">
<div class="tree well">
@if (ViewData["PortfolioHierarchy"] != null)
{
@Html.Raw(@ViewData["PortfolioHierarchy"]);
}
</div>
</div>
<div class="col-md-6">
<div>
</div>
</div>
C# code:
Entity Model
Controller public class PortfolioHierarchyController : Controller { // GET: PortfolioHierarchy public ActionResult Index() { string strHierarchy = CreatePortfolioNode(GetPortfolioData()); ViewData["PortfolioHierarchy"] = strHierarchy; return View(); } private string CreatePortfolioNode(List<PortfolioHierarchy> lstPortfoliohierarchy) { StringBuilder strHierarchy = new StringBuilder(); foreach (var _portfolio in lstPortfoliohierarchy.Select(x => new { x.PortfolioID, x.PortfolioName }).Distinct()) { strHierarchy.Append("<ul><li>"); strHierarchy.Append("<span id=" + _portfolio.PortfolioID + "><i class=icon-plus-sign></i>"); strHierarchy.Append(_portfolio.PortfolioName); strHierarchy.Append("</span>"); string strProgramNode = CreateProgramNode(lstPortfoliohierarchy, _portfolio.PortfolioID); if (!string.IsNullOrEmpty(strProgramNode)) { strHierarchy.Append(strProgramNode); } strHierarchy.Append("</li></ul>"); } return strHierarchy.ToString(); } private string CreateProgramNode(List<PortfolioHierarchy> _lstPortfoliohierarchy, int portfolioid) { StringBuilder strProgramHierarchy = new StringBuilder(); foreach (var _program in _lstPortfoliohierarchy.Where(x => x.PortfolioID == portfolioid).Select(x => new { x.ProgramID, x.ProgramName }).Distinct()) { strProgramHierarchy.Append("<ul><li>"); strProgramHierarchy.Append("<span id=" + _program.ProgramID + "><i class=icon-plus-sign></i>"); strProgramHierarchy.Append(_program.ProgramName); strProgramHierarchy.Append("</span>"); string strProjectNode = CreateProjectNode(_lstPortfoliohierarchy, _program.ProgramID, portfolioid); if (!string.IsNullOrEmpty(strProjectNode)) { strProgramHierarchy.Append(strProjectNode); } strProgramHierarchy.Append("</li></ul>"); } return strProgramHierarchy.ToString(); } private string CreateProjectNode(List<PortfolioHierarchy> _lstPortfoliohierarchy, int ProgramID, int portfolioid) { StringBuilder strprojectHierarchy = new StringBuilder(); foreach (var _project in _lstPortfoliohierarchy.Where(x => x.PortfolioID == portfolioid && x.ProgramID == ProgramID).Select(x => new { x.ProjectID, x.ProjectName }).Distinct()) { strprojectHierarchy.Append("<ul><li>"); strprojectHierarchy.Append("<span id=" + _project.ProjectID + "><i class=icon-plus-sign></i>"); strprojectHierarchy.Append(_project.ProjectName); strprojectHierarchy.Append("</span>"); string strProjectNode = CreateProjectManagerNode(_lstPortfoliohierarchy, _project.ProjectID, ProgramID, portfolioid); if (!string.IsNullOrEmpty(strProjectNode)) { strprojectHierarchy.Append(strProjectNode); } strprojectHierarchy.Append("</li></ul>"); } return strprojectHierarchy.ToString(); } private string CreateProjectManagerNode(List<PortfolioHierarchy> _lstPortfoliohierarchy, int projectid, int ProgramID, int portfolioid) { StringBuilder strprojectManagerHierarchy = new StringBuilder(); foreach (var _projectmanager in _lstPortfoliohierarchy.Where(x => x.PortfolioID == portfolioid && x.ProgramID == ProgramID && x.ProjectID == projectid).Select(x => new { x.ProjectManagerID, x.ProjectManagerName }).Distinct()) { strprojectManagerHierarchy.Append("<ul><li>"); strprojectManagerHierarchy.Append("<span id=" + _projectmanager.ProjectManagerID + "><i class=icon-plus-sign></i>"); strprojectManagerHierarchy.Append(_projectmanager.ProjectManagerName); strprojectManagerHierarchy.Append("</span>"); string strTeamLeaderNode = CreateTeamLeaderNode(_lstPortfoliohierarchy, _projectmanager.ProjectManagerID, projectid, ProgramID, portfolioid); if (!string.IsNullOrEmpty(strTeamLeaderNode)) { strprojectManagerHierarchy.Append(strTeamLeaderNode); } strprojectManagerHierarchy.Append("</li></ul>"); } return strprojectManagerHierarchy.ToString(); } private string CreateTeamLeaderNode(List<PortfolioHierarchy> _lstPortfoliohierarchy, int projectmanagerid, int projectid, int ProgramID, int portfolioid) { StringBuilder strTeamleaderHierarchy = new StringBuilder(); foreach (var _teamleader in _lstPortfoliohierarchy.Where(x => x.PortfolioID == portfolioid && x.ProgramID == ProgramID && x.ProjectID == projectid && x.ProjectManagerID == projectmanagerid).Select(x => new { x.TeamLeaderID, x.TeamLeaderName }).Distinct()) { strTeamleaderHierarchy.Append("<ul><li>"); strTeamleaderHierarchy.Append("<span id=" + _teamleader.TeamLeaderID + "><i class=icon-plus-sign></i>"); strTeamleaderHierarchy.Append(_teamleader.TeamLeaderName); strTeamleaderHierarchy.Append("</span>"); string strTeamLeaderNode = CreateTeamNode(_lstPortfoliohierarchy, _teamleader.TeamLeaderID, projectmanagerid, projectid, ProgramID, portfolioid); if (!string.IsNullOrEmpty(strTeamLeaderNode)) { strTeamleaderHierarchy.Append(strTeamLeaderNode); } strTeamleaderHierarchy.Append("</li></ul>"); } return strTeamleaderHierarchy.ToString(); } private string CreateTeamNode(List<PortfolioHierarchy> _lstPortfoliohierarchy, int teamleaderid, int projectmanagerid, int projectid, int ProgramID, int portfolioid) { StringBuilder strTeamHierarchy = new StringBuilder(); foreach (var _team in _lstPortfoliohierarchy.Where(x => x.PortfolioID == portfolioid && x.ProgramID == ProgramID && x.ProjectID == projectid && x.ProjectManagerID == projectmanagerid && x.TeamLeaderID == teamleaderid).Select(x => new { x.TeamMemberID, x.TeamMemberName }).Distinct()) { strTeamHierarchy.Append("<ul><li>"); strTeamHierarchy.Append("<span id=" + _team.TeamMemberID + "><i class=icon-leaf></i>"); strTeamHierarchy.Append(_team.TeamMemberName); strTeamHierarchy.Append("</span>"); strTeamHierarchy.Append("</li></ul>"); } return strTeamHierarchy.ToString(); } private List<PortfolioHierarchy> GetPortfolioData() { PortfolioHierarchy objportfolio; List<PortfolioHierarchy> lstPortfolio = new List<PortfolioHierarchy>(); objportfolio = new PortfolioHierarchy(); objportfolio.PortfolioID = 1; objportfolio.PortfolioName = "Portfolio : Heavy machineries and Medical Equipment"; objportfolio.ProgramID = 1; objportfolio.ProgramName = "Program : Heavy machineries"; objportfolio.ProjectID = 1; objportfolio.ProjectName = "Project : General Motor"; objportfolio.ProjectManagerID = 1; objportfolio.ProjectManagerName = "ProjectManager : Mike"; objportfolio.TeamLeaderID = 4; objportfolio.TeamLeaderName = "TeamLeader : Justin"; objportfolio.TeamMemberID = 8; objportfolio.TeamMemberName = "TeamMember :Anne"; lstPortfolio.Add(objportfolio); objportfolio = new PortfolioHierarchy(); objportfolio.PortfolioID = 1; objportfolio.PortfolioName = "Portfolio : Heavy machineries and Medical Equipment"; objportfolio.ProgramID = 1; objportfolio.ProgramName = "Program : Heavy machineries"; objportfolio.ProjectID = 1; objportfolio.ProjectName = "Project : General Motor"; objportfolio.ProjectManagerID = 1; objportfolio.ProjectManagerName = "Mike"; objportfolio.TeamLeaderID = 5; objportfolio.TeamLeaderName = "TeamLeader : Ryno"; objportfolio.TeamMemberID = 7; objportfolio.TeamMemberName = "TeamMember : subhash"; lstPortfolio.Add(objportfolio); objportfolio = new PortfolioHierarchy(); objportfolio.PortfolioID = 1; objportfolio.PortfolioName = "Portfolio : Heavy machineries and Medical Equipment"; objportfolio.ProgramID = 2; objportfolio.ProgramName = "Program : Medical Equipment"; objportfolio.ProjectID = 2; objportfolio.ProjectName = "Project : GE HealthCare"; objportfolio.ProjectManagerID = 2; objportfolio.ProjectManagerName = "ProjectManager:Charles"; objportfolio.TeamLeaderID = 6; objportfolio.TeamLeaderName = "TeamLeader: Michael"; objportfolio.TeamMemberID = 9; objportfolio.TeamMemberName = "Satish"; lstPortfolio.Add(objportfolio); return lstPortfolio; } }
Download the source code :
Click here
No comments:
Post a Comment