Kendo Window not centered after Refresh

5 posts, 0 answers
  1. Omar
    Omar avatar
    6 posts
    Member since:
    Sep 2012

    Posted 18 Jun 2014 Link to this post

    I know this problem has been addressed in several threads but all the solutions are not working for me:
    This is my simple code:
    01.  $(function () {
    02.        var window = $("#popup").kendoWindow({
    03.          animation: {
    04.              open: {
    05.                  effects: { fadeIn: {} },
    06.                  duration: 200,
    07.                  show: true
    08.              },
    09.              close: {
    10.                  effects: { fadeOut: {} },
    11.                  duration: 600,
    12.                  hide: true
    13.              }
    14.          },
    15.          visible: false,
    16.          title: "Create ...",
    17.          modal: true,
    18.          close: function () {},
    19.           
    20.      }).data("kendoWindow");
    21.       
    22.      window.bind("refresh", function() {
    23.          window.center();
    24.          window.open();
    25.      });
    26.  });
    27.  function createNewNotam() {
    28. 
    29.      var model = @Html.Raw(Json.Encode(subjectModel))
    30. 
    31.      $("#NSDEditor-Popup").data("kendoWindow")
    32.          .content("")
    33.          .refresh({
    34.              url: "../Dashboard/Create",
    35.              type: "POST",
    36.              data: model
    37.          });
    38.}

    The window still show in the center, then load content and become off the screen to the bottom.

    What I am doing wrong here?

    Thanks.





  2. Omar
    Omar avatar
    6 posts
    Member since:
    Sep 2012

    Posted 18 Jun 2014 in reply to Omar Link to this post

    Note, The ID of the window is correct in the createNewNotam function as "#popup".
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jun 2014 Link to this post

    Hi Omar,

    Assuming that the Window ID is correct, your code is OK. Note that if the Window content itself loads some additional content with Ajax after the refresh event has fired, the Window will not be aware of this and will no longer center itself. In this case you need to recenter the widget manually.

    In addition, please be aware that centering was not precise even when it worked in older Kendo UI versions (it was off by about 20-30 px). This is fixed in the latest version 2014.1.528.

    If you believe you have a different problem, which is caused by the Window widget, but is unrelated to the above, please provide a demo for further investigation.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Omar
    Omar avatar
    6 posts
    Member since:
    Sep 2012

    Posted 23 Jun 2014 in reply to Dimo Link to this post

    So what can I do to manually center the window after the content is finished loading?

    What event can I hock to? is it the document ready of the content?
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 25 Jun 2014 Link to this post

    Hello Omar,

    Based on what you said, my understanding is that you are loading some content with Ajax inside the Window after the partial view has been loaded in the widget.

    So how to center the Window again after the second loading? Well, it depends on the content and how you are loading it. For example, if you are doing $.ajax, there are success and complete callbacks that you can use. document.ready should work as well. You can ask yourself the following question - how would you know that the discussed content is loaded if it was loaded outside the Kendo UI Window?

    Another possible option is to hard-code a suitable height for the whole Window content or the Window itself, so that the widget height is predictable.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready