jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 12 years, 4 months ago.

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

Author

dialog Posts

March 19, 2013 at 9:25 am dialog #17414

Member

how to display the dialog inside the dialog but the first dialog will not be close when saving the other second dialog please help me

March 19, 2013 at 10:58 am dialog #17454

Dimitar

Participant

Hi sudarshan,

I am not sure what you mean by saving the second dialog. However, here is an example, which might be helpful to you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow").jqxWindow({ height: 120, width: 180, theme: 'summer' });
                $("#jqxwindow2").jqxWindow({ height: 90, width: 150, theme: 'summer', okButton: $("#OK") });
            });
        </script>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div id="jqxwindow2">
                <div>
                    Header</div>
                <div>
                    Content<br />
                    <button id="OK">
                        OK</button></div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 19, 2013 at 4:06 pm dialog #17483

sudarshan

Member

Thanks Dimiter,
I say,in my second dialog box there is the simple form and that data will be save in the database when click the save in second dialog and the first dialog contains the grid which contain that database value.I need the first dialog database will be refresh but that dialog will not be close,…but that dialog(second dialog box) box only display when i click the grid rows items of the first dialog box.Help me please…

March 20, 2013 at 10:55 am dialog #17537

Dimitar

Participant

Hi sudarshan,

Here is an example, based on the Popup Editing demo. We hope it is helpful to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                }
            };
            // initialize the input fields.
            $("#firstName").addClass('jqx-input');
            $("#lastName").addClass('jqx-input');
            $("#product").addClass('jqx-input');
            $("#firstName").addClass('jqx-rc-all');
            $("#lastName").addClass('jqx-rc-all');
            $("#product").addClass('jqx-rc-all');
            $("#firstName").width(150);
            $("#firstName").height(23);
            $("#lastName").width(150);
            $("#lastName").height(23);
            $("#product").width(150);
            $("#product").height(23);
            if (theme.length > 0) {
                $("#firstName").addClass('jqx-input-' + theme);
                $("#lastName").addClass('jqx-input-' + theme);
                $("#product").addClass('jqx-input-' + theme);
                $("#firstName").addClass('jqx-rc-all-' + theme);
                $("#lastName").addClass('jqx-rc-all-' + theme);
                $("#product").addClass('jqx-rc-all-' + theme);
            }
            $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
            $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, theme: theme, spinButtons: true });
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editrow = -1;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 190 },
                  { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                 { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                     return "Edit";
                 }, buttonclick: function (row) {
                     // open the popup window when the user clicks a button.
                     editrow = row;
                     var offset = $("#jqxgrid").offset();
                     $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                     // get the clicked row's data and initialize the input fields.
                     var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                     $("#firstName").val(dataRecord.firstname);
                     $("#lastName").val(dataRecord.lastname);
                     $("#product").val(dataRecord.productname);
                     $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                     $("#price").jqxNumberInput({ decimal: dataRecord.price });
                     // show the popup window.
                     $("#popupWindow").jqxWindow('show');
                 }
                 },
                ]
            });
            $("#gridWindow").jqxWindow({ width: 'auto', height: 'auto' });
            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                        quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                    };
                    $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                    $("#popupWindow").jqxWindow('hide');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="gridWindow">
            <div>
                Grid</div>
            <div id="jqxgrid">
            </div>
        </div>
        <div style="margin-top: 30px;">
            <div id="cellbegineditevent">
            </div>
            <div style="margin-top: 10px;" id="cellendeditevent">
            </div>
        </div>
        <div id="popupWindow">
            <div>
                Edit</div>
            <div style="overflow: hidden;">
                <table>
                    <tr>
                        <td align="right">
                            First Name:
                        </td>
                        <td align="left">
                            <input id="firstName" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Last Name:
                        </td>
                        <td align="left">
                            <input id="lastName" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Product:
                        </td>
                        <td align="left">
                            <input id="product" />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Quantity:
                        </td>
                        <td align="left">
                            <div id="quantity">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Price:
                        </td>
                        <td align="left">
                            <div id="price">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                        </td>
                        <td style="padding-top: 10px;" align="right">
                            <input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel"
                                type="button" value="Cancel" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

You must be logged in to reply to this topic.