Кендо Окно позиционирования

Question

Я использую bootstrap шаблон и Kendo Window и до сих пор позиционирование модальных окон кендо не было слишком сложным. Но теперь, когда я использую другой макет для определенной области, у меня возникают проблемы с этим вопросом.

следующий код, как ожидается, создаст центрированное (ось X) окно модального кендо:

@(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())

..и отображение через:

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

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

        wnd.open();

Окно не отображается в середине оси X.

Существуют ли какие-либо ограничения для центрирования окна кендо?

Answer 1

Центрирование окна требует использования center() метод. Поскольку содержимое окна загружается через Ajax, вам нужно центрировать виджет в его refresh событие.

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

Также возможно инициировать центрирование в каждом событии обновления, а не только один раз.

Другой вариант - установить явное width а также height, В этом случае вы можете центрировать окно в любое время, потому что размеры виджета не изменятся после изменения (загрузки) содержимого.

Answer 2

Хорошо, я думаю, мне просто повезло, что все мои окна кендо оказались по центру, хотя указывалось явное смещение к вершине, как описано. Я предположил, что окно будет автоматически центрироваться по оси Y, когда будет задана только позиция оси X. Как кажется, это не так. Я действительно не знаю, почему это работало в прошлом. В любом случае, я нашел способ центрировать окно в зависимости от области просмотра браузера и ширины окна:

на всякий случай заботится anybodes...

 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();

    }

использование:

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

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



    displayWindowCenteredOnYAxis(wnd);