This topic contains 7 replies, has 2 voices, and was last updated by  Hristo 8 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • jqxPopover "Parent" #78411

    roblajolla
    Participant

    Hi,

    I am trying to use a jqxPopover within a jqxWindow that I open in modal mode “above” the main application page. I have a jqxToolBar control at the top of jqxWindow with a tool that creates and opens a jqxPopover. The problem is that the jqxPopover thinks it is tied to the main page and not to the jqxWindow that is opened in modal mode. I tried using jQuery to change the parent of the jqxPopover to the modal jqxWindow and that doesn’t work. If I make the jqxPopover a modal popover, then the main application page dims and not the jqxWindow that should the the “parent”. Moving the jqxPopover to within the DIV structure of the jqxWindow has no affect.

    How do I get the jqxPopover to think it’s opening “parent” is the jqxWindow and not the background application?

    <div id=’jqxWindowPopup’style=’position: absolute;’>

    <div id=’PopupHeader’ style=’height: 15px; width: 100%; border: 0; margin: 0; padding: 0; border: none;’></div>
    <div id=’PopupBody’ style=’display: flex; flex-direction: column; height: 100%; width: 100%; margin: 0; padding: 0;’>
    <div id=’jqxWindowPopupToolBar’ style=’flex-shrink: 0;’></div>
    <div id=’jqxWindowPopupContent’ style=’overflow: auto; height: 100%; width: 100%;’></div>
    </div>
    </div>

    <div id=’jqxPopoverResults’>

    <div id=’jqxResultsListBox’ style=’border: none;’></div>

    </div>

    Thanks,

    Rob

    jqxPopover "Parent" #78449

    Hristo
    Participant

    Hello roblajolla,

    Could you like to provide us example in jseditor/fiddle for better analyze.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxPopover "Parent" #78467

    roblajolla
    Participant

    Here is a simple example of what I mean. Notice that the popover does NOT open with the popup window as its parent. Rather, it opens with the main document as its parent. You can alter the isModal attributes to further illustrate.

    thank you!

    <!doctype html>
    <html lang=”en”>
    <head>
    <meta charset=”UTF-8″>
    <meta name=”Generator” content=”EditPlusĀ®”>
    <meta name=”Author” content=””>
    <meta name=”Keywords” content=””>
    <meta name=”Description” content=””>
    <title>Document</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>

    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxtoolbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxpopover.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    $(‘#jqxButton’).jqxButton( { width: ‘150’} );
    $(‘#jqxButton’).on(‘click’, function () {
    $(‘#jqxWindowPopup’).jqxWindow( { isModal: true, autoOpen: false, width: ‘85%’, height: ‘85%’ });
    $(‘#jqxToolBar’).jqxToolBar({
    width: ‘100%’, height: 35, tools: ‘button’, initTools: function (type, index, tool, menuToolInitialization) {
    tool.jqxButton( { width: 50 });
    tool.attr(‘id’, ‘jqxMenuButton’);
    tool.text(‘Popover’);
    tool.on(‘click’, function () {
    })
    }
    });
    $(‘#jqxPopover’).jqxPopover( {selector: $(‘#jqxMenuButton’), showCloseButton: true, isModal: true });
    $(‘#jqxWindowPopup’).jqxWindow(‘open’);
    });
    });
    </script>
    </head>
    <body>
    <div>
    <input type=”button” value=”Open Window” id=’jqxButton’ />
    </div>
    <div id=’jqxWindowPopup’>
    <div id=’jqxToolBar’></div>
    </div>
    <div id=’jqxPopover’></div>
    </body>
    </html>

    jqxPopover "Parent" #78498

    Hristo
    Participant

    Hello roblajolla,

    Please take a look this example: https://www.jseditor.io/?key=jqwidgets-window-combination
    Important for jqxWindow is to have two divs (header and content). Another setting is in CSS (bigger z-index:)

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxPopover "Parent" #78505

    roblajolla
    Participant

    Hristo,

    Thank you for the suggestion. I actually do have 2 divs in the jqxWindowPopup my actual program – I accidentally omitted it in the example – sorry.

    The behavior you suggest isn’t quite what I was hoping for. In your example, I have to do a series of event programming to catch all of the possible events that can happen with the popup window. The actual Popover moves with the parent window and closes automatically when the parent window is clicked.

    A better solution would be to have this behavior cascaded to the popover of the popup. In fact, if you make the popover modal, the main window is disabled, not the popup window.

    If you are planning a fix for this in a future release I will code a temporary fix and wait for the real fix.

    Otherwise, do you have any other suggestions?

    Thanks,

    Rob

    jqxPopover "Parent" #78523

    Hristo
    Participant

    Hello roblajolla,

    Sorry for this misunderstanding. Now with little CSS settings you could achieve this.
    .jqx-popover-modal-background { z-index: 99999; }
    Here you could see renewed example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    jqxPopover "Parent" #78870

    roblajolla
    Participant

    Hristo,

    Sadly this solution does not work if the popup window is modal, which is what I need. There must be a way to change the “parent” of the popover window to the popup window so the popover opens relative to the popup and not the background window.

    Thanks,

    Rob

    jqxPopover "Parent" #78895

    Hristo
    Participant

    Hi Rob,

    Thank you for using our product.
    Could you look at this example:
    https://www.jseditor.io/?key=jqwidgets-window-combination-second-edition

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.