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

3 posts, 0 answers
  1. Jyothi
    Jyothi avatar
    33 posts
    Member since:
    Dec 2018

    Posted 10 Jun 2019 Link to this post

    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

  2. Jyothi
    Jyothi avatar
    33 posts
    Member since:
    Dec 2018

    Posted 10 Jun 2019 in reply to Jyothi Link to this post

    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

  3. Svetlin
    Admin
    Svetlin avatar
    395 posts

    Posted 12 Jun 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top