0

I can’t create a tree view bootstrap from the list items, where did I go wrong? how to fix?

 <link type="text/css" rel="stylesheet" href="/_layouts/15/css/bootstrap-theme.min.css">
<link type="text/css" rel="stylesheet" href="/_layouts/15/css/bootstrap.min.css">
<script type="text/javascript" src="/_layouts/15/js/jquery-2.1.3.min.js"></script>

<style type="text/css">
.tree {
    width: 50%;
    height: 50%;
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#fbfbfb;
    border:1px solid #999;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative;
}
.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto;
}
.tree li::before {
    border-left:1px solid #999;
    bottom:100px;
    height:100%;
    top:0;
    width:1px;
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px;
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none;
}
.tree li.parent_li>span {
    cursor:pointer;
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0;
}
.tree li:last-child::before {
    height:25px;
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000;
}
</style>
<script type="text/javascript">
$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span');
    $('.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).find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
    var chil = $('.tree li.parent_li > span').parent('li.parent_li').find(' > ul > li');
    chil.css("display", "none");
});
</script>
<div class="tree well">
   <ul>
      <li>
          <span id="departmentTab" runat="server"></span>
           <ul>
              <li>
                  <span id="divisionTab" runat="server"></span>
              </li>
           </ul>
      </li>
  </ul>
</div>

 using (SPSite site = new SPSite(SPContext.Current.Web.Url))
                {
                    using (SPWeb web = site.OpenWeb())
                    {
                        web.AllowUnsafeUpdates = true;

                        SPList lists = web.Lists["Staff"];

                        SPListItemCollection oitems = lists.GetItems(new SPQuery()
                        {
                            Query = @""
                        });

                        foreach (SPListItem item in oitems)
                        {
                            string department = (item["Department"] != null) ? item["Department"].ToString() : "";
                            if (department != null && department != "") { 
                                HtmlGenericControl li = new HtmlGenericControl("li");
                                departmentTab.Controls.Add(li);
                                HtmlGenericControl anchor = new HtmlGenericControl("span");

                                anchor.Attributes.Add("href", "");
                                anchor.InnerText = department;

                                li.Controls.Add(anchor);
                            }

                            string div = (item["Division"] != null) ? item["Division"].ToString() : "";
                            if (div != null && div != "")
                            {
                                HtmlGenericControl li = new HtmlGenericControl("li");
                                divisionTab.Controls.Add(li);
                                HtmlGenericControl anchor = new HtmlGenericControl("span");

                                anchor.Attributes.Add("href", "");
                                anchor.InnerText = div;

                                li.Controls.Add(anchor);
                            }

                            }

                        }
                     }
                }

Results:

enter image description here

0

The problem is the core.css file SharePoint uses for base formatting. You will have to either create a seconday CSS file to reference that will override the core.css, or modify the bootstrap.css to conform to the SharePoint CSS. SharePoint is going to win everytime. You can use !important tags, but even those can be limited. You will just have to play with it until you can get it right. It is not the code, it is the styling clashing with SharePoint and the master page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.