jQGrid - "reloadGrid" - Keep Position

Question

I'm trying to 'refresh' or 'reload' a grid and keep the row which has focus after the grid has been reloaded.

I've tried to do it as follows:-

var rowId = $("#dispatch").jqGrid('getGridParam','selrow');
var thisRow = (parseInt(rowId) + parseInt(1));  

$("#dispatch").trigger("reloadGrid");

setTimeout(function(){
    $("#dispatch").setSelection(thisRow);
}, 151);

But you can see it just from position #1 to the new position.

Is there any other way of reloading the grid and keeping focus position?

Tried:-

// Display Current Jobs

$('#btn-current').bind('click', function() {

    $.ajax({
        type: 'GET',
        url: 'scripts/php/jobs.controller.php',
        data: "id=" + "current",
        success: function(data){

             allButtons.removeClass('active');
             $('#btn-current').addClass('active');

             $("#dispatch").trigger("reloadGrid", [{current:true}]);

        }
    });

});

Grid:-

$(function () {

    var lastsel2
    var rowsToColor = [];

    $("#dispatch").jqGrid({
    url: 'scripts/xml/jobs.xml',
    datatype: "xml",
       xmlReader: { 
          root:"joblist", 
          row:"job",
          repeatitems:false,
      },
        colNames: ["Time", "Car", "Status", "P", "Pickup", "Zone", "Destination", "Fare", "Name", "Type", "Tel", "Comments", "Account No", "Allow Time", "Tariff", "Email", "Driver Fare", "Driver Extras", "Customer Extras", "Driver", "Driver Comments", "Reference No", "Payment", "From No", "From Street", "From PostCode", "To No", "To Street", "To PostCode", "Account Name", "Flight No", "From Zone No", "To Zone No"],
        colModel: [
            { name: "bookingdatetime", width: 55, editable: true },
            { name: "car", width: 45, editable: true },
            { name: "jbmessage", width: 60 },
            { name: "prebooking", width: 10 },
            { name: "pickup", width: 359, editable: true, classes:"grid-col"},
            { name: "zone", width: 50 },
            { name: "dropoff", width: 359, sortable: false, editable: true },
            { name: "customerfare", width: 76, editable: true },
            { name: "passname", width: 100, editable: true },
            { name: "cartype", width: 50, editable: true, },
            { name: "tel", width: 100, editable: true },
            { name: "comments", width: 150 },
            { name: "accountno", hidden: true },
            { name: "allowtime", hidden: true },
            { name: "tarif", hidden: true },
            { name: "emailaddress", hidden: true },
            { name: "driverfare", hidden: true },
            { name: "driverextras", hidden: true },
            { name: "customerextras", hidden: true },
            { name: "driver", hidden: true },
            { name: "comments1", hidden: true },
            { name: "referenceno", hidden: true },
            { name: "payment", hidden: true },
            { name: "fromno", hidden: true },
            { name: "fromstreet", hidden: true },
            { name: "frompostcode", hidden: true },
            { name: "tono", hidden: true },
            { name: "tostreet", hidden: true },
            { name: "topostcode", hidden: true },
            { name: "customer", hidden: true },
            { name: "flightno", hidden: true },
            { name: "fromzoneno", hidden: true },
            { name: "tozoneno", hidden: true }
        ],
        loadComplete: function (){

            var rowIds = $('#dispatch').jqGrid('getDataIDs');

            for (i = 1; i <= rowIds.length; i++) {//iterate over each row

                rowData = $('#dispatch').jqGrid('getRowData', i);

                //set background style if Payment = Account
                if (rowData['payment'] == 'Acc') {
                    $('#dispatch').jqGrid('setRowData', i, false, "yellow");
                }

                if (rowData['payment'] == 'CC') {
                    $('#dispatch').jqGrid('setRowData', i, false, "purple");
                }

                if (rowData['cartype'] == 'Est') {
                    $('#dispatch').jqGrid('setRowData', i, false, "green");
                }
                if (rowData['cartype'] == '8B' || rowData['cartype'] == 'Bus') {
                    $('#dispatch').jqGrid('setRowData', i, false, "red");
                }
                if (rowData['car'] == '00') {
                    $('#dispatch').jqGrid('setRowData', i, false, "cancel");
                }
            }
        },
        pager: "#pager",
        loadui: 'disable',
        rowNum: 50,
        rowList: [10, 20, 30],
        sortname: "invid",
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        width: null,
        shrinkToFit: false,
        height: 647,
        scrollOffset: 0,
        altRows:true,
        altclass:'myAltRowClass',
        onSelectRow: function (id, status) {
            $('#txt-car-number').focus();
            $('body').keyup(function (e) {

                if (status && e.keyCode == 66 && $("#booking-docket").dialog("isOpen") === false) {

                    populateDocket();
                    $("#booking-docket").dialog('open');

                }

            });
        },

        gridComplete: function () {
            $("#dispatch").setSelection(0, true);   
        },

    });

    $("#dispatch").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){

         populateDocket();

         $("#booking-docket").dialog('open');
    }});

    $("#dispatch").jqGrid('bindKeys');

    function populateDocket() {

        var rowId =$("#dispatch").jqGrid('getGridParam','selrow');  
        var rowData = jQuery("#dispatch").getRowData(rowId);
        var bookingdatetime = rowData['bookingdatetime'];  
        var car = rowData['car']; 
        var fromno = rowData['fromno']; 
        var fromstreet = rowData['fromstreet']; 
        var frompostcode = rowData['frompostcode']; 
        var tono = rowData['tono']; 
        var tostreet = rowData['tostreet']; 
        var topostcode = rowData['topostcode'];  
        var customerfare = rowData['customerfare'];  
        var passname = rowData['passname'];  
        var cartype = rowData['cartype'];  
        var tel = rowData['tel'];  
        var comments = rowData['comments']; 
        var accountno = rowData['accountno'];
        var allowtime = rowData['allowtime'];
        var tariff = rowData['tarif'];
        var email = rowData['emailaddress'];
        var driverFare = rowData['driverfare'];
        var driverExtras = rowData['driverextras'];
        var customerExtras = rowData['customerextras'];
        var driver = rowData['driver'];
        var commentsdrv = rowData['comments1'];
        var referenceno = rowData['referenceno'];
        var payment = rowData['payment'];
        var accountname = rowData['customer'];
        var flightno = rowData['flightno'];
        var prebook = rowData['prebooking'];
        var bookedby = rowData['bookedby'];

        var date = bookingdatetime.split(' ');
        var hour = date[1].substr(0,2)
        var minute = date[1].substr(6,5)

         $('#txt-date').val(date[0]);
         $('#txt-hour').val(hour);
         $('#txt-min').val(minute);
         $('#txt-car').val(car);
         $('#txt-pickup-hn').val(fromno);
         $('#txt-pickup').val(fromstreet);
         $('#txt-destination-hn').val(tono);
         $('#txt-destination').val(tostreet);
         $('#txt-client-fare').val(customerfare);
         $('#txt-passenger').val(passname);
         $('#txt-cartype').val(cartype);
         $('#txt-telephone').val(tel);
         $('#txt-general').val(comments);
         $('#txt-account').val(accountno);
         $('#txt-lead').val(allowtime); 
         $('#txt-tariff').val(tariff);
         $('#txt-email').val(email);
         $('#txt-drv-fare').val(driverFare);
         $('#txt-account-name').val(accountname);
         $('#txt-driver').val(driver); 
         $('#txt-office').val(commentsdrv); 
         $('#p-reference-no').html('-'+referenceno+'-');
         $('#txt-payment').val(payment);
         $('#txt-flight-no').val(flightno);
         $('#txt-prebook').val(prebook);
         $('#txt-bookedby').val(bookedby);

    }

    // Navigate Grids

    $(document).keypress(function(e) {

    if(e.keyCode == 40) { //down arrow
     $('#nextElementId').click();
    }

    if(e.keyCode == 38) { //up arrow
     $('#previousElementId').click();
    }

    });

    $(document).keypress(function(e)
        {
            if(e.keyCode == 38 || e.keyCode == 40)  //up/down arrow override
            {
                var gridArr = $('#dispatch').getDataIDs();
                var selrow = $('#dispatch').getGridParam("selrow");
                var curr_index = 0;
                for(var i = 0; i < gridArr.length; i++)
                {
                    if(gridArr[i]==selrow)
                        curr_index = i;
                }

                if(e.keyCode == 38) //up
                {
                    if((curr_index-1)>=0)
                        $('#dispatch').resetSelection().setSelection(gridArr[curr_index-1],true);
                }
                if(e.keyCode == 40) //down
                {
                    if((curr_index+1)<gridArr.length)
                        $('#dispatch').resetSelection().setSelection(gridArr[curr_index+1],true);
                }
            }

        });

