Modal Window and AngularJS

7 posts, 1 answers
  1. Keith
    Keith avatar
    88 posts
    Member since:
    May 2007

    Posted 22 Jul 2014 Link to this post

    Hi

    I'm currently trying to learn all of this so if I'm being stupid please forgive me!

    I'm using the ui-router from Angular and have a nested state which I would like to display inside a Window (consisting of a html view and it's related controller). Unfortunately I don't see anything in the window. If I move the ui-view div to outside of the window div, everything is displayed correctly.

    I'm guessing it's something to do with how Kendo appends the Window to the end of the document body which means my ui-view is no longer in the same controller scope?

    Here's my routing script:
    .state("matches", {
           url: "/matches",
           templateUrl: "Views/matches.html"
    })
     
    .state("matches.fixture", {
        params: ['FixtureID'],
        views: {
            'fixture' : {
                templateUrl: 'Views/matches.fixture.html',                              
            }
        }
    })

    (I moved to named views thinking that this may solve the issue. Originally I was just using an empty ui-view attribute)

    and the view code:
    <!-- Kendo Window which receives the view loaded by the state change-->
    <div kendo-window="winMatch" k-title="'Fixture Detail'"
         k-width="600" k-height="200" k-visible="false"
         k-modal="true">
        <div ui-view="fixture">
        </div>
    </div>


    Please can you help me to get this working (if possible) or suggest a better way of using the Window with Angular?

    Thanks
    Keith
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Jul 2014 Link to this post

    Hi,

    Indeed the window by default appends itself in the BODY element. You can override this by setting its appendTo option. Perhaps setting it will address this issue. If this doesn't help please provide a runnable demo which reproduces the problem. You can start by editing the angularjs window demo.

    Regards,
    Atanas Korchev
    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. Keith
    Keith avatar
    88 posts
    Member since:
    May 2007

    Posted 24 Jul 2014 in reply to Atanas Korchev Link to this post

    Hi Atanas

    Thanks for this, the appendTo did the trick!
  5. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Jan 2011

    Posted 21 Apr 2015 Link to this post

    Hi, Keith.

    Can you explain, how did you solve it? Where did you place the "ui-view" div? "appendTo" doesn't work for me. When I place the ui-view div outside the window - it shows me correct content, but outside the window :). When I place it inside the window div it displays copy of my parent state inside the window. Tried "k-append-to" and .setOptions({ appendTo: "div#tiPreview"}); Nothing works for me :(

    What is the trick? :)

  6. Keith
    Keith avatar
    88 posts
    Member since:
    May 2007

    Posted 21 Apr 2015 in reply to Vladimir Link to this post

    Hi Vladimir

    It's a while since I did this but having looked back through the code it seems I had to do the following:

    In the "owning" view, I have the following markup note the two divs. The "hack" div is where you append the window.

     

    <div id="winMatchHack">
    </div>
     
    <!-- Kendo Window which receives the view loaded by the state change-->
    <div kendo-window="winMatch" k-options="windowOptions">
        <div ui-view>
        </div>
    </div>

    Then in the controller, I have the following for the window options

    $scope.windowOptions = {
        title : 'Fixture Detail',
        width : 600,
        height : 200,
        visible : false,
        modal: true,
        appendTo: '#winMatchHack',
        close: $scope.onWinMatchClosed,
    }
     

    Good luck!

    Keith

  7. Keith
    Keith avatar
    88 posts
    Member since:
    May 2007

    Posted 21 Apr 2015 Link to this post

    Sorry forgot to show my state:

    .state("matches.fixture", {
                            params: ['FixtureID'],
                            templateUrl: 'Views/matches.fixture.html',
                            controller: function($scope) {
                                $scope.$parent.winMatch.open();
                            }
                        })
  8. Vladimir
    Vladimir avatar
    15 posts
    Member since:
    Jan 2011

    Posted 22 Apr 2015 in reply to Keith Link to this post

    It works!

    Thank You very much!

Back to Top
Kendo UI is VS 2017 Ready