jQWidgets Forums

Tagged: grid, jqxgrid, jqxvalidator, popup editing, validator

This topic contains 6 replies, has 4 voices, and was last updated by support 12 years ago.

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

Author

jqxvalidator with popup edit Posts

January 2, 2013 at 10:39 pm jqxvalidator with popup edit #13042

dke

Participant

Hi,

Does anyone has an example jqxvalidator with popup edit (ie. use can’t click the save button until all the fields are validated.)

Thanks

dke

January 3, 2013 at 7:30 am jqxvalidator with popup edit #13048

Dimitar

Participant

Hello dke,

Here is a modified version of the Popup Editing demo, using jqxValidator. The validator checks for Last Name and Quantity.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons.
        To save the changes, click the 'Save' button in the popup dialog. To cancel the
        changes click the 'Cancel' button in the popup dialog.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.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="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            // prepare the data
            var data = generatedata(200);
            var source =
            {
                localdata: data,
                datatype: "array",
                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").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);
            }
            $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
            $("#price").jqxNumberInput({ 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');
                 }
                 },
                ]
            });
            // 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 () {
                var check = $('#testForm').jqxValidator('validate');
                if (check == true) {
                    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');
                    }
                };
            });
            $("#testForm").jqxValidator({
                rules: [
                    { input: '#lastName', message: 'Last name is required!', action: 'keyup, blur', rule: 'required' },
                    { input: '#quantity', message: 'Quantity must be greater than 4!', action: 'blur', rule: function () {
                        var quantity = $("#quantity").jqxNumberInput('val');
                        var result = quantity > 4;
                        return result;
                    }
                    }
                    ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </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;">
                <form id="testForm" action="./">
                <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>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 3, 2013 at 4:03 pm jqxvalidator with popup edit #13077

dke

Participant

Thanks Dimitar, it works perfect!

January 10, 2013 at 10:49 pm jqxvalidator with popup edit #13463

dke

Participant

Hi Dimitar,

User enter some invalid data and the hints message displayed and when they clicked “Cancel” the hints message was still there. How do I clear once user clicked “Cancel”?

Thanks.
DKE

January 15, 2013 at 8:29 am jqxvalidator with popup edit #13621

Dimitar

Participant

Hi DKE,

We were not able to reproduce the reported issue. Please make sure you use the latest version (as of now, it is 2.6). If the issue persists, a possible workaround is to add an additional functionality to the Cancel button, i.e.:

            $("#Cancel").click(function () {
                $('#form').jqxValidator('hideHint', '#lastName');
                $('#form').jqxValidator('hideHint', '#quantity');
            });

Best Regards,
Dimitar

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

May 13, 2013 at 9:20 am jqxvalidator with popup edit #21021

komathi

Member

from where i can download generator.js file and script files

May 13, 2013 at 9:45 am jqxvalidator with popup edit #21023

support

Participant

Hi komathi,

generator.js script file is included in the download package. You can download it from:http://www.jqwidgets.com/download/

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.