This is a migrated thread and some comments may be shown as answers.

How to center MVVM Window

8 Answers 127 Views
Window
This is a migrated thread and some comments may be shown as answers.
Emil
Top achievements
Rank 1
Emil asked on 31 May 2015, 02:59 PM

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.

 

8 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 02 Jun 2015, 04:23 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Emil
Top achievements
Rank 1
answered on 02 Jun 2015, 04:49 PM
I would like to load the page with window closed. Is this possible?
0
Alexander Popov
Telerik team
answered on 03 Jun 2015, 06:54 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Emil
Top achievements
Rank 1
answered on 03 Jun 2015, 07:28 AM

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.

0
Emil
Top achievements
Rank 1
answered on 03 Jun 2015, 07:28 AM
I meant <div data-modal="true" data-role="window" data-visible="false" data-bind="visible: isVisible"....> </div>
0
Emil
Top achievements
Rank 1
answered on 03 Jun 2015, 07:35 AM

Here I prepared a sample code

 

http://dojo.telerik.com/urEGu

0
Emil
Top achievements
Rank 1
answered on 03 Jun 2015, 07:38 AM

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.

0
Alexander Popov
Telerik team
answered on 05 Jun 2015, 06:36 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Window
Asked by
Emil
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Emil
Top achievements
Rank 1
Share this question
or