如何向 kendo 对话框操作添加回调

Question

我试过使用 Kendo UI DialogService 在对话框中调用我自己的组件。我遇到的问题是为我的对话框使用自定义操作。

包含带有自定义按钮和操作的 ng-template 在某种程度上违背了使用 dialogService 的目的，并使我的模板带有与其不直接相关的标记。

我试过使用这样的代码：

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();
  }
});

这将使我运行从我的 FormComponent 中获得保存功能，但如果表单验证关闭或保存失败，我将无法阻止对话框关闭。

Answer 1

我通过复制对话框动作事件发射器并将其替换为我自己的来设法防止对话框在您单击某个动作后关闭。这是一个黑客解决方案。希望Kendo将来能提供更好的东西。

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();
    }
});

Answer 2

你可以使用方法'setOptions'，但我不知道为什么这个方法在Telerik文档中不存在：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>

如何向 kendo 对话框操作添加回调

how to add callbacks to kendo dialog actions

kendo-ui-angular2