JSFiddle - React, Tailwind, and code Playground

by LijoCheeran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<body>
    <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>

</body>

JavaScript

$(document).ready(function () {

function updateActiveStatus(rowid, isToActive) {

alert('calling the function');

                 // first change the cell in the visible part of grid
                 $("#list").jqGrid('setCell', rowid, 'firstname', 'A');
                 // now change the internal local data
                 $("#list").jqGrid('getLocalRow', rowid).firstname = 'A';


                 $("#list").jqGrid('setCell', rowid, 'IsActive', false);
                 $("#list").jqGrid('getLocalRow', rowid).IsActive = false;            
            }


            var myData = [
                
                { "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23", "IsActive": true },
                { "id": "73", "firstname": null, "codeval": "W", "note": "dd1047", "amount": "34", "IsActive": true },
                { "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", "amount": "56", "IsActive": true },
                { "id": "95", "firstname": "EST", "codeval": "M", "note": "gg574", "amount": "55", "IsActive": true }
                ],

                myGrid = $("#list");

            myGrid.jqGrid({
                datatype:'local',
                data: myData,
                colNames: ['ID', 'FirstName', 'Code', 'Amount', 'Note', 'Status','Action'],
                colModel:[
                    {name:'id',width:70,align:'center',sorttype: 'int'},
                    {name:'firstname',width:80, align:'center'},
                    { name: 'codeval',  width: 70 },
                    {name:'amount',width:100, formatter:'number'},
                    {name:'note',index:'note',width:100,sortable:false},
                    {
                         name: 'IsActive',
                         width: 75,
                         formatter: function (cellvalue, options, rowObject) {

                             if (cellvalue == true) {
                                 return 'Active';
                           ...