I am struggling with styling the KENDO UI dialog in a unique way:
Imagine I have a component named WatComponent. Inside this component,
- When the user clicks the "Forbidden" button, my goal is to make a warning styled dialog appear, with a yellow/orange colored titlebar.
- If the user clicks the "DANGER" button, I want an error styled dialog to pop-up, with a red titlebar.
When I trigger the dialog using the DialogService:
const dialogRef = this.dialogService.open({
title: this.danger ? 'DANGER!' : 'Warning!',
content: WatDialogComponent
});
const userInfo = dialogRef.content.instance;
userInfo.danger = this.danger;
How can I apply different CSS styles (in any method) to ensure that the titlebar has distinct colors when opened from the same component?
I have attempted
- to add a class to the
, although I did not anticipate it would work (as expected, it didn't).<div kendoDialogContainer class="myTitlebarClass"></div> - to assign functionality to the
dangerproperty in order to pass it to the titlebar. Regrettably, this only affects the titlebars within theWatDialogComponent, while I need to target the titlebar one level above. - to search for a property in the
DialogRefthat would allow me to achieve this.
Is there a direct solution that I am overlooking? If not, do you know of any workaround that could be implemented?