jQuery UI Widgets › Forums › Grid › "validation" event for check box
Tagged: check, checkbox, column, grid, jqxgrid, showvalidationpopup, validation
This topic contains 4 replies, has 2 voices, and was last updated by mallepaddi 11 years, 3 months ago.
-
Author
-
Hi
Shall we use below event for “checkbox”,
I need to validate field values entered in a grid row when the check box of that row is checked…
validation: function (cell, value) {
……
}please help ..
Thanks
Hello mallepaddi,
Here is an example on the matter:
<!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/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="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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 = ""; // prepare the data var data = generatedata(200, true); var source = { localdata: data, datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, editable: true, theme: theme, columns: [ { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Available', datafield: 'available', threestatecheckbox: false, columntype: 'checkbox', width: 70 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', validation: function (cell, value) { var checked = $('#jqxgrid').jqxGrid('getcellvalue', cell.row, "available"); if (checked == true) { if (value > 10) { return { result: false, message: "Quantity should be greater than 10." }; } else { return true; }; } else { return true; }; } }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' } ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi
Thanks for sharing code …
But Above code works when we are editing “Quantity” field ( with “Checkbox” checked )
But my scenario is … Message should be shown at “Quantity” field when check box selected …. not when editing quantity …
Thanks
Hi mallepaddi,
Here is another suggestion:
<!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/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="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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 = ""; // prepare the data var data = generatedata(200, true); var source = { localdata: data, datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'available', type: 'bool' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ], datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, editable: true, theme: theme, columns: [ { text: 'First Name', editable: false, datafield: 'firstname', width: 100 }, { text: 'Last Name', editable: false, datafield: 'lastname', width: 100 }, { text: 'Product', editable: false, datafield: 'productname', width: 180 }, { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 70 }, { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', editable: false, datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' } ] }); $("#jqxgrid").on('cellendedit', function (event) { var column = args.datafield; var row = args.rowindex; var value = args.value; if (column == "available" && value == true) { $("#jqxgrid").jqxGrid('showvalidationpopup', row, "quantity", "Invalid Value"); }; }); }); </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,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi
Thanks,
Implemented on “cellvaluechanged” event and it works great, additionally added “return false” with some conditions on “cellbeginedit” to make user not to select any other product with out solving the error of current selected product.
We have noticed a issue of showing error message at wrong place when the grid having scrollbars, message shown at wrong place when we scroll grid and the item selected.
Which was accepted by your team and it seems working on this fix.
Thanks
-
AuthorPosts
You must be logged in to reply to this topic.