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>
</div>

JavaScript

var data = [{'firstname':'ok1','progress':20},{'firstname':'ok2','progress':80}]
var source = {
    localdata: data,
    datafields: [{
        name: 'firstname',
        type: 'string'
    }, { name: 'progress', type: 'number' }],
    datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
    width: 500,
    theme: 'energyblue',
    source: adapter,
     altRows: true,
                sortable: true,
                width: '100%',
                autoheight: true,
                autorowheight: true,
                pageable: true,
                pagesize:20,
                enableHover: false,
                selectionmode: 'singlerow',
                showtoolbar: true,autoshowfiltericon: true,
                filterable: true,
                showfilterrow: true,
                showsortmenuitems: false,
                editable: true,
    ready: function () {
        $("#jqxgrid").jqxGrid('selectrow', 0);
        $('#jqxgrid').jqxGrid('focus');
    },
    columns: [{
        text: 'First Name',
        datafield: 'firstname',
        columngroup: 'Name',
        width: '50%'
    }, {
         text: 'Progress',
         editable: false,
         dataField: 'progress',
          width: '50%',
         cellsrenderer: function (row, colum, value) { 
         	var cell = '<div style="width:100%;height: 100%;">'; 
          cell += '<div style="background: #47a447; float: left; width: ' + value + '%;height: 100%; ">'; 
          cell += '<div style="position: absolute;top: 40%;left: 40%;">' + value.toString() + '%' + '</div>'; 
          cell += '</div></div>'; 
          return cell; 
           }
        }]
});