Позиционирование окна кендо

Я использую шаблон 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.

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


kendo-ui kendo-window
person Community    schedule 09.12.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Центрирование окна требует использования 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. В этом случае вы можете центрировать окно в любое время, потому что размеры виджета не изменятся после изменения (загрузки) содержимого.

person dimodi    schedule 10.12.2016
comment
Спасибо за ваш вклад! Я не хочу, чтобы окно отображалось по центру оси y, а только по оси x (я использую смещение +200 вверх (y = 0), поэтому я не могу использовать метод center() для своей цели. - person ; 12.12.2016
comment
другое дело: событие с явно заданными размерами и центрированием окна не отображается в самом центре. - person ; 12.12.2016
comment
у вас здесь опечатка: wnd.one(refresh, function(e) { e.sender.center(); }); - person ; 12.12.2016

arrow_upward
1
arrow_downward

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

на всякий случай...

 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);
person Community    schedule 12.12.2016