Position Window other than center

[michael]

Can I set the top left X and Y position of a kendoWindow?

Mike B

[Dimo]

Hello Mike,

Sure, you can apply any top and left styles to the Window wrapper element by using jQuery or standard DOM operations.

<div class="k-widget k-window">
....
</div>

You can do this both before or after opening the Window.

Regards,
Dimo
the Telerik team

[wizmagister]

In case anybody needs this, here's how I did it: 

      $('#' + this.ControlName).parent().css("top", "55px");
      $('#' + this.ControlName).parent().css("left", "450px");

this.ControlName is the ID of your original content DIV. The parent is the actual window DIV generated by kendo (would be nice to have an ID). 

[Alex Gyoshev]

A more optimal way would be:

$("#" + this.ControlName).closest(".k-window").css({
    top: 55,
    left: 450
});

Regards,
Alex Gyoshev
the Telerik team

[Mark]

Or...

var dialog = $("#dialog").data("kendoDialog");
dialog.open().element.closest(".k-window").css({
    top: 55,
    left: 450
 });

[Ivan Danchev]

Hello,

The Window's position can be controlled through the position.top and position.left configuration options. The Dialog widget lacks those so Mark's approach for opening a Dialog at a specified position is correct.

Regards,
Ivan Danchev
Telerik by Progress

[Petr]

Hello, 

we've got problems with this with 2018.3.1017 version. When we try to setup the window position with given function, everything seems to work fine - window is really placed to the given coordinates. But when the user try to move (drag) the window for the first time, the window jumps into strange location during the dragging. When the window is dropped, the right location of the window is restored. The strange thing is that all next draggings are ok.

Is there any way to overcome the window jumping - the bad initial dragging ?

 

this.setWindowPosition = function (jqElement) {
        var documentWindow = $(window);

        jqElement.css({
            top: documentWindow.scrollTop() + Math.max(0, (documentWindow.height() - jqElement.height()) / 5),
            left: documentWindow.scrollLeft() + Math.max(0, (documentWindow.width() - jqElement.width()) / 2)
        });
    };

Regards,

Petr Ondrusek

[Ivan Danchev]

Hello Petr,

It is not clear what the value of jqElement is in this context, but you could use the Window's setOptions method to set the top and left values, for example:

var win = $("#myWindowID").data("kendoWindow");
var documentWindow = $(window);

win.setOptions({
   position: {
     top: documentWindow.scrollTop() + Math.max(0, (documentWindow.height() - jqElement.height()) / 5),
     left: documentWindow.scrollLeft() + Math.max(0, (documentWindow.width() - jqElement.width()) / 2)
   }
});

Regards,
Ivan Danchev
Progress Telerik

[Petr]

Thanks, Ivan, your solution works like a charm.

Peter