scroll to jqgrid item by id/key

Question

I've a jqgrid width multiple pages. Every row has an unique id. Is there a function to scroll directly i.e. to row id 1234?

var mygrid = $("#list").jqGrid({
    url: 'get_sql_json.php',
    datatype: "json",
    mtype: "GET",
    pager: "#pager",
    rowNum: 100,
    rowList: [100, 200, 500],
    autoencode: true,
    autowidth: true,
    sortorder: "desc",
    shrinkToFit: true,
    viewrecords: true,
    loadonce: true,
    gridview: true,
    autoencode: true
    }); 

Answer 1

I find your question very interesting, so I prepared the demo which demonstrates the corresponding solution.

One can choose the row in the dropdown-box and click the button "Select row by id". The specified row will be selected with setSelection method if it is on the current page. If the row in on another page then it will be calculated new page number and the grid will be reloaded with the specified row pre-selected. I use current: true option of reloadGrid described here.

It's important that you use loadonce: true which allows to save more as one page of rows. In the case the grid works like the grid having datatype: "local" with data parameter defined with the data returned from the server at the first load.

For the implementation of the selection I use the approach described in the answer. I overwrite (subclass) the select method of internal $.jgrid.from method used by jqGrid so that the last full sorted and filtered local data are saved in new internal variable lastSelected. It allows to access the full dataset instead of the current page only (the contains the data from the line instead of the current page only after execution of slice from the line).

The most important part of the code of the demo is below:

var mydata = [ ... ],
    $grid = $("#list"),
    oldFrom = $.jgrid.from,
    lastSelected, i, n, $ids, id;

// "subclass" $.jgrid.from method and save the last
// select results in lastSelected variable
$.jgrid.from = function (source, initalQuery) {
    var result = oldFrom.call(this, source, initalQuery),
        old_select = result.select;
    result.select = function (f) {
        lastSelected = old_select.call(this, f);
        return lastSelected;
    };
    return result;
};

// create the grid
$grid.jqGrid({
    datatype: "local",
    data: mydata,
    ...
    loadComplete: function () {
        this.p.lastSelected = lastSelected; // set this.p.lastSelected
    }
});

...
// fill select with all ids from the data
$ids = $("#selectedId");
for (i = 0, n = mydata.length; i < n; i++) {
    id = mydata[i].id;
    $("<option>").val(id).text(id).appendTo($ids);
}

$("#selectId").button().click(function () {
    var filteredData = $grid.jqGrid("getGridParam", "lastSelected"), j, l,
        idName = $grid.jqGrid("getGridParam", "localReader").id,
        idToSelect = $("#selectedId").val(),
        rows = $grid.jqGrid("getGridParam", "rowNum"),
        currentPage = $grid.jqGrid("getGridParam", "page"),
        newPage;
    if (filteredData) {
        for (j = 0, l = filteredData.length; j < l; j++) {
            if (String(filteredData[j][idName]) === idToSelect) {
                // j is the 0-based index of the item
                newPage = Math.floor(j / rows) + 1;
                if (newPage === currentPage) {
                    $grid.jqGrid("setSelection", idToSelect);
                } else {
                    // set selrow or selarrrow
                    if ($grid.jqGrid("getGridParam", "multiselect")) {
                        $grid.jqGrid("setGridParam", {
                            page: newPage,
                            selrow: idToSelect,
                            selarrrow: [idToSelect]
                        });
                    } else {
                        $grid.jqGrid("setGridParam", {
                            page: newPage,
                            selrow: idToSelect
                        });
                    }
                    $grid.trigger("reloadGrid", [{current: true}]);
                    break;
                }
            }
        }
        if (j >= l) {
            $grid.jqGrid("resetSelection");
            alert("The id=" + idToSelect + " can't be seen beacuse of the current filter.");
        }
    }
});

Answer 2

You can select an ID using setSelection to scroll to that row, but only if it is on the current page.