<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
	<title>jQuery Grid Plugin - jqGrid - Topic: load on scroll bug??</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/load-on-scroll-bug</link>
	<description><![CDATA[Grid plugin]]></description>
	<generator>Simple:Press Version 5.7.5.3</generator>
	<atom:link href="http://www.trirand.com/blog/?page_id=393/help/load-on-scroll-bug/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>Tom Kim on load on scroll bug??</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/load-on-scroll-bug#p26474</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/load-on-scroll-bug#p26474</guid>
        	        	<description><![CDATA[<p>Hi.</p>
<p>I have a jqGrid with load on scroll option on.</p>
<p>This is my code.</p>
</p>
<p>function something(){</p>
<p style="padding-left: 30px; ">$("#mailList").jqGrid({</p>
<p style="padding-left: 60px; ">datatype: getInboxMails,</p>
<p style="padding-left: 60px; ">colNames: [&#39;&#39;, &#39;title&#39;, &#39;sender&#39;, &#39;date&#39;, &#39;Type&#39;, &#39;size&#39;, &#39;&#39;],</p>
<p style="padding-left: 60px; ">colModel: [</p>
<p style="padding-left: 90px; ">{ name: &#39;Custom&#39;, index: &#39;Custom&#39;, width: 40, align: &#39;left&#39;, sortable: false, formatter: inbox_customButton },</p>
<p style="padding-left: 90px; ">{ name: &#39;Title&#39;, index: &#39;Title&#39;, width: 200, align: &#39;left&#39;, formatter: inbox_customTitle },</p>
<p style="padding-left: 90px; ">{ name: &#39;Sender&#39;, index: &#39;Sender&#39;, width: 80, align: &#39;left&#39;, formatter: inbox_customSender },</p>
<p style="padding-left: 90px; ">{ name: &#39;Senddate&#39;, index: &#39;Senddate&#39;, width: 40, align: &#39;center&#39; },</p>
<p style="padding-left: 90px; ">{ name: &#39;RcvType&#39;, index: &#39;RcvType&#39;, width: 20, align: &#39;center&#39;, sortable: false, formatter: inbox_customRcvType },</p>
<p style="padding-left: 90px; ">{ name: &#39;MailSize&#39;, index: &#39;MailSize&#39;, width: 60, align: &#39;left&#39;, sortable: false, formatter: inbox_customMailSize },</p>
<p style="padding-left: 90px; ">{ name: &#39;Docidx&#39;, hidden: true }</p>
<p style="padding-left: 60px; ">],</p>
<p style="padding-left: 60px; ">postData: { filter: &#39;&#39; },</p>
<p style="padding-left: 60px; ">pager: &#39;#mailListPager&#39;,</p>
<p style="padding-left: 60px; ">rowNum: 4,</p>
<p style="padding-left: 60px; ">rowList: [5, 10, 20, 50],</p>
<p style="padding-left: 60px; ">sortname: &#39;Senddate&#39;,</p>
<p style="padding-left: 60px; ">sortorder: "desc",</p>
<p style="padding-left: 60px; ">caption: &#39;&#39;,</p>
<p style="padding-left: 60px; ">scroll: true,</p>
<p style="padding-left: 60px; ">//scrollOffset: 0,</p>
<p style="padding-left: 60px; ">//autowidth: true,</p>
<p style="padding-left: 60px; ">//height: &#39;100%&#39;,</p>
<p style="padding-left: 60px; ">//shrinkToFit: false,</p>
<p style="padding-left: 60px; ">scrollbar: true,</p>
<p style="padding-left: 60px; ">multiselect: true,</p>
<p style="padding-left: 60px; ">toppager: true,</p>
<p style="padding-left: 60px; ">cloneToTop: true,</p>
<p style="padding-left: 60px; ">viewrecords: true,</p>
<p style="padding-left: 60px; ">sortable: true,</p>
<p style="padding-left: 60px; ">jsonReader: {</p>
<p style="padding-left: 90px; ">id: &#39;Id&#39;,</p>
<p style="padding-left: 90px; ">root: function (obj) { return obj.rows },</p>
<p style="padding-left: 90px; ">repeatitems: false,</p>
<p style="padding-left: 90px; ">page: function (obj) { return obj.page },</p>
<p style="padding-left: 90px; ">total: function (obj) { return parseInt(obj.total) },</p>
<p style="padding-left: 90px; ">records: function (obj) { return parseInt(obj.records) }</p>
<p style="padding-left: 60px; ">}</p>
<p style="padding-left: 30px; ">});</p>
<p>//.................other code</p>
<p>}</p>
<p>function getInboxMails(postdata) {</p>
<p style="padding-left: 30px; ">if (flag.gettingInboxMail) { return; }</p>
<p style="padding-left: 30px; ">flag.gettingInboxMail = true;</p>
<p style="padding-left: 30px; ">$.ajax({</p>
<p style="padding-left: 60px; ">url: &#39;/Json/GetInboxMails&#39;,</p>
<p style="padding-left: 60px; ">type: &#39;post&#39;,</p>
<p style="padding-left: 60px; ">data: postdata,</p>
<p style="padding-left: 60px; ">dataType: &#39;json&#39;,</p>
<p style="padding-left: 60px; ">complete: function (jsondata, status) {</p>
<p style="padding-left: 90px; ">if (status == "success") {</p>
<p style="padding-left: 120px; ">flag.gettingInboxMail = false;</p>
<p style="padding-left: 120px; ">var json = $.parseJSON(jsondata.responseText);</p>
<p style="padding-left: 120px; ">if (json.Result != 0) {</p>
<p style="padding-left: 150px; ">alert(json.Message);</p>
<p style="padding-left: 150px; ">return;</p>
<p style="padding-left: 120px; ">}</p>
<p style="padding-left: 120px; ">$("#mailList")[0].addJSONData(json.Data);</p>
<p style="padding-left: 120px; ">if (json.Data.rows.length &#62; 0) {</p>
<p style="padding-left: 150px; ">checkNewMails();</p>
<p style="padding-left: 120px; ">}</p>
<p style="padding-left: 90px; ">}</p>
<p style="padding-left: 90px; ">else {</p>
<p style="padding-left: 120px; ">flag.gettingInboxMail = false;</p>
<p style="padding-left: 120px; ">alert(&#39;Failed to get inbox mails.&#39;);</p>
<p style="padding-left: 90px; ">}</p>
<p style="padding-left: 60px; ">}</p>
<p style="padding-left: 30px; ">});</p>
<p>}</p>
</p>
<p>This is my code.</p>
<p>So my problem is that I am not getting a scroll bar to bind more data.</p>
<p>what i think is.. In the DB, there&#39;s 10 rows of data in total.</p>
<p>So I guess the jqGrid generates the div like</p>
</p>
<p>&#60;div class="ui-jqgrid-bdiv" style="width: 1500px; height:390px;&#62;</p>
<p><span style="white-space: pre;"> </span>&#60;div style="position: relative; height: 340px;&#62;....&#60;/div&#62;</p>
</p>
<p>these... and I am guessing that the second div&#39;s height is sized to how long it will be with all the rows binded...</p>
<p>and that div will make the scroll of the outer div</p>
<p>but as u can see the outer div is taller than the inner one. So it makes no vertical scroll..</p>
</p>
<p>I tried it with making my browser&#39;s height size small and the scroll appears.</p>
<p>I am going to need a scroll with small number of rows.</p>
<p>Is this a jqGrid bug or am I doing something wrong???</p>
</p>
<p>Please give me some advice.&#160;</p>
<p>Thank u</p></p>
]]></description>
        	        	<pubDate>Thu, 26 Apr 2012 11:45:34 +0300</pubDate>
        </item>
</channel>
</rss>