CODEWITHSUNDEEP
kendo-uikendo-window
user4546142
user4546142

Reputation:

Kendo Window positioning

I am using bootstrap template and Kendo Window and so far positioning of modal kendo windows wasn't too hard. But now as I a use a different layout for a certain area, I find myself having problems with that matter.

following code is expected to create a centered (x-axis) modal kendo window:

@(Html.Kendo().Window()
    .Name("Window1")
  .Visible(false)
      .Position(builder => builder.Top(100))
      .Draggable()
      .Content(@<div class="kendoWindowContent"><p>Please wait...</p><div class="k-loading-image"></div></div>)
    .Width(1000)
      .Title("Title1")
      .Actions(actions => actions.Close())
      .Modal(true)
      .Resizable())

..and displaying via:

   var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");

        wnd.refresh({
            url: '@Url.Action("Voucher_Create", "OwnerVoucher")'
        });

        wnd.open();

The window is not beeing displayed in the middle of the x axis.

Are there any constraints in order to have the kendo window beeing centered.

Upvotes: 2

Views: 6504

Answers (2)

user4546142
user4546142

Reputation:

ok I guess I was just lucky that all my kendo windows happened to be displayed centered although specifying an explicit offset to top like described. I assumed, that the window would automatically center on y-axis when having only an x-axis position set. As it seems this is not the case. I don't really know why this has been working in the past. Anyway, I figured out a way to center the window depending on the browsers' viewport and window width:

just in case anybodes cares...

 function displayWindowCenteredOnYAxis(kendoWindow) {

        var windowOptions = kendoWindow.options;

        var pos = kendoWindow.wrapper.position();

        var viewPortWidth = $(window).width();
        var wndWidth = windowOptions.width;

        pos.left = viewPortWidth / 2 - wndWidth/2;

        kendoWindow.wrapper.css({
            left: pos.left
        });

        kendoWindow.open();
 }

Usage:

    var wnd = $("#id").data("kendoWindow");

    wnd.refresh({
        url: '@Url.Action("Action", "Controller")'
    });

    displayWindowCenteredOnYAxis(wnd);

Upvotes: 1

dimodi
dimodi

Reputation: 4139

Window centering requires the usage of the center() method. Since the Window content is loaded via Ajax, you need to center the widget in its refresh event.

var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");
wnd.one("refresh", function(e) {
    e.sender.center();
});
wnd.refresh({
    url: '@Url.Action("Voucher_Create", "OwnerVoucher")'
});
wnd.open();

It is also possible to trigger centering in every refresh event, instead of just once.

Another option is to set explicit width and height. In this case you can center the Window at any time, because the widget dimensions will not change after changing (loading) the content.

Upvotes: 1

Related Questions