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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.6/js??/jquery.jqgrid.min.j??s"></script>
<body>
    <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>

</body>

JavaScript

$(document).ready(function () {

function updateActiveStatus(rowid, isToActive) {

     alert(isToActive);

     $("#list").jqGrid('setCell', rowid, 'IsActive', isToActive);
     $("#list").jqGrid('getLocalRow', rowid).IsActive = isToActive;
     
     //Set display text
      $("#list").jqGrid('setCell', rowid, 'ActiveStatusText', isToActive);
  }


            var myData = [
                
                { "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23", "IsActive": true }
                
                ],

                myGrid = $("#list");

            myGrid.jqGrid({
                datatype:'local',
                data: myData,
                colNames: ['ID', 'Note','Status', 'Action'],
                colModel:[
                    {name:'id',width:70,align:'center',sorttype: 'int'},
                    {name:'note',index:'note',width:100,sortable:false},
                     {
                        name: 'ActiveStatusText',
                        width: 100,
                        formatter: function (cellvalue, options, rowObject) {
                            return rowObject.IsActive == true ? 'Active' : 'Retired';
                        }
                    },
                    {
                        name: 'IsActive',
                        width: 100,
                        formatter: function (cellvalue, options, rowObject) 												{
                            if (cellvalue == true) {
                                return '<div><button class="ui-button ui-widget ui-state-default app-custom-button-retire" >' +
                                   'Retire' +'</button></div>';
                            }
                            else {
                                return '<div><button class="ui-button ui-widget ui-state-default app-custom-button-activate" >' +
                                        'Activate' +
                                        '</button></div>';
                 ...