全局设置 Kendo UI Window 值

Question

我和很多 Kendo UI windows 一起工作。有没有办法以某种方式全局指定默认值？或者更现实的版本，我可以创建一些具有预定义值的父项，然后只覆盖我需要更改的值吗？

例如，我想要相同的错误行为和所有 windows 的模态参数，所以我想做类似的事情：

$("#parentWindow").kendoWindow({
     modal: true,
     error: function () {
          this.close();
          new Notification().error();
     }
});

然后使用父 window 作为新 windows 的基础：

$("#newWindow").kendoWindow({
     title: "This window should have the options (modal and error) of the parentWindow",     
}).??getTheRestOfTheValuesFromParent()??;

或者重写一些参数：

$("#newWindow2").kendoWindow({
     modal: false,
     title: "A window with overwritten modal parameter",     
}).??getTheRestOfTheValuesFromParent()??;

是否有可能以某种方式实现这一目标，是否有可能实现 C# 继承之类的东西？也许这是一个愚蠢的问题，但我对 JS 不是很熟悉。

Answer 1

我强烈建议您创建自己的 wrapper 代码来覆盖所有 - 或者至少是那些更复杂的 - kendo 小部件。我的团队多年来一直在一个我们使用 kendo 的项目中这样做，我们取得了非常积极的结果。主要目的是您需要的：全局行为。如果在你的项目上千 windows 编码之后，你需要全部更改它们，只需更改包装器即可。这只是一个简单的 jQuery 函数：

$.fn.MyWindow = function(options) {
    var $target = $(this);
    var widget = {
        _defaultOptions: {
            actions: ["Minimize", "Maximize", "Close"],
            visible: false,
            width: 400,
            height: 400,
            modal: true
        },
        _options: options || {},
        _target: $target,
        _widget: null,

        _init: function() {
            this._manageOptions();
            this._createWidget();

            return this;
        },

        _manageOptions: function() {
            // Here you can perform some validations like displaying an error when a parameter is missing or whatever
            this._options = $.extend(this._options, this._defaultOptions);
        },

        _createWidget: function() {
            this._widget = this._target.kendoWindow(this._options).data("kendoWindow");

            // Create here some behaviours that the widget doesn't haves, like closing the window when user click the black overlay
            if (this._options.closeOnOverlayClick) {
                $('body').off('click', '.k-overlay').on('click', '.k-overlay', function() {
                    this._widget.close();
                }.bind(this));
            }
        },

        Show: function(center) {
            if (center) {
                this._widget.center();
            }

            this._widget.open();
        }
    };

    return widget._init();
};

var wnd = $("#wnd").MyWindow({
    title: "My first window",
    closeOnOverlayClick: true // Your own parameter
});

// Now you work with your own functions:
wnd.Show(true);

Demo.

有很多自定义项，比如您自己的事件 - 其中一些 kendo 的小部件没有 - 等等。

Answer 2

我只想补充一点，有一篇关于创建自定义 Kendo 小部件的文章 (here)，您可以在其中找到有关可能实施的不同场景的细节的更多信息。

Answer 3

Ι 有一个像你这样的案例，有 kendo windows、kendo 网格和 kendo 下拉列表。为此，我为所有元素创建了 HtmlHelpers 并在需要时调用它们。由于您使用的是 kendo asp.net-mvc，我建议您这样看。

    public static WindowBuilder GlobalKendoWindow(this HtmlHelper helper)
    {
        return helper.Kendo().Window()
            .Draggable()
            .Animation(true)
            .Visible(false)
            .AutoFocus(true)
            .Modal(true)
            .Scrollable(true)
            .HtmlAttributes(new { @class = "atn-modal-container" })
            .Actions(actions => actions.Minimize().Close())
            .Deferred();
    }

并像这样在我的 Html 中渲染它

@(Html.GlobalKendoWindow()
    .Name("addCandidateDialog")
    .Title(Html.GetResource(cps, "AddCandidateDialogTitle"))
    .LoadContentFrom("AddCandidate", "Candidate")
    .Events(events => events.Open("athena.addCandidacy.onAddCandidateOpen").Close("athena.addCandidacy.onAddCandidateClose"))
)

全局设置 Kendo UI Window 值

Set Kendo UI Window values globally

javascript

kendo-ui

kendo-asp.net-mvc

kendo-window