jqxgrid

by bhupendra negi

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",
        "location": " ",
        "locations": [
            "current",
            "0",
            "1"
        ]
    },
    {
        "id": "2",
        "name": "Robert",
        "country": "UK",
        "location": "",
        "locations": [
            "London",
            "Cardiff",
            "Liverpool"
        ]
    }
]

// prepare the data
var source = {
    datatype: "json",
    localdata: data,
    datafields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'country',
        type: 'string'
    }, {
        name: 'location',

    },
                {
        name: 'locations',
        
    },
                
                ],
    id: 'id',
};


var dataAdapter = new $.jqx.dataAdapter(source);
                 console.log(dataAdapter);


         $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
             
                columnsresize: true,
                editable: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: "33%" },
                  { text: 'Country', datafield: 'country', width: "33%" },
                  { text: 'Location', datafield: 'location', width: "34%", columntype: "dropdownlist", initeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                      editor.jqxDropDownList({ source: dataAdapter.records[row].locations });
                  }
                  }
              ]
            });