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:
My kendo window render function is placed in script file, which starts with the page, when it is "$(document).ready()"; here is the code:
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:
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:
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?
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>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 HERE06. </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 HERE06. </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 Answers, 1 is accepted
0
Accepted
Hi Michal,
Dimo
Telerik
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
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michal
Top achievements
Rank 1
Rank 1
answered on 30 Oct 2013, 01:50 PM
Ok, You solved my problem :). Warm thank you!