Hide error message with checkbox uncheck - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Cell, check, checkbox, edit, endcelledit, grid, jqxgrid, rowunselect, selectionmode, uncheck, validation

This topic contains 4 replies, has 2 voices, and was last updated by mallepaddi 11 years, 1 month ago.

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

Author

Hide error message with checkbox uncheck Posts

November 5, 2013 at 6:57 pm Hide error message with checkbox uncheck #31970

Participant

validation: function (cell, value) {
var datarow = $(productGrid).jqxGrid(‘getrowdata’, cell.row);
if (datarow.selected === true && value <= 0) {
return { result: false, message: "Enter Quantity (or) Unselect product." };
}
return true;
}

Error message appears when user selects the product by checking "check box", but user unable to unchecked check box if he doesn't want to proceed with same product, current condition forcing user to enter value once selected.

How to enable the user to unchecked check box and hide error message.

Thanks

November 6, 2013 at 9:47 am Hide error message with checkbox uncheck #32034

Dimitar

Participant

Hello mallepaddi,

Please check out the following example for a solution:

<!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.10.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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/orders.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editedCell = new Object();
            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 450,
                source: dataAdapter,
                theme: theme,
                sortable: true,
                filterable: true,
                editable: true,
                ready: function () {
                    // called when the Grid is loaded. Call methods or set properties here.         
                },
                selectionmode: 'checkbox',
                altrows: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
                  { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right',
                      cellbeginedit: function (row, datafield, columntype) {
                          editedCell = { row: row, column: datafield };
                      },
                      validation: function (cell, value) {
                          if (value > 30) {
                              return { result: false, message: "Please unselect row" };
                          };
                      }
                  },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
               ]
            });
            $('#jqxgrid').on('rowunselect', function (event) {
                var args = event.args;
                var row = args.rowindex;
                if (row == editedCell.row) {
                    $("#jqxgrid").jqxGrid('endcelledit', editedCell.row, editedCell.column, true);
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 6, 2013 at 12:52 pm Hide error message with checkbox uncheck #32042

mallepaddi

Participant

You are the best, i am almost there to finish my job, but how do we prevent user from selecting other checkboxes if selected row returning an error because of ZERO quantity entered.

Only possible options could be … either enter quantity or unselect the row, should be having choice of selecting other checkboxes ..

Thanks

November 6, 2013 at 3:37 pm Hide error message with checkbox uncheck #32054

Dimitar

Participant

Hi mallepaddi,

Here is an updated version of the example:

<!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.10.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.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/orders.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var editedCell = new Object();
            // create jqxgrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 450,
                source: dataAdapter,
                theme: theme,
                sortable: true,
                filterable: true,
                editable: true,
                ready: function () {
                    // called when the Grid is loaded. Call methods or set properties here.         
                },
                selectionmode: 'checkbox',
                altrows: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
                  { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right',
                      cellbeginedit: function (row, datafield, columntype) {
                          editedCell = { row: row, column: datafield };
                      },
                      validation: function (cell, value) {
                          if (value > 30) {
                              return { result: false, message: "Please unselect row" };
                          };
                      }
                  },
                  { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Country', datafield: 'ShipCountry' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
               ]
            });
            $('#jqxgrid').on('rowunselect', function (event) {
                var args = event.args;
                var row = args.rowindex;
                if (row == editedCell.row) {
                    $("#jqxgrid").jqxGrid('endcelledit', editedCell.row, editedCell.column, true);
                    editedCell.row = undefined;
                    editedCell.column = undefined;
                };
            });
            $('#jqxgrid').on('rowselect', function (event) {
                var args = event.args;
                var row = args.rowindex;
                if (row != editedCell.row && editedCell.row != undefined) {
                    $("#jqxgrid").jqxGrid('unselectrow', row, editedCell.column, true);
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 6, 2013 at 5:34 pm Hide error message with checkbox uncheck #32072

mallepaddi

Participant

Great help !!!!

Many thanks …

Author

Posts

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

You must be logged in to reply to this topic.