Semi transparent window

5 posts, 0 answers
  1. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 26 Apr 2013 Link to this post

    I am trying to override the current theme and create a Kendo window having a semi transparent PNG as a background (window will be see through somewhat).

    In the window creation I have the following - but it's not working - it's still defaulting to the current theme's window background color:

    .HtmlAttributes( new { style="background-color:transparent;background-image:'/images/bg_trans_60.png';background-repeat:repeat;"} )

    Please advise.

    Thanks.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 30 Apr 2013 Link to this post

    Hello Rene,

    In order to achieve the desired outcome you should set transparent background and to the element with class "k-window". I.e.":
    @(Html.Kendo().Window()
      //....
      .HtmlAttributes( new { style="background-color:transparent;background-image:'/images/bg_trans_60.png';background-repeat:repeat;"} )
    )
     
    <style>
    .k-window{
        background: transparent;
    }
    </style>

    Let me know if this fits your requirements. 

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 30 Apr 2013 Link to this post

    Thanks Iliana.

    I managed to pull it off this way:

    @(Html.Kendo().Window()
       .Name("myWindow")
       .Title("Test Window")
       .Content("Loading Info...")
       .Visible(false)
       .Modal(true)
       .Animation(true)
       .Width(528)
       .Height(400)
       .Iframe(true)
       .Draggable()
       .Resizable()
    )

    <button onclick='Javascript:openMyWindow();return false;'>Click Me</button>

    <style scoped>

    .transparentStyle
    {
    background: transparent;
    background-color:transparent;
    }

    .smokyGlass
    {
    background: url('/images/bg_trans_60.png');
    background-color:transparent;
    background-repeat:repeat;
    }

    </style>


    <script type="text/javascript">


    function openMyWindow() {

       var window = $("#myWindow").data("kendoWindow");
       window.open();
     
       window.wrapper.addClass('smokyGlass');

       $winContentSpan = window.wrapper.find('.k-window-content');
       $winContentSpan.addClass('transparentStyle');

     }

    </script>
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 30 Apr 2013 Link to this post

    Hello Rene,

    I am glad to hear the desired result is already achieved. 

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 30 Apr 2013 Link to this post

    I just edited the solution.

    Basically what I'm working on is a popup picklist window using the Kendo grid (appearing on that semi transparent window) where having over 20K items in a dropdownlist / combobox is obviously not the way to go.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready