when you click on the section2, the whole HTML layout is blown apart. the actual behaviour on the page with splitter is quite worse.
this only happens when
<div id="orgSchlDgExmSchdl" style="min-height:400px;"></div>
and it is not instantiates/initialized into actual grid object, the proble also does not occur when div tag is initialized into grid object.
<head>
<script type="text/javascript">
$(document).ready(function () {
//collapsible management
$("#panelbar").kendoPanelBar({
//expandMode: "single"
});
});
</script>
</head>
<body>
<ul id="panelbar">
<li class="k-state-active">
<span> Section1 </span>
<div>
Elements under section one
</div>
</li>
<li>
<!--<span>Section 2</span>
<div> Elements under section2</div>-->
<span>Data Entry Grid</span>
<div id="orgSchlDgExmSchdl" style="min-height:400px;"></div>
</li>
</ul> <!-- end Panelbar-->
</body>
</html>
this only happens when
<div id="orgSchlDgExmSchdl" style="min-height:400px;"></div>
and it is not instantiates/initialized into actual grid object, the proble also does not occur when div tag is initialized into grid object.
<head>
<script type="text/javascript">
$(document).ready(function () {
//collapsible management
$("#panelbar").kendoPanelBar({
//expandMode: "single"
});
});
</script>
</head>
<body>
<ul id="panelbar">
<li class="k-state-active">
<span> Section1 </span>
<div>
Elements under section one
</div>
</li>
<li>
<!--<span>Section 2</span>
<div> Elements under section2</div>-->
<span>Data Entry Grid</span>
<div id="orgSchlDgExmSchdl" style="min-height:400px;"></div>
</li>
</ul> <!-- end Panelbar-->
</body>
</html>