How to center MVVM Window

9 posts, 0 answers
  1. Emil
    Emil avatar
    9 posts
    Member since:
    Feb 2015

    Posted 31 May 2015 Link to this post

    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.

     

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 02 Jun 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Emil
    Emil avatar
    9 posts
    Member since:
    Feb 2015

    Posted 02 Jun 2015 in reply to Alexander Popov Link to this post

    I would like to load the page with window closed. Is this possible?
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 03 Jun 2015 Link to this post

    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!
     
  6. Emil
    Emil avatar
    9 posts
    Member since:
    Feb 2015

    Posted 03 Jun 2015 in reply to Alexander Popov Link to this post

    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.

  7. Emil
    Emil avatar
    9 posts
    Member since:
    Feb 2015

    Posted 03 Jun 2015 in reply to Emil Link to this post

    I meant <div data-modal="true" data-role="window" data-visible="false" data-bind="visible: isVisible"....> </div>
  8. Emil
    Emil avatar
    9 posts
    Member since:
    Feb 2015

    Posted 03 Jun 2015 Link to this post

    Here I prepared a sample code

     

    http://dojo.telerik.com/urEGu

  9. Emil
    Emil avatar
    9 posts
    Member since:
    Feb 2015

    Posted 03 Jun 2015 in reply to Emil Link to this post

    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.

  10. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 05 Jun 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready