how to add callbacks to kendo dialog actions

问题

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.

回答1:

I have managed to prevent the dialog from closing after you click an action by taking a copy of the dialogs action event emitter, and replacing it with my own. It's a hack solution to this. Hopefully Kendo will provide something better in future.

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;

const actionEmitter = dialog.dialog.instance.action;
dialog.dialog.instance.action = new EventEmitter<any>();
const sub = dialog.dialog.instance.action.subscribe(action => {
    // Perform any check here based on whether you want the dialog to close or not
    if(form.validate()) {
        // Only call this if you want the dialog to close
        actionEmitter.emit(action);
    }
});

dialog.result.subscribe((result) => {
    sub.unsubscribe(); // clean up
    if (result === saveAction) {
        form.save();
    }
});

回答2:

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>

来源：https://stackoverflow.com/questions/44913156/how-to-add-callbacks-to-kendo-dialog-actions

标签

kendo-ui-angular2