data-template re rendering on Change

Thread is closed for posting
6 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Nov 2014

    Posted 06 May 2015 Link to this post

    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>

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 May 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. John
    John avatar
    1 posts
    Member since:
    Apr 2012

    Posted 14 May 2015 in reply to Petyo Link to this post

    Is there any workaround for this problem?

    In our application we change UI after mvvm binding and with re-binding bug it loses the changes.

    Thank you in advance.

  5. Anthony
    Anthony avatar
    6 posts
    Member since:
    Jul 2012

    Posted 05 Jun 2015 Link to this post

    I have the exact same issue. John, did you find a work around?
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 Jun 2015 Link to this post

    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!
     
  7. Anthony
    Anthony avatar
    6 posts
    Member since:
    Jul 2012

    Posted 08 Jun 2015 in reply to Petyo Link to this post

    Thanks! The latest internal build did indeed fix the issue.
Back to Top
Kendo UI is VS 2017 Ready