Problem opening windows from inside windows (Angular)

6 posts, 0 answers
  1. Mike
    Mike avatar
    33 posts
    Member since:
    Jul 2012

    Posted 30 Oct 2015 Link to this post

    I've been banging my head all day on this. I know you can open a window and then say have a button that when clicked opens another window from inside that.

    See here for a demo: http://plnkr.co/edit/vl2VTi6EIXKcViwl1xae?p=preview

    In my project however I am trying to do the same thing but instead of working as expected it is rendering the kendo windows inline (as if they are just divs with content in them).

     When I swap out the version of kendo I am using (v2015.3.930) with the version inside my plnkr (2014.2.716) my kendo-window divs are no longer rendered but they also still do not work.

     What could cause this behavior with the kendo-window components? Could angular-ui-router have anything to do with this? The initial kendo-window is being called from a nested (named) ui-view. The only other javascript libraries I am using are angular-toastr and angular-local-storage (of which I don't think either could be the culprit).

     

  2. Mike
    Mike avatar
    33 posts
    Member since:
    Jul 2012

    Posted 30 Oct 2015 Link to this post

    More information: When I click the button to open my first window and has content such as: 

    <div kendo-window>I'm a window</div>
    Testing

     I see the text that says testing but I do not see any window.

     Please help.

  3. Kendo UI is VS 2017 Ready
  4. Mike
    Mike avatar
    33 posts
    Member since:
    Jul 2012

    Posted 30 Oct 2015 Link to this post

    I have tried placing other kendo widgets into my window: 

    <button kendo-button>Click Me</button>
    <input kendo-color-picker/>

    And these work but the kendo-window does not.

  5. Mike
    Mike avatar
    33 posts
    Member since:
    Jul 2012

    Posted 31 Oct 2015 Link to this post

    I've modified my original plunk to use ui router in the same way as my application and it works as well: http://plnkr.co/lGZypc4qdTKy5i3qXiBD

     

    What could cause the kendo windows to fail and have their contents rendered inline?

  6. Mike
    Mike avatar
    33 posts
    Member since:
    Jul 2012

    Posted 31 Oct 2015 Link to this post

    So after not wracking my brain on this for two days I finally figured out how to fix it BUT not what is causing the problem in the first place. I finally figured out that removing the k-options attribute and replacing with the k-* attributes I want to use inline makes the problem go away (so far). 

     This behavior is very inconsistent as you can clearly see in my plunker that k-options work. Another thing to note is that the attributes are acting inconsistently as well:

    <div kendo-window="myWindow" k-visible="true" k-modal="true" k-title="'My Title'">I'm a window<div> 

     If I remove the single quotes from k-title it breaks the window.

    Can any of the Kendo folks help me understand what is going on?

     

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Nov 2015 Link to this post

    Hello Mike,

    k-title requires a string value, that's why two pairs of quotes are needed, unless you provide an Angular expression (scope variable) as a value. This is how Angular works.

    http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-options-in-html

    Based on the provided information, we are not sure what causes the inner Window to not be initialized. Unless I am missing something, the provided Plunkr example works. In case you need further assistance, please provide a runnable example, which does not work as expected.

    Generally, the Window's <div> is moved in the DOM and becomes a child of the <body> element when the widget is initialized. In some scenarios, this may lead to the widget to no longer be in its controller scope, so it cannot access its properties.

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

    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