how to add callbacks to kendo dialog actions

user_280644 0
Viewed 3862

I've tried using the Kendo UI DialogService to call up my own component in a dialog. The issue I'm having is in using custom actions for my dialog.

Including an ng-template with custom buttons and actions somewhat defeats the purpose of using the dialogService and clutters my template with markup not directly related to it.

I've tried using code like this:

const saveAction = { text: 'Save', primary: true };
const cancelAction = { text: 'Cancel' };

const dialog = this.dialogService.open({
  title: 'Edit data',
  content: FormComponent,
  actions: [
    cancelAction,
    saveAction
  ]
});
const form = dialog.content.instance;
form.data = data;

dialog.result.subscribe((result) => {
  if (result === saveAction) {
    form.save();
  }
});

This will let me run a save function from my FormComponent, but won't allow me to stop the dialog from closing if the form validation is off or the save fails.

kendo-ui-angular2
2 Answers

You can use method 'setOptions', but I don't know why this method doesn't exist in Telerik Document: https://docs.telerik.com/kendo-ui/api/javascript/ui/dialog

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>Untitled</title>

        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css">
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css">

        <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/angular.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>

<body>
        <div id="dialog"></div>
        <input type="button" value="show dialog" onclick="showDialog()" />
        <script>
                $("#dialog").kendoDialog({
                        visible: false,
                        content: 'first content',
                        actions: [{
                                text: "OK",
                                action: function (e) {
                                        return false;
                                },
                                primary: true
                        }, {
                                text: "Cancel"
                        }]
                });

                function showDialog() {
                        var dialog = $("#dialog").data("kendoDialog");
                        dialog.setOptions({
                                closable: false,
                                content: 're-open content',
                                actions: [{
                                                text: 'test1',
                                                primary: true
                                        },
                                        {
                                                text: 'test2'
                                        }
                                ]
                        });

                        dialog.open();
                        console.log(dialog.options.actions)
                }
        </script>
</body>

</html>

user_13266990
Related