<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-11 form-group">
<label>Group</label>
<div id="group-tree-view" class="group-tree" data-bind="with: GroupTreeView">
<div class="row">
<a class="btn btn-success col-md-12 col-sm-12 col-xs-12" data-bind="visible:EnableToggle,click:collapsePicker">Groups</a>
</div>
<div class="row group-position" data-bind="visible:IsCollapsed()">
<input type="text" class="form-control" placeholder="Search Groups..." id="search-text" data-bind="visible:EnableSearch, value: SearchText, valueUpdate: 'keyup'">
<div class="text-center col-xs-12">
<a id="selectall" class="pull-left btn btn-link" data-bind="click: selectAll"><i class="fa fa-check padding-right6"></i>Select All</a>
<a id="UnselectAll" class="pull-left btn btn-link" data-bind="click: deselectAll"><i class="fa fa-remove padding-right6"></i>UnSelect All</a>
</div>
<div class="col-xs-12">
<div class="group-tree-view" data-bind="template: { name: 'group', foreach: DisplayGroups }">
<ul class="ul-nostyle" data-bind="visible: IsVisible()">
<li data-bind="attr: {'style' : Children().length == 0 ? 'padding-left: 7px' : 'padding-left: 0px'}" style="padding-left: 0px">
<i data-bind="visible: Children().length > 0, click: toggleNode, css:{'fa-plus':!ShowChildren(),'fa-minus':ShowChildren() }" class="fa is_clickable padding-right6 fa-minus"></i>
<input class="padding-right6" data-bind="checked: Selected,css:{'align-checkbox':Children().length == 0}" type="checkbox">
<span data-bind="text: Name">Engineering Dept</span>
<!-- ko if: ShowChildren() -->
<div data-bind="template: { name: 'group', foreach: Children }">
<ul class="ul-nostyle" data-bind="visible: IsVisible()">
<li data-bind="attr: {'style' : Children().length == 0 ? 'padding-left: 7px' : 'padding-left: 0px'}" style="padding-left: 0px">
<i data-bind="visible: Children().length > 0, click: toggleNode, css:{'fa-plus':!ShowChildren(),'fa-minus':ShowChildren() }" class="fa is_clickable padding-right6 fa-plus"></i>
<input class="padding-right6" data-bind="checked: Selected,css:{'align-checkbox':Children().length == 0}" type="checkbox">
<span data-bind="text: Name">Misc. (V-Portal) Group</span>
<!-- ko if: ShowChildren() --><!-- /ko -->
</li>
</ul>
<ul class="ul-nostyle" data-bind="visible: IsVisible()">
<li data-bind="attr: {'style' : Children().length == 0 ? 'padding-left: 7px' : 'padding-left: 0px'}" style="padding-left: 7px">
<i data-bind="visible: Children().length > 0, click: toggleNode, css:{'fa-plus':!ShowChildren(),'fa-minus':ShowChildren() }" class="fa is_clickable padding-right6 fa-plus" style="display: none;"></i>
<input class="padding-right6 align-checkbox" data-bind="checked: Selected,css:{'align-checkbox':Children().length == 0}" type="checkbox">
<span data-bind="text: Name">Engineering Group</span>
<!-- ko if: ShowChildren() --><!-- /ko -->
</li>
</ul>
<ul class="ul-nostyle" data-bind="visible: IsVisible()">
<li data-bind="attr: {'style' : Children().length == 0 ? 'padding-left: 7px' : 'padding-left: 0px'}" style="padding-left: 7px">
<i data-bind="visible: Children().length > 0, click: toggleNode, css:{'fa-plus':!ShowChildren(),'fa-minus':ShowChildren() }" class="fa is_clickable padding-right6 fa-plus" style="display: none;"></i>
<input class="padding-right6 align-checkbox" data-bind="checked: Selected,css:{'align-checkbox':Children().length == 0}" type="checkbox">
<span data-bind="text: Name">Aloha(Offshore) Group</span>
<!-- ko if: ShowChildren() --><!-- /ko -->
</li>
</ul>
</div>
<!-- /ko -->
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="/VPortal/Scripts/UserControls/GroupTreeView.js" type="text/javascript"></script>
<script id="group" type="text/html">
<ul class="ul-nostyle" data-bind="visible: IsVisible()">
<li data-bind="attr: {'style' : Children().length == 0 ? 'padding-left: 7px' : 'padding-left: 0px'}">
<i data-bind="visible: Children().length > 0, click: toggleNode, css:{'fa-plus':!ShowChildren(),'fa-minus':ShowChildren() }" class="fa is_clickable padding-right6"></i>
<input class="padding-right6" data-bind="checked: Selected,css:{'align-checkbox':Children().length == 0}" type="checkbox" />
<span data-bind="text: Name"></span>
<!-- ko if: ShowChildren() -->
<div data-bind="template: { name: 'group', foreach: Children }"></div>
<!-- /ko -->
</li>
</ul>
</script>
</div>
</div>
</div>
