Kendo Window positioning

Question

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

ого отображение с помощью:

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

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

     wnd.open(); 

окна не неоспоримый отображаются в центре оси х.

Есть ли какие-либо ограничения, чтобы окно кендо было центрировано.

Answer 1

Оконное центрирование требует использования метода center(). Поскольку содержимое Window загружается через 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(); 

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

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

Answer 2

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

    } 

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

вар WND = $ ("# идентификатор") данных ("kendoWindow").

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



    displayWindowCenteredOnYAxis(wnd);