Is there a way to provide some sort of binding for the action buttons in the dialog service

[Jaime]

Hi,

Is there a way to do some data binding on action buttons while using the service dialog.

        const dialog: DialogRef = this.dialogService.open({
            title: 'Create Dialog',
            content: SomeFormComponent,
            actionsLayout: 'end',
            actions: [
                { text: 'Cancel', fillMode: 'clear', themeColor: 'accent' },
                {
                    text: 'Create Something',
                    themeColor: 'primary',
                    fillMode: 'solid',
                    cssClass: 'height-override',
                },
            ],
        });

I want to place some binding to the "Create Something" button to toggle it being enabled/disabled.

Is this even possible? Is there some sort of workaround?

 

Thanks!

[Zornitsa]

Hi Jaime,

The example provided in my previous reply is for demonstration purposes and seeks to illustrate an example scenario of disabling a particular action button in the Dialog component. Thus, the developer can implement the more suitable one from the suggested approaches to disable the respective action button in different scenarios depending on the specific use case. 

For your convenience, below I am linking a StackBlitz example that demonstrates how to toggle the disabled state of the "Create something" action button depending on the form validity in the Dialog:

• https://stackblitz.com/edit/angular-6pru6u 

The example follows the second approach with the custom actions template and configures the disabled property of the particular Button component in the template to depend on the form validity:

<ng-template #dialogActions>
                <button kendoButton (click)="close()">Cancel</button>
                <button kendoButton (click)="close()" themeColor="primary" [disabled]="!formGroup.valid">Create something</button>
</ng-template>

I hope this helps.

Regards,
Zornitsa
Progress Telerik

[Jaime]

Thanks Zornista!

I will give this a shot!

 

Cheers,

Jaime

[Zornitsa]

Hi Jaime,

Thank you for the provided code snippet.

To toggle the disabled state of a particular action button when using the DialogService, the developer can add and remove the 'k-disabled' class for the respective action button dynamically by using its cssClass property. Since I can observe that a cssClass is already specified for the mentioned action button, I would suggest defining the CSS classes in an array in order to respectively insert and remove the 'k-disabled' class from the array in the desired scenarios:

actions: [
   { text: 'Cancel', fillMode: 'clear', themeColor: 'accent' },
   { text: 'Create Something', themeColor: 'primary', fillMode: 'solid', cssClass: ['height-override'] }
],

For demonstration purposes, in the below code snippet, the 'Create Something' button is disabled when it is clicked. This is achieved in the preventAction callback, which also prevents the dialog from closing when the specified action button is pressed by returning true based on the respective action:

const dialog: DialogRef = this.dialogService.open({
     ...
     preventAction: (ev: DialogAction) => {
         if(ev.text == 'Create Something'){
              ev.cssClass.push('k-disabled');
         }

         return ev.text == 'Create Something';
      },
});

Here is also a StackBlitz example to better illustrate the above approach:

• https://stackblitz.com/edit/angular-uqge4q 

Alternatively, the developer can define a custom actions template, in which to configure the action buttons manually by utilizing Kendo UI for Angular Buttons and toggle the built-in disabled property when required. The following article from our documentation contains more details that explain this approach. There is also a runnable example, in which it can be observed how to control the disabled state of the custom buttons:

•  https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-actions-template 

I hope the provided information is helpful. Let me know if any further questions arise.

Regards,
Zornitsa
Progress Telerik

[Jaime]

Thank you so much Zornitsa!

Unfortunately, in the example you've given we have to click the button first prior to it being disabled.

What is required is that based on the form's validity, the "Create Something" button enables or disables. However, I find the code sample quite useful in some other use case but unfortunately, not in this one.