jqxgrid

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxmenu.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.edit.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
<div id="jqxgrid">

CSS

body{width:100px }

JavaScript

var data = [
    {
        "id": "1",
        "name": "John",
        "country": "USA",
        "location1": " ",
        "location2": " ",
        "location3": " ",
        "location4": " ",
        "location5": " ",
        "location6": " ",
        "location7": " ",
        "location8": " ",
        "location9": " ",
        "location10": " ",
        "location11": " ",
        "location12": " ",
        "location13": " ",
        "location14": " ",
        "location15": " ",
        "location16": " ",
        "location17": " ",
        "location18": " ",
        "location19": " ",
        "location20": " ",
        "location21": " ",
        "location22": " ",
        "location23": " ",
        "location24": " ",
        "location25": " ",
        "location26": " ",
        "location27": " ",
        "location28": " ",
        "location29": " ",
        "location30": " ",
        "location31": " ",
        "location32": " ",
        "location33": " ",
        "location34": " ",
        "locations": [
            "current",
            "0",
            "1"
        ]
    },
    {
        "id": "2",
        "name": "Robert",
        "country": "UK",
        "location1": " ",
        "location2": " ",
        "location3": " ",
        "location4": " ",
        "location5": " ",
        "location6": " ",
        "location7": " ",
        "location8": " ",
        "location9": " ",
        "location10": " ",
        "location11": " ",
        "location12": " ",
        "location13": " ",
        "location14": " ",
        "location15": " ",
        "location16": " ",
        "location17": " ",
        "location18": " ",
        "location19": " ",
        "location20": " ",
        "location21": " ",
        "location22": " ",
        "location23": " ",
        "location24": " ",
        "location25": " ",
        "location26": " ",
        "location27": " ",
        "location28": " ",
        "location29": " ",
        "location30": " ",
        "location31": " ",
...