[angular] Kendo Window content stale

[Anna]

Hi,

My ultimate goal is to open Kendo-Window with different content, depending which button clicked. i.e. click Btn1 will open a window with Content1, click Btn2 open Content 2 ... Btn-n opens content-n. The buttons and numbers of buttons are dynamic, so I can't statically add windows corresponding to button. Below are my approaches and their problems

ONE 

Approach: Include a static Kendo-Window directive in html, and dynamically set its content url on button click. See this plunk for implementation.

Problem: the content will become stale, e.g. Btn1 opens content1, Btn2 still opens content1. In this plunk, I'm only able to reproduce it sometimes after open the windows a few times, and leave it for couple minutes, and open the window again. However, in my own project, this happens all the time.

TWO 

Approach: On button click, I append a holderElement to body, and construct a new Kendo Window (new kendo.Window(holder, options)) with corresponding content url. See this plunk (create new window) for implementation.

Problem: The angular expressions are not compiled. Notice in the plunk example, there was a {{ctrl.count}} variable, when I open the window through Btn1 & Btn2, the variable shows how many times I've opened a kendo window. But in the newly created kendo-window, the varaible is not compiled at all.

THREE
Approach: On button click, I set content url in window options, then make angular to compile a kendo-window directive with this option, and attach it to document body. 

01.this.windowOptions = {
02.    // ...
03.}
04.
05.this.createWindow = function(url) {
06.    this.windowOptions.content = { url: "someUrl ..." };
07.
08.    var windowTemplate = '<div kendo-window="ctrl.window" data-k-options="ctrl.windowOptions"></div>';
09.    var element = this.$compile(windowTemplate)(this.$scope);
10.    $(document.body).append(element);
11.
12.    this.window.center();
13.    this.window.open();
14.}

 

Problem: The window opens with no content. I put some debugger in kendo.all.js and found that content element is removed completely. Sometime after Kendo window is created after angular compiles, Kendo issues an ajaxRequest to retrieve content url. At this time, if I query this.wrapper.children(), I'd get 2 element - one for title bar, and 1 for content. However, the _ajaxSuccess method isn't called long after the window is opened, In this method, kendo add the retrieved html into content, but if I query this.wrapper.children() now, only 1 element for the title bar come back, content element is gone. There is nothing to add the html to! (Do you think this could be a bug?)

 

Idea in method TWO and THREE is that on each button click, I'll generate new Kendo Window, and on deactivate event, I'll call window.destory(). So that I won't have to worry about incorrect content.

I don't care which way, but how can I achieve what I want? Please help!

[Dimo]

Hi Ama,

The first option is the easiest and most straight-forward, however, the recommended approach is to use the Window's refresh() method instead of pushing new widget settings.

http://docs.telerik.com/kendo-ui/api/javascript/ui/window#methods-refresh

Regards,
Dimo
Telerik

[Anna]

Hi Dimo,

Thanks for replying. I am using refresh method in my example. I'm not sure how is mine way different from what you suggests. Can you elaborate?

this.openWin1 = function() {
    this.windowsOption.title = "Content 1";
    this.windowsOption.content = {
        url: "zontent1.html"
    };

    // this.win - reference to window object
    this.win.setOptions(this.windowsOption);
    this.win.refresh(this.windowsOption);
    this.win.open();
}

[Dimo]

Hello Ama,

You can use setOptions() and refresh(), however, please note that the refresh() method of the Window requires different parameters than the ones the widget is created from, so simply passing this.windowsOption to the method wil have no effect. Currently the scenario works by chance, because the new URL is passed before the refresh() call in the setOptions() method. In other words, this implementation...

this.win.setOptions(this.windowsOption);
this.win.refresh(this.windowsOption);

has the same effect as this one:

this.win.setOptions(this.windowsOption);
this.win.refresh();

In addition, it is worth pointing out that the Kendo UI Window is moved in the DOM and becomes a child of the <body>. In this process, information about the controller and scope can be lost.

http://docs.telerik.com/kendo-ui/web/window/overview#html-structure-and-dom-placement

Finally, if we return to the initial question about the Window content not being refreshed, can you provide an example, which reproduces the issue consistently, as the plunk works as expected on our side?

Regards,
Dimo
Telerik

[Anna]

Hi Dimo,

Thanks for replying. I'm still a little confused about how to correctly use the refresh method. When I want to change a window option, how should I change it exactly? Like this?

this.win.setOptions(this.windowsOption);
this.win.refresh();

Can you please give an detailed example?

Regarding to an example, I am able to consistently reproduce the problem in the plunk I provided. Below are the exact step to reproduce it:

1. Click on "Open Content1" button (window with a paragraph of text appears)
2. Click on  "Open Content2" button (window with a image appears)
3. Click on "Create New Window" button
4. Close all windows
5. Leave the tab open for 5 minutes without doing anything to it (I usually go to other tabs, not sure if that has any effect)
6. After 5 minutes, Click on "Open Content2" button  (window with image appears)
7. Click on "Open Content1" button (expect paragraph of text to appear, but window still shows image, and on subsequent clicks of either buttons will always show window with image)

Please give that a try, and see if it will help you to reproduce the problem. 

Best,

 

Ama

[Dimo]

Hi Ama,

If you just want to refresh the Window, the recommended approach is to use the refresh() method only, and provide the appropriate URL in the method's arguments.

I managed to reproduce the problem with the image content being displayed when I click on "Open Content 1". Please allow some time for additional investigation.

Regards,
Dimo
Telerik