Popup/Modal Window - Forum - Kendo UI Builder by Progress: OpenEdge Edition - Progress Community
 Forum

Popup/Modal Window

This question is answered

I'm using KUIB 2 and am trying to create a popup/modal window to show the user some information about their session.  I found the following Stack Overflow thread but I can't get it to work from within my controller.  

https://stackoverflow.com/questions/17205046/using-a-modal-window-with-kendoui-inside-of-angularjs

Basically, on my landing-page I put a link in my topSection.html that calls openUserProfilePopup().  The issue is that when openUserProfilePopup() runs, it errors on the call to setOptions because userProfilePopup (the kendo-window) isn't found. I can't find this object anywhere via the debugger either. I must be missing something, I just don't know what.

topSection.html:

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

controller.public.js:

openUserProfilePopup() {
  this.userProfilePopupOptions = {
     width: 550,
      height: 400,
     visible: false,
     actions: ["Close"]
  };
  this.userProfilePopup.setOptions(this.userProfilePopupOptions);
  this.userProfilePopup.center();
  this.userProfilePopup.open();


}

Louis

Verified Answer
  • 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

All Replies
  • 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