Position Window other than center

5 Answers 1874 Views
Window
michael
Top achievements
Rank 2
michael asked on 19 Dec 2011, 04:04 PM
Can I set the top left X and Y position of a kendoWindow?

Mike B

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Dec 2011, 04:34 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
wizmagister
Top achievements
Rank 2
answered on 07 Jun 2012, 09:38 PM
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). 
0
Alex Gyoshev
Telerik team
answered on 08 Jun 2012, 06:12 AM
A more optimal way would be:

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


Regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mark
Top achievements
Rank 1
Veteran
answered on 18 May 2017, 05:06 PM

Or...

var dialog = $("#dialog").data("kendoDialog");
dialog.open().element.closest(".k-window").css({
    top: 55,
    left: 450
 });
0
Ivan Danchev
Telerik team
answered on 22 May 2017, 08:17 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Petr
Top achievements
Rank 1
commented on 05 Nov 2018, 09:46 PM

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
Telerik team
commented on 08 Nov 2018, 05:21 PM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Petr
Top achievements
Rank 1
commented on 09 Nov 2018, 12:52 PM

Thanks, Ivan, your solution works like a charm.

Peter

Tags
Window
Asked by
michael
Top achievements
Rank 2
Answers by
Dimo
Telerik team
wizmagister
Top achievements
Rank 2
Alex Gyoshev
Telerik team
Mark
Top achievements
Rank 1
Veteran
Ivan Danchev
Telerik team
Share this question
or