jqGrid select first row on page load

Question

I've got a jqGrid that I'd like to have the first row selected when the page loads. I've found a couple different approaches, but none of them seem to work for me. The data is coming over an ajax call, so as far as I can tell the grid is attempting to select the first row before any data has been loaded.

var reqListGrid = new BaseGrid("#request_list");
reqListGrid.edit_url = '...'
reqListGrid.name = 'Request List'
reqListGrid.colNames = ["Employee", "Code", "Start Date", "Submitted", "Hours"]
reqListGrid.height = '200px';
reqListGrid.width = 'auto';
reqListGrid.colModel = [
    {name:'req_emp', ...},
    {name:'req_code', ...},
    ...
];
reqListGrid.gridComplete = function(){
    var req_top_row = $("#request_list").getDataIDs()[0];
    $("#request_list").setSelection(req_top_row, true);
};

reqListGrid.createGrid();

I've set a breakpoint in the gridComplete method, but Chrome never hits it. Any tips?

What is `BaseGrid` class which you use? Some options (like `edit_url`) seems be strange too. Why you not just use `$("#request_list").jqGrid({/*all options and callbacks*/});`? I would recommend you to read [the post](http://stackoverflow.com/a/15439276/315935) which describes the differences between `gridComplete` and `loadComplete`. In the most situation `gridComplete` is the wrong callback. — Oleg, Mar 18 '15 at 13:59
BaseGrid is just my stylized standard grid (colors, pager buttons, etc.). I've tried using that syntax as well, but that didn't work either. — SirDeimos, Mar 18 '15 at 14:14
The problem is just because you call `reqListGrid.createGrid()` to create the grid and I suppose that the reason of your problem is in the code of `BaseGrid`. If it would be correct that `gridComplete` would be called. Could you append the text of your question with the code of constructor of `BaseGrid` and the method `createGrid`? To tell the trust I don't see any advantage of the usage of some additional `BaseGrid` in the case. — Oleg, Mar 18 '15 at 14:20

score 0 · Answer 1 · answered Mar 18 '15 at 13:58

0

OnGridComplete You may use bellow code:

var firstRowId = $("tr:first","#request_list").attr("id");
$("#request_list").setSelection(firstRowId);

Your overall code for OnGridComplete should look like this

reqListGrid.gridComplete = function(){
    var req_top_row = $("tr:first","#request_list").attr("id");
    $("#request_list").setSelection(req_top_row);
};

answered Mar 18 '15 at 13:58

Mox Shah

2,967
2
26
42

No luck, it's never hitting any of the code inside the gridComplete method – SirDeimos Mar 18 '15 at 14:10
Then, are you able to load grid?, in that case you should post your complete code for loading grid. – Mox Shah Mar 19 '15 at 04:53

score 0 · Answer 2 · answered Jan 05 '17 at 05:18

gridComplete: function () {
                      var idarray = jQuery('#jqTable').jqGrid('getDataIDs');
                    if (idarray.length > 0) {
                    var firstid = jQuery('#jqTable').jqGrid('getDataIDs')[0];
                            $("#jqTable").setSelection(firstid);    
                        }
                }

jqGrid select first row on page load

2 Answers2