How does one align a single row to the top in JQGrid?

JQGrid is awesome for displaying data with jQuery, but it doesn't exactly have great documentation.

I'm having a problem with the grid when the grid has only one element to display. For some reason, it's aligning the single row to the bottom rather than to the top.

Here's a picture of a single misaligned row:

Here are the jqgrid options I'm passing in:

jQGridOptions = {
            "recordtext": '{0} - {1} of {2}',
            "url": 'data.json',
            'datatype': 'json',
            'mtype': 'GET',
            'colModel': [
                { 'name': 'Rank', 'align': 'center', 'index': 'Rank', 'sortable': false, 'search': false },
                { 'name': 'Name', 'index': 'Name', 'sortable': false, 'search': true },
                { 'name': 'Score', 'index': 'Score', 'sortable': false, 'search': false }
            ],
            'pager': '#ranking-pager',
            'rowNum': 10,
            'altRows': true,
            'scrollOffset': 0,
            'colNames': ["Rank", "Name", "Score"],
            'width': 696,
            'height': 'auto', // '100%',  // 300,
            'page': 1,
            'sortname': 'Rank',
            'sortorder': "asc",
            'hoverrows': true,
            'viewrecords': true,
            'gridComplete': function () {
                $('.ui-jqgrid-bdiv').jScrollPane({ showArrows: true, scrollbarWidth: 17, arrowSize: 17, scrollbarMargin: 0 });

                if (selectedRank !== -1) {
                    selectRank(selectedRank);
                    selectedRank = -1;
                }
            },
            'jsonReader': {
               id : 'Rank',
               'repeatitems': false
        }
    };

As requested, here's the result from data.json:

{
    "page":1,
    "total":1,
    "records":1,
    "rows":  [{
                  "Name":"Gil Agostini",
                  "Score":94,
                  "Rank":1
             }]
}

Call to jQGrid:

$(document).ready(function () {
        $("#ranking-table").jqGrid(jQGridOptions);
});

Html:

 <div style="float: left;">
                <div class="hvy-border1">
                    <div class="hvy-border2">
                        <div class="hvy-top-left hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="hvy-top-right hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="clear">
                            <!-- -->
                        </div>
                        <div id="table-and-pager" style="margin: 3px;">
                            <table id="ranking-table" class="scroll" cellpadding="0" cellspacing="0" style="height: 300px">
                            </table>
                            <div id="ranking-pager" class="scroll" style="text-align: center;">
                            </div>
                        </div>
                        <div class="clear">
                            <!-- -->
                        </div>
                        <div class="hvy-bottom-left hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                        <div class="hvy-bottom-right hvy-corner">
                            <div>
                                <!-- -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Can anyone give me any clue what I maybe doing wrong here?

How do I get the row to align to the top rather than the bottom?

I can not reproduce the problem which you describes. I suppose that you use some additional setting for jqGrid: you don't post the whole JavaScript code of your example.

Nevertheless I can definitively say that you has some problems in the format of the JSON data returned from the server. Important is that every row of data must has an unique id. For example

{ "id":123, "Name":"Gil Agostini", "Score":94, "Rank":1 }

instead of

{ "Name":"Gil Agostini", "Score":94, "Rank":1 }

The id can has also string type and not be only numeric. Moreover you have to define jsonReader parameter of jqGrid, because your data has named elements instead of the standard array of strings (which is more compact and small data). In the case you should at least use jsonReader: {repeatitems: false}.

If some other grid column (like the Name column) can be interpret as the id, you can either include key:true in the corresponding column definition or use id:'Name' as a property of the jsonReader.

For example the following jsonReader

jsonReader: {
    repeatitems: false,
    id: 'Name'
}

can be used to read your current JSON data (see live here). Using any tool which you prefer you can verify the id value of the <tr> element of the grid.