jQuery Grid Plugin - jqGrid

Hi.

I have a jqGrid with load on scroll option on.

This is my code.

function something(){

$("#mailList").jqGrid({

datatype: getInboxMails,

colNames: ['', 'title', 'sender', 'date', 'Type', 'size', ''],

colModel: [

{ name: 'Custom', index: 'Custom', width: 40, align: 'left', sortable: false, formatter: inbox_customButton },

{ name: 'Title', index: 'Title', width: 200, align: 'left', formatter: inbox_customTitle },

{ name: 'Sender', index: 'Sender', width: 80, align: 'left', formatter: inbox_customSender },

{ name: 'Senddate', index: 'Senddate', width: 40, align: 'center' },

{ name: 'RcvType', index: 'RcvType', width: 20, align: 'center', sortable: false, formatter: inbox_customRcvType },

{ name: 'MailSize', index: 'MailSize', width: 60, align: 'left', sortable: false, formatter: inbox_customMailSize },

{ name: 'Docidx', hidden: true }

],

postData: { filter: '' },

pager: '#mailListPager',

rowNum: 4,

rowList: [5, 10, 20, 50],

sortname: 'Senddate',

sortorder: "desc",

caption: '',

scroll: true,

//scrollOffset: 0,

//autowidth: true,

//height: '100%',

//shrinkToFit: false,

scrollbar: true,

multiselect: true,

toppager: true,

cloneToTop: true,

viewrecords: true,

sortable: true,

jsonReader: {

id: 'Id',

root: function (obj) { return obj.rows },

repeatitems: false,

page: function (obj) { return obj.page },

total: function (obj) { return parseInt(obj.total) },

records: function (obj) { return parseInt(obj.records) }

}

});

//.................other code

}

function getInboxMails(postdata) {

if (flag.gettingInboxMail) { return; }

flag.gettingInboxMail = true;

$.ajax({

url: '/Json/GetInboxMails',

type: 'post',

data: postdata,

dataType: 'json',

complete: function (jsondata, status) {

if (status == "success") {

flag.gettingInboxMail = false;

var json = $.parseJSON(jsondata.responseText);

if (json.Result != 0) {

alert(json.Message);

return;

}

$("#mailList")[0].addJSONData(json.Data);

if (json.Data.rows.length > 0) {

checkNewMails();

}

}

else {

flag.gettingInboxMail = false;

alert('Failed to get inbox mails.');

}

}

});

}

This is my code.

So my problem is that I am not getting a scroll bar to bind more data.

what i think is.. In the DB, there's 10 rows of data in total.

So I guess the jqGrid generates the div like

<div class="ui-jqgrid-bdiv" style="width: 1500px; height:390px;>

<div style="position: relative; height: 340px;>....</div>

these... and I am guessing that the second div's height is sized to how long it will be with all the rows binded...

and that div will make the scroll of the outer div

but as u can see the outer div is taller than the inner one. So it makes no vertical scroll..

I tried it with making my browser's height size small and the scroll appears.

I am going to need a scroll with small number of rows.

Is this a jqGrid bug or am I doing something wrong???

Please give me some advice. 

Thank u