KendoWindow custom titlebar color?

[Kyle]

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?

[Dimo]

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

[Kyle]

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!

[Dimo]

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

[venkata]

Hi,

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

[Dimo]

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