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 style="overflow: hidden;">
            <div style="border: none;" id="listbox">
            </div>
        </div>
        <div style="overflow: hidden;" id="ContentPanel">
        </div>
<div style="overflow: hidden;" id="jqxgrid">
        </div>

JavaScript

var source =
    {
      datafields: [
        { name: 'CustomerID' },
        { name: 'CompanyName' },
        { name: 'ContactName' },
        { name: 'ContactTitle' },
        {
          name: 'available',
          type: 'string'
        },
        { name: 'Address' },
        { name: 'City' },
        { name: 'Country' }
      ],
      id: 'CustomerID',

      localdata: [{ "CustomerID": "ALFKI", "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Region": null, "PostalCode": 12209, "Country": "Germany", "Phone": "030-0074321", "Fax": "030-0076545" }, { "CustomerID": "ANATR", "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Region": null, "PostalCode": 05021, "Country": "Mexico", "Phone": "(5) 555-4729", "Fax": "(5) 555-3745" }]
    };
var local_length = source.localdata.length;
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
  {
    width: 850,
    height: 250,
    source: dataAdapter,
    columnsresize: true,
    filterable: true,
    sortable: true,
    //FILTER ARROW CAUSED PROBLEMS WITH CHECKBOX
    pageable: true,
    enablebrowserselection: true,
    pagesize: 5,
    editable: false,
    selectionmode: "singlerow",
    autoheight: true,
    altrows: true,
    columns: [
      {
        text: 'Company Name', datafield: 'CompanyName', width: 250
      },
      { text: 'Contact Name', datafield: 'ContactName', width: 150 },
      { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
      { text: 'City', datafield: 'City', width: 120 },
      { text: 'Country', datafield: 'Country' }
    ]
  });
var dataFields1 = [
  { name: 'CustomerID' },
  { name: 'firstname' },
  { name: 'lastname' },
  { name: 'title' }
];
var source =
    {
      datafields: dataFields1,
      id: 'CustomerID',
     ...