This is a migrated thread and some comments may be shown as answers.

Problem opening windows from inside windows (Angular)

5 Answers 284 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 30 Oct 2015, 11:17 PM

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).

 

5 Answers, 1 is accepted

Sort by
0
Mike
Top achievements
Rank 1
answered on 30 Oct 2015, 11:44 PM

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.

0
Mike
Top achievements
Rank 1
answered on 30 Oct 2015, 11:53 PM

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.

0
Mike
Top achievements
Rank 1
answered on 31 Oct 2015, 07:24 PM

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?

0
Mike
Top achievements
Rank 1
answered on 31 Oct 2015, 10:28 PM

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?

 

0
Dimo
Telerik team
answered on 04 Nov 2015, 01:51 PM
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!
Tags
Window
Asked by
Mike
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or