KendoWindow custom titlebar color?

6 posts, 0 answers
  1. Kyle
    Kyle avatar
    16 posts
    Member since:
    Apr 2012

    Posted 24 Aug 2012 Link to this post

    Is there a way to set the titleBar color for an individual kendo window?

    Current I have tried:

    $('#myWindow').kendoWindow({ settings });

    followed by:

    $('#myWindow').parent().find('k-window-titlebar').css('backgroundColor', '#fe2712');

    Which works, but leaves a blank spot. Any ideas if there is a better way to go about this?
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 27 Aug 2012 Link to this post

    Hi Kyle,

    Please try using

    $('#myWindow').parent().find('.k-window-titlebar,.k-window-actions').css('backgroundColor', '#fe2712');

    You can also define an external CSS rule using the Window's ID, so that no Javascript is required.

    Greetings,
    Dimo
    the Telerik team
    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. Kyle
    Kyle avatar
    16 posts
    Member since:
    Apr 2012

    Posted 27 Aug 2012 Link to this post

    Thanks for the update. I tried the code you specified, but it still leaves a bit of an 'artifact' on the titlebar:

    http://imgur.com/FRs02

    If you see, over near the 'X' button there is about one pixels width of solid orange rather than a gradient.

    You mentioned using a CSS rule, but I thought if I did a CSS rule, it would effect all of the windows? Would you possibly be able to post an example that I could use?

    Thanks!
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 28 Aug 2012 Link to this post

    Hi Kyle,

    You can apply a custom CSS class to the Window's wrapper and use it as part of the CSS selector. In this way the style will affect only the particular widget instance.

    $('#myWindow').parent().addClass("myWindow");

    .myWindow  .k-window-titlebar,
    .myWindow  .k-window-actions
    {
        background-color: .... ;
    }


    CSS selectors tutorial

    Here is the Window HTML markup for quick reference:

    <div class="k-widget k-window">
        <div class="k-window-titlebar k-header"> <span class="k-window-title">Window Title</span><div class="k-window-actions k-header"><a class="k-window-action k-link" href="#"><span class="k-icon k-i-close">Close</span></a></div></div>
        <div class="k-window-content k-content" id="myWindow">
                Window content here
        </div>
    </div>

    As for the border, I don't have one on my side. Please inspect the respective HTML element, see what styles are applied and override the unwanted ones. For example this might work:

    .myWindow  .k-window-titlebar  .k-window-action
    {
        background: none;
        border-width: 0;
    }


    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. venkata
    venkata avatar
    3 posts
    Member since:
    Jul 2016

    Posted 21 Jul in reply to Dimo Link to this post

    Hi,

    How to do same thing in mvc, how can i change color of header and title for editable template.

  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 22 Jul Link to this post

    Hello Venkata,

    The required approach when using the Kendo UI MVC Window wrapper is exactly the same. The only thing to keep in mind is that the JavaScript code, which adds a custom CSS class to the widget's wrapper, should be placed inside a document.ready handler that is defined after the widget declaration:

    http://docs.telerik.com/kendo-ui/aspnet-mvc/fundamentals#client-side-objects

    If the Window is the container of a Grid popup edit form, then you can add the custom CSS class in the edit event of the Grid.

    http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridEventBuilder#methods-Edit(System.String)

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

    Regards,
    Dimo
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready