How to set the background color of the Title Bar of the kendo-dialog rendered through DialogService

[Jyothi]

Hi,

I am using a DialogService to open it under some conditions from another kendo-dialog. I need to set the background color of the title to a different color than the one from the kendo style sheet. How do I achieve this?

 

I know we can set he width, height and actions  programmatically , but I don;t see any properties to set the background color. 

 

Regards,

Jyothi

[Jyothi]

I found a way to do this by defining a class and adding the class.

this.dialog.dialog.location.nativeElement.classList.add('warning'); 

Now I need a custom look and feel for the default 'yes' and 'no' buttons. I need to change thier size and the color. How can I achieve that?

 

Regards,

Jyothi

[Svet]

Hi Jyothi,

That is a valid approach of modifying the default styles for the title.

About the action buttons, check the following article, that demonstrates how a custom template can be passed though the service for the buttons:
https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-specifying-custom-actions

This approach allows to add any desired custom appearance for the action buttons. Check for example the following demo, that show how to change the background color of one of the buttons:
https://stackblitz.com/edit/angular-cy9qk7-vyyhz2?file=app/app.component.ts

I hope this helps. Let me know in case further assistance is required for this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik