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>
<h3>Customers</h3>
<div id="jqxgrid"></div>
JavaScript
// prepare the data
function format(input, format, sep) {
var output = "";
var idx = 0;
for (var i = 0; i < format.length && idx < input.length; i++) {
output += input.substr(idx, format[i]);
if (idx + format[i] < input.length) output += sep;
idx += format[i];
}
output += input.substr(idx);
return output;
}
var source =
{
datafields: [
{ name: 'CustomerID' },
{ name: 'CompanyName' },
{ name: 'ContactName' },
{ name: 'Indicator', type: 'number' },
{ name: 'Address' },
{ name: 'City' },
{ name: 'Country' }
],
localdata: [{ "CustomerID": "ALFKI", "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "Indicator": "11111111111"}, { "CustomerID": "ANATR", "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "Indicator": "22222222222"}]
};
var local_length = source.localdata.length;
var dataAdapter = new $.jqx.dataAdapter(source);
var columnCheckBox = null;
var updatingCheckState = false;
$("#jqxgrid").jqxGrid(
{
width: 850,
height: 250,
source: dataAdapter,
columnsresize: true,
filterable: true,
sortable: true,
showfilterrow: true,
pageable: true,
enablebrowserselection: true,
pagesize: 5,
editmode: 'dblclick',
editable: true,
selectionmode: "singlerow",
autoheight: true,
altrows: true,
columns: [
{ text: 'Company Name', datafield: 'CompanyName', width: 250
},
{ text: 'Contact Name', datafield: 'ContactName', width: 150 },
{ text: 'Indicator', datafield: 'Indicator', width: 180,...