Yesterday I upgraded a site to 2015 Q1 SP2 and started to have problems with a section of a page that was a dynamic bootstrap panel rendered using a data-template.
The Panels expand/collapse as the user clicks on them and inside they can edit the details of a Master Details object.
This worked fine but with 2015 Q1 SP2 when a detail is edited the change event seems to decide to re render the data-template and so the expand/collapse state (which was the css class "in") of the panel is lost.
I created the following test case in the Kendo Dojo and found the problem is not present until 2015 Q1 SP2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="view">
<input data-bind="value: title" />
<div class="panel-group collapsed" data-template="panel-template" data-bind="source: children"></div>
</div>
<script id="panel-template" type="text/x-kendo-template">
<div class="panel panel-default">
<div class="panel-heading clickable">
<b><span data-bind="text: first"></span></b>
</div>
<div class="panel-body collapse">
<input data-bind="value: second" />
</div>
</div>
</script>
<script>
$(document).ready(function () {
var model = kendo.observable({
title: "Header Property",
children: [{ first: "item1", second: "more1" },
{ first: "item2", second: "more2" },
{ first: "item3", second: "more3" }]
});
kendo.bind("#view", model);
// hook up expand/collapse handlers
$('.panel-heading.clickable').off("click");
$('.panel-heading.clickable').on("click", function (e) {
var panelBody = $(this).closest('.panel').children('.panel-body');
if ($(panelBody).hasClass('collapse') && $(panelBody).hasClass('in')) {
$(panelBody).removeClass('in');
}
else {
$(panelBody).addClass('in');
}
});
});
</script>
</body>
</html>
4 Answers, 1 is accepted
This seems like a regression on our side. I filed for further investigation here.
Regards,
Petyo
Telerik
Rank 2
the issue was fixed shortly after being reported. You should upgrade to the latest internal build, it includes it.
Regards,
Petyo
Telerik
Rank 2