Code below based in answer from How to set focus to cell which was clicked to start inline edit in jqgrid
is used to put focus to clicked cell to start inline editing of this cell in single click.
If jqgrid is wide so that horizontal scrollbar appears and rightmost column is clicked, jqgrid scrolls to leftmost column and after that it scrolls back to clicked column.
This causes unpleasant flashing visual effect. How to remove this flashing ?
To reproduce, open page below in Chrome, scroll right and click in Amount column. Grid flashes before editing starts. How to remove this flashing ?
Is is possible to turn screen update off during this scroll, put all grid cells to edit mode initially or other idea ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="author" content="Oleg Kiriljuk"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.src.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $,Modernizr */
/*jslint browser: true, unparam: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" }
],
$grid = $("#list"),
initDateEdit = function (elem, options) {
// we need get the value before changing the type
var orgValue = $(elem).val(), newformat,
cm = $(this).jqGrid("getColProp", options.name);
$(elem).attr("type", "date");
if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
// if type="date" is not supported call jQuery UI datepicker
$(elem).css({ width: "8em" }).datepicker({
dateFormat: "d.m.Y",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
} else {
// convert date to ISO
if (orgValue !== "") {
//newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
// cm.formatoptions.newformat :
// $(this).jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
$(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "Y-m-d"));
}
// "10em" is better for Chrome and "11em" for Opera 24
$(elem).css("width", /OPR/.test(navigator.userAgent) ? "11em" : "10em");
}
},
myBeforeSaveRow = function (options, rowid) {
var $self = $(this), $dates = $("#" + $.jgrid.jqID(rowid)).find("input[type=date]");
$dates.each(function () {
var $this = $(this), newformat, str,
id = $this.attr("id"),
colName = id.substr(rowid.length + 1),
cm = $self.jqGrid("getColProp", colName);
if ((Modernizr && Modernizr.inputtypes.date) || $this.prop("type") === "date") {
// convert from iso to newformat
str = $this.val();
if (str !== "") {
//newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
// cm.formatoptions.newformat :
// $self.jqGrid("getGridRes", "formatter.date.newformat");
newformat="d.m.Y";
str = $.jgrid.parseDate.call($self[0], "Y-m-d", str, newformat);
}
$this.attr("type", "text");
$this.val(str);
}
});
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "mm/dd/yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 50);
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
function PutFocus(target) {
setTimeout( function() {
$("input, select",target).focus();
$("input, select",target).select();
},100);
}
$grid.jqGrid({
datatype: "local",
//loadComplete: function() {
// $grid.jqGrid('setGridParam', { datatype: 'json' });
//},
data: mydata,
colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
colModel: [
{ name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
{ name: "invdate", width: 1625, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d.m.Y"}, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{ name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" },
{ name: "tax", width: 52, editable: true, template: numberTemplate },
{ name: "amount",
editable:true,"width":120,"classes":null,"hidden":false,
"editoptions":{"maxlength":60,"size":60}
/*, template: numberTemplate*/ },
{ name: "total", width: 60, template: numberTemplate }
],
rowNum: 10,
rowList: [5, 10, 20],
iconSet: "fontAwesome",
pager: "#pager",
gridview: true,
autoencode: true,
ignoreCase: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
height: "auto",
rownumbers: true,
editurl: "clientArray",
//editurl: "http://cdn.jsdelivr.net/test",
toppager: true,
beforeSelectRow: function (rowid, e) {
var $this = $(this), rows = this.rows,
// get id of the previous selected row
startId = $this.jqGrid('getGridParam', 'selrow'),
startRow, endRow, iStart, iEnd, i, rowidIndex,
colName = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
cmd = $grid.jqGrid('getGridParam', 'colModel');
if (cmd[colName].name === 'cb' ) {
return true;
}
$this.jqGrid("editRow", rowid);
PutFocus(e.target);
},
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
