Kendo PanelBar with custom item styling

by Kishore Sahasranaman

HTML

<script src="https://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.3.930/styles/kendo.default.min.css">
<ul class="doctypecontainer noselect">
	<li style="clear:both;">
		<span>Truck Freight Bill (1)</span>

		<div class="doctypecontainercontent">
			<div class="docdatelabel"><input type="checkbox" />10/27/2015</div>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 1</span></li>
                <li><input type="checkbox" /><span>Page 2</span></li>
                <li><input type="checkbox" /><span>Page 3</span></li>
            </ul>
            <ul class="pagelist">
               <li><input type="checkbox" /><span>Page 4</span></li>
                <li><input type="checkbox" /><span>Page 5</span></li>
                <li><input type="checkbox" /><span>Page 6</span></li>
            </ul>

			<div class="docdatelabel"><input type="checkbox" />11/15/2015</div>
			<ul class="pagelist">
				<li><input type="checkbox" /><span>Page 1</span></li>
				<li><input type="checkbox" /><span>Page 2</span></li>
				<li><input type="checkbox" /><span>Page 3</span></li>
			</ul>
                
			<div class="docdatelabel"><input type="checkbox" />11/21/2015</div>
			<ul class="pagelist">
				<li><input type="checkbox" /><span>Page 1</span></li>
				<li><input type="checkbox" /><span>Page 2</span></li>
				<li><input type="checkbox" /><span>Page 3</span></li>
			</ul>
				
			<span style="clear:left; display:block;"></span>
		</div>

	</li>
</ul>

CSS

/* results tree */
.k-panelbar > .k-item > .k-link {
	line-height:normal;
}
.doctypecontainer  {
	margin-bottom:3px;
	margin:5px;
	width:220px;
}
.doctypecontainer > li > .doctypecontainercontent {
	padding: 5px 5px 2px 5px;
}
ul.doctypecontainer > li >span.k-header {
	padding:5px !important;
}

.pagelist {
	padding-bottom:5px;
	list-style-type:none;
	padding-left:10px;
    float:left;
}
.pagelist li span {
	color:rgb(0, 153, 255);
	cursor:pointer;
}

.docdatelabel {
	clear: both;
}
.pagelink {
}
	
.k-panelbar .k-state-selected   {
	background-color: #eae8e8;
}

.k-panelbar .k-state-focused
{
	box-shadow:none !important;

}
.k-panelbar>li.k-state-default>.k-link.k-state-selected {
	color:#2e2e2e;
}

JavaScript

$(document).ready(function () {
			$(".doctypecontainer").kendoPanelBar({
				expandMode: "multiple"
			});

			var panelBar = $(".doctypecontainer").data("kendoPanelBar");
			//panelBar.expand($('[id^="docid"]'), false);
		});