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

Add different style to different window

5 Answers 962 Views
Window
This is a migrated thread and some comments may be shown as answers.
Aldulea
Top achievements
Rank 1
Aldulea asked on 31 Mar 2015, 06:45 AM
Hi everyone,

    I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:

<div class="wrapper">
     <div kendo-window="InitialisingApp">
     </div>
</div>

This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
    ..........................
</div>

Any ideas about this problem?
Thank you! Have a nice day!

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Apr 2015, 04:59 AM
Hi Aldulea,

By default, the Window is moved in the DOM and becomes a child of the <body>. This ensures that the widget is displayed on top of the remaining page content.

http://docs.telerik.com/kendo-ui/web/window/overview#using-kendo-ui-window-with-a-form

You can either use appendTo, or apply a custom CSS class to the Window wrapper, after the widget is initialized.

http://docs.telerik.com/kendo-ui/framework/widgets/wrapper-element

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aldulea
Top achievements
Rank 1
answered on 02 Apr 2015, 01:29 PM
I tried to use appendTo property with angular directives to put window into a wrapper but i get:
    Lexer Error: Unexpected next character at columns 4-4 [#] in expression [form#testForm]
with the following code

<body>
  <form id="formTest">
     <div kendo-window="testWindow">
         k-appendTo="form#testForm">
     </div>
   </form>
</body>

Can you give me any ideas?
Thank you.



















0
Aldulea
Top achievements
Rank 1
answered on 02 Apr 2015, 01:31 PM
Sorry, code looks like this:  

<body>
  <form id="formTest">
     <div kendo-window="testWindow">
         k-appendTo="form#formTest">
     </div>
   </form>
</body>
0
Aldulea
Top achievements
Rank 1
answered on 02 Apr 2015, 01:33 PM
Sorry, code looks like this

<body>
  <form id="formTest">
     <div kendo-window="testWindow">
         k-appendTo="form#formTest">
     </div>
   </form>
</body>
0
Dimo
Telerik team
answered on 06 Apr 2015, 07:54 AM
Hello Aldulea,

There are two syntax errors in the Kendo UI Window declaration.

1. Complex property names (with Capital letters in the middle) should be split into multi-word attributes with hyphens and lowercase letters (k-append-to).

2. Angular attribute values, which represent strings, should use quotes ("'form#formTest'").

Both the above requirements are explained in the documentation.

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

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
Aldulea
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Aldulea
Top achievements
Rank 1
Share this question
or