Grid on window popup

[MarkMember]

Hi

I have created a grid that renders perfectly on the page, however I would like to move this to a popup. I have the popup window defined as follows

    <div id="wnd_layout">
        <div style="overflow: hidden;">
            <div id="grd_Layout" style='display:block; margin-left: 25px; margin-bottom: 25px;'></div>
            <input style="margin-right: 5px;" type="button" id="layoutsave" value="Save" /><input id="layoutcancel" type="button" value="Cancel" />
        </div>
        <div id='cmu_Layout'>
            <ul>
                <li id="mui_LayoutDelete" onclick="cmu_LayoutEdit();">Layout Edit</li>
                <li id="mui_LayoutCancel">Cancel</li>
            </ul>
        </div>
    </div>

however when I create the jqxwindow as follows

        $("#wnd_layout").jqxWindow({ position: { x: parseInt(offset.left) + 400, y: parseInt(offset.top) - 100 }, width: '400px', isModal: true, title: 'Layout Information', theme: theme, autoOpen: false, cancelButton: $("#layoutcancel"), modalOpacity: 0.05 });
        $("#layoutcancel").jqxButton({ theme: theme });
        $("#layoutsave").jqxButton({ theme: theme });

$(“#grd_Layout”) becomes undefined – I have tried changing the order instantiation but I then end up with just a thin horizontal line. Any ideas?

Cheers

Mark

[Peter StoevKeymaster]

Hi Mark,

jqxWindow’s HTML Structure requires a DIV tag and two nested DIV tags. The first nested DIV tag is the Window’s title, the second one is the Window’s content. In the provided code, the Grid is in the Title’s DIV tag. I suppose it should be in the Content’s DIV tag.

Best regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MarkMember]

Excellent – thanks Peter – I added the second DIV and it worked straight away.

Interestingly, this issue doesn’t seem to affect a popup window when you are just using basic HTML capture elements. i.e. below is a popup on the same page that works but doesn’t have both DIVS, which is why I didn’t go back to the documentation.

    <div id="wnd_advertiser" style="display:none">
        <div style="overflow: hidden;">
            <table>
                <tr>
                    <td align="right">Name:</td>
                    <td align="left">
                        <input id="advertisername" /></td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td style="padding-top: 10px;" align="right">
                        <input style="margin-right: 5px;" type="button" id="advertisersave" value="Save" /><input id="advertisercancel" type="button" value="Cancel" />
                    </td>
                </tr>
            </table>
        </div>
    </div>

Anyway, thanks so much for your help – I have a complex page and this is the last issue I had.

Thanks

Mark

[Author]

Posts