Controls are rendering multiple times

3 posts, 1 answers
  1. Michal
    Michal avatar
    11 posts
    Member since:
    Aug 2013

    Posted 30 Oct 2013 Link to this post

    Hello, I am building some kind of single page application with Kendo UI controls included on each view;

    Navigation between sites is written in javascript with no server page reload (main div container is re-rendering depending on the content via ajax call).

    Main view contains Kendo.Window, and looks like this:

    <div id="content">
        <!-- SOME PAGE CONTENT-->
    </div>
     
    <div id="Window">
        <div class="group">
            <div class="toolbar">
                <input type="WindowButton" id="Add" class="icon add" />
            </div>
            <!-- SOME WINDOW CONTENT-->
        <div>
    </div>
    My kendo window render function is placed in script file, which starts with the page, when it is "$(document).ready()"; here is the code:

    jQuery("#Window").kendoWindow({
                    "open": //some function,
                    "refresh": //some function,
                    "height": "340px",
                    "width": "550px",
                    "modal": true,
                    "title": //some title,
                    "draggable": true,
                    "visible": false
                });


    When I open this view for the first time and click the button to open the window - it becomes visible; when I click on "#WindowButton" it shows one alert "button clicked!";


    Problem starts, when I go to other view, and back again to this first view (I remind: with no page refresh, it is single page app) - then, when I open the window, and click on "#WindowButton", alert "button clicked!" openes two times - one after the other. When I go to other view and back to this once again (for the 3rd time), it shows 3 times and so on;

    I noticed that all kendo controls are rendering on every single view load, and the old ones aren't replaced by new rendered, but they are duplicating, below the code from google chrome developer tools:

    First view opened for the first time:


    01.<html>
    02.  <head>...something here...</head>
    03.  <body>
    04.    <div id="content">
    05.      SOMETHING HERE
    06.    </div>
    07.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
    08.  </body>
    09.</html>

    Control is rendered on the 7th line - when I open window, property "display" changes its value from "none" to "block" - it is obvious and correct;

    When I open the same view for the second time (without server page reload), my HTML looks like this:

    01.<html>
    02.  <head>...something here...</head>
    03.  <body>
    04.    <div id="content">
    05.      SOMETHING HERE
    06.    </div>
    07.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
    08.    <div class="k-widget k-window" data-kendo-role="draggable" style="padding-top: 26px; min-width: 90px; min-height: 50px; width: 550px; height: 340px; display: none;">
    09.  </body>
    10.</html>

    As you can see, kendo window control is rendered two times, so when I call button, placed on a window, the action is called two times :/ (action is recognized by jQuery function when element with id="WindowButton" is clicked - now there are two same buttons with the same ID). When I go to this page 3rd, 4th, 5th and so on, I receive html with as many duplicates of kendo controls as many times I have been opening this view.

    Ofcourse it is simplified code above, true code is much, much heavier.


    When I click refresh button on my web browser - html shows one kendo window, and all is back set to normal.


    What should I do to avoid this problem? Maybe should I manually delete kendo html elements from view "on view detach" in javascript function? Are there any detach functions for kendo UI controls?
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8445 posts

    Posted 30 Oct 2013 Link to this post

    Hi Michal,

    Based on the provided information, I think the problem is not caused by Kendo UI, but by the application algorithm and some custom scripts are executed multiple times, when they should be executed only once. For example, why don't you check whether the Window exists before creating it? If this is not feasible, or if the page logic relies on multiple script execution, then you can (and even should) destroy widgets when they are not needed (e.g. when changing the view), before creating them again.

    http://docs.kendoui.com/getting-started/widgets#destroying-kendo-ui-widgets

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Michal
    Michal avatar
    11 posts
    Member since:
    Aug 2013

    Posted 30 Oct 2013 Link to this post

    Ok, You solved my problem :). Warm thank you!
Back to Top