XML DATA:-

<?xml version="1.0"?>
<joblist resultcount="100">
<job id="0">
<pickup>26 CHIPPENHAM MEWS W9 2AN</pickup><dropoff>BREWER STREET W1F 0RJ</dropoff><bookingdatetime>14/05/2014 10:29:19</bookingdatetime><car></car><jbmessage></jbmessage><zone>MOUNTAIN</zone><customerfare>12</customerfare><passname>ele</passname><cartype>Car</cartype><tel>07771764901</tel><comments></comments><accountno></accountno><allowtime>10</allowtime><tarif>1</tarif><emailaddress></emailaddress><driverfare>12</driverfare><driverextras>0</driverextras><customerextras>0</customerextras><driver></driver><comments1></comments1><referenceno>221194</referenceno><payment>Cash</payment><fromno>26</fromno><fromstreet>CHIPPENHAM MEWS</fromstreet><frompostcode>W9 2AN</frompostcode><tono></tono><tostreet>BREWER STREET</tostreet><topostcode>W1F 0RJ</topostcode><prebooking>X</prebooking><customer></customer><flightno></flightno><bookedby>SAJJAD</bookedby><fromzoneno>27</fromzoneno><tozoneno>29</tozoneno></job><job id="1"><pickup>7 FOSBURY MEWS W23JE</pickup><dropoff>HEATHROW TER(T5) TW6 2GA</dropoff><bookingdatetime>13/05/2014 20:57:40</bookingdatetime><car>4</car><jbmessage>PAloc</jbmessage><zone>BALDWIN</zone><customerfare>41</customerfare><passname>BLOECKER</passname><cartype>MPV</cartype><tel>07435358308</tel><comments></comments><accountno></accountno><allowtime>15</allowtime><tarif>2</tarif><emailaddress></emailaddress><driverfare>41</driverfare><driverextras>0</driverextras><customerextras>0</customerextras><driver></driver><comments1></comments1><referenceno>220938</referenceno><payment>Cash</payment><fromno>7</fromno><fromstreet>FOSBURY MEWS</fromstreet><frompostcode>W23JE</frompostcode><tono></tono><tostreet>HEATHROW TER(T5)</tostreet><topostcode>TW6 2GA</topostcode><prebooking>X</prebooking><customer></customer><flightno></flightno><bookedby>SHEERAZ</bookedby><fromzoneno>21</fromzoneno><tozoneno>196</tozoneno>
</job>
</joblist>

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

