[angular] Kendo Window content stale

6 posts, 0 answers
  1. Anna
    Anna avatar
    36 posts
    Member since:
    Jul 2015

    Posted 03 Dec 2015 Link to this post

    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 

    ApproachOn 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!




  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Dec 2015 Link to this post

    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
    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. Anna
    Anna avatar
    36 posts
    Member since:
    Jul 2015

    Posted 08 Dec 2015 in reply to Dimo Link to this post

    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();
    }

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Dec 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Anna
    Anna avatar
    36 posts
    Member since:
    Jul 2015

    Posted 10 Dec 2015 in reply to Dimo Link to this post

    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

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Dec 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready