Set Kendo UI Window values globally

user_5857392 0
Viewed 493

I'm working with a lot of Kendo UI windows. Is there some way to specify default values somehow globally? Or maybe a more realistic version, can I create some parent with predefined values and then just overwrite the values I need to change?

For example, I want the same error behavior and a modal parameter for all of the windows, so I would like to do something like:

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

And then use the parent window as a base for new windows:

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

Or rewrite some parameter:

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

Is it somehow possible to achieve this, is there any possibility of something like C# inheritance? Maybe it's a stupid question, but I'm not so familiar with JS.

kendo-window kendo-asp.net-mvc kendo-ui javascript
3 Answers

I highly encourage you to create your own wrapper code over all - or at least those more complex - kendo widgets. My team has been doing it for years in a project we use kendo for everything and we are having very positivelly results. The main purpose is what you need: a global behaviour. If after thousand windows coded over your project, you need to change them all, just change the wrapper. It's just a simple jQuery function:

$.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.

There are so many customizations, like your own events - some of those kendo's widgets doesn't haves - etc..

user_12673040

I will just add that there is an article(here) about creating custom Kendo widgets where you can find more information about the specifics of different scenarios that may be implemented.

user_21878920

Ι had a case like yours with kendo windows, kendo grids and kendo dropdownlists. For that I created HtmlHelpers for all my elements and called them when I needed to. Since you are using kendo asp.net-mvc I would recommend to look at this way.

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

and render it in my Html like this

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