JSFiddle - React, Tailwind, and code Playground

by paulcavender

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
</div>
<input type="button" id="btn" value="click to validate" />

CSS

.erroredcolumn {
             background-color: red !important;
             z-index: 20000;
        }

JavaScript

$(document).ready(function () {

            // prepare the data
            var data = new Array();
       
            var row1 = {};
            row1["firstname"] = 'Andrew';
            row1["secondname"] = 'A';
 						
            var row2 = {};
            row2["firstname"] = '';
            row2["secondname"] = '';

						var row3 = {};
            row3["firstname"] = '';
            row3["secondname"] = 'C';
            
            data.push(row1);
            data.push(row2);
            data.push(row3);

						var source = {
                localdata: data,
                datatype: "array"
            };
            
            $("#jqxgrid").jqxGrid({
                width: "100%",
                source: source,
                autoheight: true,
                editable: true,
       		    	editmode: 'selectedcell',
					    	selectionmode: 'singlecell',
                columns: [{
                    text: 'First Name',
                    datafield: 'firstname',
                    width: 150,
                    cellsalign: 'left'
                },

                {
                    text: 'Second Name',
                    datafield: 'secondname',
                    width: 150,
                    cellsalign: 'left'
                }]
            });
            
           $("#btn").on('click', function () {
           	var columns = ['firstname', 'secondname'];
            $.each( columns, function( colIndex, eachColumn ) {
            	console.log(eachColumn);
               			});
			         });


        });