Add different style to different window

6 posts, 0 answers
  1. Aldulea
    Aldulea avatar
    4 posts
    Member since:
    Mar 2015

    Posted 31 Mar 2015 Link to this post

    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!
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Apr 2015 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Aldulea
    Aldulea avatar
    4 posts
    Member since:
    Mar 2015

    Posted 02 Apr 2015 in reply to Dimo Link to this post

    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.



















  5. Aldulea
    Aldulea avatar
    4 posts
    Member since:
    Mar 2015

    Posted 02 Apr 2015 in reply to Aldulea Link to this post

    Sorry, code looks like this:  

    <body>
      <form id="formTest">
         <div kendo-window="testWindow">
             k-appendTo="form#formTest">
         </div>
       </form>
    </body>
  6. Aldulea
    Aldulea avatar
    4 posts
    Member since:
    Mar 2015

    Posted 02 Apr 2015 in reply to Aldulea Link to this post

    Sorry, code looks like this

    <body>
      <form id="formTest">
         <div kendo-window="testWindow">
             k-appendTo="form#formTest">
         </div>
       </form>
    </body>
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 06 Apr 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready