JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.1/js/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<table id="grid"></table>
<p><button id="getProf">get Pepe's Profession</button></p>

JavaScript

var theGrid = $("#grid");
var myData = [
	{
	   "Id": 1,
	   "Name": "John",
	   "Profession": "Doctor"
	},
	{
	   "Id": 2,
	   "Name": "Pepe",
	   "Profession": "Doctor"
	},
	{
	   "Id": 3,
	   "Name": "Jane",
	   "Profession": "Nurse"
	}
];


theGrid.jqGrid({
    url: "/echo/json/",
    datatype: "json",
    mtype: "POST",
    postData: {
        json: JSON.stringify(myData)
    },
    colNames: ['Id', 'Name'],
    colModel: [
        {name: 'Id', key: true},
        {name: 'Name'}
    ],
    loadonce: true,
    additionalProperties: ["Profession"]
});

$("#getProf").click(function() {
    var allData = theGrid.jqGrid("getGridParam").data;
    console.log(JSON.stringify(allData));

	//show Pepe's Profession:
	$.each(allData, function(i, v){
		if(v.Name === "Pepe")
		alert(v.Profession);
	});
});