CODEWITHSUNDEEP
javascriptjqueryjqgridfree-jqgrid
Andrus
Andrus

Reputation: 27955

How to avoid horizontal scroll on single click cell editing in free jqgrid

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>

Upvotes: 0

Views: 832

Answers (1)

Oleg
Oleg

Reputation: 221997

I'm not sure that I correctly understand the problem. editRow supports focusField option starting with jqGrid 4.7 (see the documentation). It can be used in free jqGrid too. The value focusField: false will prevent setting of focus to the first editable column. You can in generally remove PutFocus function and replace it to focusField: colName (the name colName seems me not the best because it's more iCol), where the value of focusField should be the number of the column in the row.

Upvotes: 2

Related Questions