This is a migrated thread and some comments may be shown as answers.

data-template re rendering on Change

4 Answers 50 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
David
Top achievements
Rank 1
David asked on 07 May 2015, 03:08 AM

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

Sort by
0
Petyo
Telerik team
answered on 08 May 2015, 03:35 PM
Hello David,

This seems like a regression on our side. I filed for further investigation here.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Anthony
Top achievements
Rank 2
answered on 05 Jun 2015, 07:20 PM
I have the exact same issue. John, did you find a work around?
0
Petyo
Telerik team
answered on 08 Jun 2015, 10:21 AM
Hi Anthony,

the issue was fixed shortly after being reported. You should upgrade to the latest internal build, it includes it. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Anthony
Top achievements
Rank 2
answered on 08 Jun 2015, 01:39 PM
Thanks! The latest internal build did indeed fix the issue.
Tags
MVVM
Asked by
David
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Anthony
Top achievements
Rank 2
Share this question
or