How to center MVVM Window

[Emil]

Hello,

 I am trying to center a kendo window using MVVM

 

<div data-role="window" data-modal="true" data-position="{top: '50%', left: '50%'}" data-title="Setup" data-width="600" data-height="350" data-bind="events: { open: onWindowOpened }">

 

that.viewModel = kendo.observable({
                onWindowOpened: function (e) {
                    console.log("test");

                }

});

 I can't get open event working. probably i can do it from there. Also with data-position set as attribute I cannot substract 50% - 300 and 50% - 175 to center the window. Please advice me.

 

Thanks.

 

[Alexander Popov]

Hello Emil,

The open event will not be triggered when the Window is first initialized, but on subsequent calls of its open method only. The simplest solution would be to manually call its center method after the binding, as shown here.

Regards,
Alexander Popov
Telerik

 

 

[Emil]

I would like to load the page with window closed. Is this possible?

[Alexander Popov]

Yes, this is done by setting the visible option to false. For example: 

<div data-role="window" data-visible="false" ....> </div>

Regards,
Alexander Popov
Telerik

 

 

[Emil]

Ok, may be I should mention earlier. Yes I am aware you can load the page with window hidden and then using data-bind="visible: isVisible" to open the window.

However I would like to use data-modal="modal". it works fine when window is opened with page load, however if you have this declaration <div data-role="window" data-visible="false" data-bind="visible: isVisible"....> </div> this window is opened on demand but is no longer modal. Just grayed out background is missing. Is this a defect?

Thanks.

[Emil]

I meant <div data-modal="true" data-role="window" data-visible="false" data-bind="visible: isVisible"....> </div>

[Emil]

Here I prepared a sample code

 

http://dojo.telerik.com/urEGu

[Emil]

So this has two problem:

 It is no longer modal and once closed you can't open it anymore. So if I want to go pure MVVM way to implement this it is not possible. As a workaround I create custom binding but I think this scenario is very common and should be supported out of the box.

 

Thanks.

[Alexander Popov]

Hi Emil,

The visible binding works with DOM elements in a manner that is different from the Window's visible option, hence the unexpected behavior. Using a custom binding that calls the Window's open and close methods when necessary is indeed the recommended approach. 

Regards,
Alexander Popov
Telerik