CODEWITHSUNDEEP
javascriptc#jquerycsskendo-ui
Enrique Gil
Enrique Gil

Reputation: 754

Adding global function for Kendo UI Window

I am new to Kendo Window and I'm planning to declare window.resize() function as a global jquery function for all of the Kendo Windows in the pages. How can I declare it?

I've added this code below on a .js file and referenced it in _Layout.cshtml but it doesn't work:

$(window).resize(function() {
    $(".k-window").kendoWindow().center();
});

When Individually used, I am using this set of code:

var modal = $("#mdlWindow").kendoWindow({
    visible: false,
    resizable: true,
    modal: true,
    content: "../Position/Info,
    width: "50%",
    height: "50%",
    maxWidth: 500,
    maxHeight: 600,
    minWidth: 300,
    minHeight: 400,
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    iframe: true
}).data("kendoWindow");

modal.center().open();

$(window).resize(function() {
    modal.center();
});

Any suggestions are accepted. If there is a way to do it in css I will try it.

Upvotes: 0

Views: 350

Answers (1)

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

Firstly Kendo Window is a specific Kendo UI widget in wherein widget element does not have k-window class but k-window-content. Class k-window is adding to element container.

Secondly to get Kendo Window instance you shoult use .data('kendoWindow') method instead of .kendoWindow().

And finally if you would have more than one window open you have to iterate for all of them to perform an action individually.

Therefore your code centering all Kendo windows on window.resize() event should looks like:

$(window).resize(function() {
    var windows = $(".k-window-content");
    windows.each(function(i,v){
        $(v).data("kendoWindow").center();
    });
});

Here is Kendo UI Dojo example: http://dojo.telerik.com/OjuwU

Upvotes: 1

Related Questions