JQuery Grid

Invoke the showvalidationpopup method of the jqxGrid. Author: http://jqwidgets.com

by inee814

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<input type="button" style="margin: 10px;" id="checkCell" value="checkCell" />

JavaScript

var data = generatedata(5);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 600,
     height: 200,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     editable:true,
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right',
         validation: function(cell, value) {
         	return value < 10 ? {result: false, message: "Invalid Value"} : true;
         },
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }],
 });
 

 $("#checkCell").jqxButton({
     theme: 'energyblue',
     height: 30
 });
 
 $("#checkCell").click(function () {    
  const data = $('#jqxgrid').jqxGrid('getboundrows');
  for( let i = 0; i < data.length; i ++){
    var datafield = 'quantity';
    var cell = $('#jqxgrid').jqxGrid('getcell', i, datafield);

    if(cell.value < 10 ) {
      $("#jqxgrid").jqxGrid('showvalidationpopup', cell.row, "quantity", "Invalid Value");
    }
  }
});

 $("#jqxgrid").on("cellvaluechanged", function(event) {
     // event arguments.
    var args = event.args;
    // column data field.
    var datafield = event.args.datafield;
    // row's bound index.
 ...