Position Window other than center

9 posts, 0 answers
  1. michael
    michael avatar
    11 posts
    Member since:
    Jan 2008

    Posted 19 Dec 2011 Link to this post

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

    Mike B
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 19 Dec 2011 Link to this post

    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!
  3. wizmagister
    wizmagister avatar
    37 posts
    Member since:
    Nov 2011

    Posted 07 Jun 2012 Link to this post

    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). 
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 08 Jun 2012 Link to this post

    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!
  5. Mark
    Mark avatar
    13 posts
    Member since:
    Apr 2015

    Posted 18 May 2017 Link to this post

    Or...

    var dialog = $("#dialog").data("kendoDialog");
    dialog.open().element.closest(".k-window").css({
        top: 55,
        left: 450
     });
  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2062 posts

    Posted 22 May 2017 Link to this post

    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.
  7. Petr
    Petr avatar
    3 posts
    Member since:
    Jun 2018

    Posted 05 Nov 2018 in reply to Ivan Danchev Link to this post

    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

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2062 posts

    Posted 08 Nov 2018 Link to this post

    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.
  9. Petr
    Petr avatar
    3 posts
    Member since:
    Jun 2018

    Posted 09 Nov 2018 in reply to Ivan Danchev Link to this post

    Thanks, Ivan, your solution works like a charm.

    Peter

Back to Top