Popup/Modal Window

Hello Louis,

I got your sample code to work after doing some changes.

BTW, where were you calling openUserProfilePopup() from?

The includeContentLoaded handler is not being called from the landing-page code. (It is not generated in controller.js.)

I will log a bug report for this issue.

The approach that I ended up using was to add code to detect when the userProfilePopup is initialized and then open the popup.

Here is the code:

    openUserProfilePopup(kendoWindow) {
        var userProfilePopupOptions = {
	    width: 550,
	    height: 400,
	    visible: false,
	    actions: ["Close"]
        };

	kendoWindow.setOptions(userProfilePopupOptions);
        kendoWindow.center();
	kendoWindow.open();
    }

    onShow($scope) {
        console.log('Show');
		
        var that = this;		
	var cancelWatch = $scope.$watch(() => {
	    return angular.element("#userProfilePopup").data("kendoWindow");
        },(kendoWindow, oldValue)=>{
            if (kendoWindow) {			
                that.openUserProfilePopup(kendoWindow);
                cancelWatch();
            }
        });
    }

I hope this helps,

Edsel

Edsel,

I was able to get this working using parts of your example, thanks for the help.

Regarding how this is being called, it's not the most straight forward but I think it functions good for the user experience.  Since I'm not using the KUIB login, I replicated/replaced the user dropdown and created a "User Information" link using the following logic in onShow method.

       let login = angular.element("div.login.k-header");

       let html = '<div class="user-profile k-header ng-scope" ng-click="this.toggleUserProfileMenu()">' +

                  '   <i class="k-icon k-i-user"></i>' +

                  '   <i class="k-icon k-i-arrow-chevron-down "></i>' +

                  '   <div class="user-profile-tooltip ng-hide" ng-show="showUserProfileMenu" ng-click="this.showUserProfilePopup()" style="">' +

                  '      <div class="show-user-profile k-header"><i class="k-icon"></i>User Information</div>' +

                  '   </div>' +

                  '</div>';

       let chtml = this.jtslibService.compile(html)($scope);

       login.before(chtml);

The following is setup in the topSection.html.  This is very basic right now and I haven't actually implemented the variables to show the users information so those may change:

<div id="userProfilePopup" kendo-window="userProfilePopup" k-visible="false" k-modal="true">

  <div><span>Login:</span><span>{{this.profLogin}}</span></div>

  <div><span>Role:</span><span>{{this.profRole}}</span></div>

</div>

The following are setup in the controller constructor (this.appScope is the application level scope, I'm finding/setting this at the beginning of the constructor. I couldn't figure out another way for the menu to find my logic other than putting these 2 functions on the app level scope):

       this.appScope.toggleUserProfileMenu = () => {

           this.appScope.showUserProfileMenu = !this.appScope.showUserProfileMenu;

       }

       this.appScope.showUserProfilePopup = () => {

           console.log('Display showUserProfilePopup()');

           this.openUserProfilePopup();

       }

Finally, this method gets called from showUserProfileMenu():

   openUserProfilePopup() {

       let userProfilePopup = angular.element("#userProfilePopup").data("kendoWindow");

       this.userProfilePopupOptions = {

              width: 550,

              height: 400,

              visible: false,

              actions: ["Close"]

       };

       userProfilePopup.setOptions(this.userProfilePopupOptions);

       userProfilePopup.center();

       userProfilePopup.open();

   }

Louis