Kendo-angular: Dialog: Custom action for [x] close button

[MiNiCo88]

Hello,
starting from the example in this page http://www.telerik.com/kendo-angular-ui/components/dialog/service/#toc-specify-custom-actions ,

there is a way to assign a custom action for the [x] close button? I want to assign a guard function before close dialog

Thank's

[rusev]

You can send custom result to identify whether the dialog is closed from the X button or not.

Example - http://plnkr.co/edit/PCYbNqa7bZGyEwKRSk0r?p=preview

[rdnscr]

We are facing a similar issue. What should we do if we want to do some verification checks first if the dialog can be closed or not (for example if a form in the dialog is dirty prevent closing the dialog etc.).

Do you have already a solution for that? We need this behavior in dialogs were we have a custom template.

[gyoshev]

@rdnscr @MiNiCo88 how do you intend to handle the scenario when the form is dirty and the user tries to close the dialog? I could imagine opening a second dialog, but that may be too convoluted. If we provide an option to hide the close button, would that suffice?

[rdnscr]

@gyoshev this would be ok in our case. However the "perfect" solution from my point of view would be if the dialog would have life cycle hooks like canDeactivate or something similar where a consumer gets the opportunity to customize the behavior (open close principal).

I assume that such a solution will be difficult to implement quickly therefore the option to hide the close button is completely sufficient.

[gyoshev]

We will consider implementing such behavior, if we get more requests and use cases that require it. Since hiding the button is sufficient in this case, and does not interfere with the lifecycle hooks, we'll provide that as an option in an upcoming version of the dialog. Until that is implemented, you can use the following CSS to hide the button:

.k-dialog-close { display: none; }

You can apply this to the component that hosts the kendoDialogContainer directive (or the kendo-dialog element, if the dialog is used declaratively):

// service usage, http://plnkr.co/edit/6OYXCrWFCWOCXqMIjVFi
@Component({
     template: "<div kendoDialogContainer></div>",
     styles: [" :host >>> .k-dialog-close { display: none; } "]
})

// declarative usage, http://plnkr.co/edit/OEFvthnPNpPrKVUfHXqi
@Component({
     template: "<kendo-dialog></kendo-dialog>",
     styles: [" :host >>> .k-dialog-close { display: none; } "]
})

[MiNiCo88]

@gyoshev this may be a good alternative solution, but all button are always hidden for the component using service. In my case i open a second dialog, using dialog service, to confirm close action.
Waiting for improvements suggested by @rdnscr, i will use method suggested by @gyoshev, but it's not the best solution.
Thank You!

[DavidML3]

Here is another issue. How can we give the dialog window its own custom background or color?

[gyoshev]

@DavidML3 you can customize the title through the titlebar component:

<kendo-dialog-titlebar class="custom-title">Please confirm</kendo-dialog-titlebar>

styles: [` .custom-title { background-color: pink; } `]

Please refrain from hijacking issues and asking for support in this repository. This issue tracks what is specified in the title and all interested participants are notified for new posts. For any posts not related to the issue in the title, please create a new issue or open a support ticket.

[Raisolution]

Implemented in v4.2.0

Documentation on the topic can be found here:
https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-dialog-close-prevention

https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-action-prevention