jQuery Grid

Invoke the focus method of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
    <button id="click">Click</button>
</div>

CSS

#wrapper {

}
#div1 {
    display: inline-block;
}
#div2 {
    display: inline-block;
}

JavaScript

//var data = generatedata(20);
var data = [
    {
     "id": "1",
     "name": "Hot Chocolate",
     "type": "Chocolate Beverage",
     "price": "-370",
     "totalfat": "16g",
     "protein": "14g"
     }, {
     "id": 2,
     "name": "Peppermint Hot Chocolate",
     "type": "Chocolate Beverage",
     "price": "440",
     "totalfat": "16g",
     "protein": "13g"
    }, {
     "id": "3",
     "name": "Salted Caramel Hot Chocolate",
     "type": "Chocolate Beverage",
     "price": "-450",
     "totalfat": "16g",
     "protein": "13g"
    }, {
     "id": "4",
     "name": "White Hot Chocolate",
     "type": "Chocolate Beverage",
     "price": "330",
     "totalfat": "16g",
     "protein": "12g"
    }, {
     "id": "5",
     "name": "Caffe Americano",
     "type": "Espresso Beverage",
     "price": "150",
     "totalfat": "0g",
     "protein": "1g"
    }, {
     "id": "6",
     "name": "Caffe Latte",
     "type": "Espresso Beverage",
     "price": "190",
     "totalfat": "7g",
     "protein": "12g"
    }, {
     "id": "7",
     "name": "Caffe Mocha",
     "type": "Espresso Beverage",
     "price": "330",
     "totalfat": "15g",
     "protein": "13g"
    }, {
     "id": "8",
     "name": "Cappuccino",
     "type": "Espresso Beverage",
     "price": "120",
     "totalfat": "4g",
     "protein": "8g"
    }
]

var source = {
    localdata: data,
    datafields: [{
        name: 'id',
        type: 'number'
    }, {
        name: 'name',
        type: 'string'
    }, {
        name: 'type',
        type: 'string'
    }, {
        name: 'price',
        type: 'number'
    }, {
        name: 'totalfat',
        type: 'number'
    }, {
        name: 'protein',
        type: 'number'
    }],
    datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
    width: 500,
    theme: 'energyblue',
    source: adapter,
    sortable: true,
    filterable: true,
    showfilterrow: true,
    editable: true,
     showstatusbar: true,
   ...