Instead of usage setSelection inside of setTimeout you need just use additional parameter of reloadGrid: current:true. See the answer for more details.

UPDATED: The code of gridComplete seems be the reason of your problem:

$("#dispatch").setSelection(0, true);

it resets the selection of the grid after reloading to the row with the id="0".

I would strictly recommend you to replace the code of loadComplete to much more effective rowattr callback. See the answer for the corresponding code example.

Additionally you should not bind $('body').keyup on every row selection. In the way you bind (register) more and more new keyup event handles without unbinding the previous one. I'm not sure what you want to do in the part of the code, but you should probably move the code outside of onSelectRow callback.

I don't see any reason to set ondblClickRow with respect of setGridParam after the grid is created. Instead of that you can just include ondblClickRow callback directly in the list of jqGrid option during creating the grid (like you defined loadComplete, onSelectRow and gridComplete callbacks).

I recommend you to use $(this) instead of $('#dispatch') inside of any jqGrid callback.

edited May 23 '17 at 12:27

Community

1
1

answered Jun 10 '14 at 15:09

Oleg

220,925
34
403
798

You mean like `$("#dispatch").trigger("reloadGrid", [{current:true}]);` - because this is still setting focus back to row 1 @Oleg – nsilva Jun 10 '14 at 15:30
@nsilva: probably you have problem with id duplicates. Could you provide small demo which demonstrates the problem? – Oleg Jun 10 '14 at 17:12
@nsilva: could you prepare **small demo** which shows the problem live. Currently it's unclear which `datatype` you use, whether you use local data or not, no code of jqGrid and no test input data are provided... The line `var thisRow = (parseInt(rowId) + parseInt(1));` looks very suspected in your code. I still suppose that you fill the grid in a wrong way and so you have id dupplicates. – Oleg Jun 16 '14 at 10:10
You can see an example of this happening here; just hightlight a job and press 4 then D - I'll add grid details to the question – nsilva Jun 16 '14 at 13:46
@nsilva: Could you include **test data** (`'scripts/xml/jobs.xml'`) which can be used to reproduce the problem? – Oleg Jun 17 '14 at 08:19
@nsilva: I posed **UPDATED** part of my answer. – Oleg Jun 17 '14 at 09:05

jQGrid - "reloadGrid" - Keep Position

1 Answers1