Forum
I first asked this question on StackOverflow here.
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:
[Image Can Not Be Found]
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': rowsPerPage,
'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': {
'repeatitems': false,
id : 'Rank'
}
};
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?
Most Users Ever Online: 715
Currently Online:
19 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66