<?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: Selecting rows slow with large grid</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/selecting-rows-slow-with-large-grid</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/selecting-rows-slow-with-large-grid/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>tony on Selecting rows slow with large grid</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/selecting-rows-slow-with-large-grid#p14036</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/selecting-rows-slow-with-large-grid#p14036</guid>
        	        	<description><![CDATA[<p>Hello,</p>
<p>Thanks. Definitley I will check this and if it is ok, will include the fix.</p>
<p>Best Regds</p>
<p>Tony</p>
]]></description>
        	        	<pubDate>Tue, 19 Jan 2010 11:34:27 +0200</pubDate>
        </item>
        <item>
        	<title>dw on Selecting rows slow with large grid</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/selecting-rows-slow-with-large-grid#p13981</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/selecting-rows-slow-with-large-grid#p13981</guid>
        	        	<description><![CDATA[<p>I&#160;have been doing some testing with large grids (45 columns and 1000 rows) and overall the performance is very good given the volume of data.&#160; However, there is some slowness when changing between rows.&#160; With a little profiling/debugging it appears that two things are contributing to the slowness:</p>
<p>1) scrollrows &#8211; if the scrollrows property is set to true this seems to add quite a bit of time to the amount of time it takes to switch rows.&#160; Not sure if anything can be done about this, but for my code i just turn off scrollrows when the grid gets bigger than 100 rows</p>
<p>2) also in set selection there seems to be quite a bit of overhead for selecting the checkbox.&#160; At least with IE.&#160; I didn&#39;t test to see if the same overhead existing in firefox.&#160; I made a slight change that seems to remove most of the overhead (old code in green commented out.&#160; the change is in bold).&#160; I beleive the change is correct, but i am not as familiar with the innerworkings of the grid, so i may be wrong.&#160;</p>
<p><span style="font-size: x-small;">Even with these changes the switch of rows seems a bit slow, but it is definitely manageable.&#160; If any has done similar testing and has any performance improvements/tips that they can pass along, it would be greatly appreciated.&#160; </span></p>
<p><span style="font-size: x-small;"></span></p>
<p>setSelection : <span style="font-size: x-small; color: #0000ff;">function</span><span style="font-size: x-small;">(selection,onsr) {</span></p>
</p>
<p>&#8230;</p>
</p>
<p><span style="font-size: x-small; color: #0000ff;">if</span><span style="font-size: x-small;">( ia === -1 ){ <br /></span></p>
</p>
<p><span style="font-size: x-small; color: #0000ff;">if</span><span style="font-size: x-small;">($(pt).attr(</span><span style="font-size: x-small; color: #800000;">&#8220;class&#8221;</span><span style="font-size: x-small;">) !== </span><span style="font-size: x-small; color: #800000;">&#8220;subgrid&#8221;</span><span style="font-size: x-small;">) { $(pt).addClass(</span><span style="font-size: x-small; color: #800000;">&#8220;ui-state-highlight&#8221;</span><span style="font-size: x-small;">).attr(</span><span style="font-size: x-small; color: #800000;">&#8220;aria-selected&#8221;</span><span style="font-size: x-small;">,</span><span style="font-size: x-small; color: #800000;">&#8220;true&#8221;</span><span style="font-size: x-small;">);}</span></p>
<p>stat =</p>
</p>
<p><span style="font-size: x-small; color: #0000ff;">true</span> <span style="font-size: x-small;">;</span></p>
</p>
<p><span style="font-size: x-small; color: #008000;">// change &#8211; start &#8211; performance improvement for large grids</span></p>
</p>
<p><span style="font-size: x-small;"></span></p>
<p>$(</p>
</p>
<p><span style="font-size: x-small; color: #800000;">&#8220;#jqg_&#8221;</span><span style="font-size: x-small;">+$t.p.selrow.replace(</span><span style="font-size: x-small; color: #800000;">&#8220;.&#8221;</span><span style="font-size: x-small;">, </span><span style="font-size: x-small; color: #800000;">&#8220;\\\\.&#8221;</span><span style="font-size: x-small;">),<strong>pt</strong>).attr(</span><span style="font-size: x-small; color: #800000;">&#8220;checked&#8221;</span><span style="font-size: x-small;">,stat);</span></p>
<p><span style="font-size: x-small; color: #008000;">//$(&#8221;#jqg_&#8221;+$t.p.selrow.replace(&#8221;.&#8221;, &#8220;\\\\.&#8221;),<strong>$t.rows</strong>).attr(&#8221;checked&#8221;,stat);</span></p>
<p><span style="font-size: x-small; color: #008000;">//&#160; change &#8211; end</span></p>
</p>
<p><span style="font-size: x-small;"></span></p>
<p>$t.p.selarrrow.push($t.p.selrow);</p>
</p>
<p><span style="font-size: x-small; color: #0000ff;">if</span><span style="font-size: x-small;">( $t.p.onSelectRow &#38;&#38; onsr) { $t.p.onSelectRow($t.p.selrow, stat); }</span></p>
<p>}</p>
</p>
<p><span style="font-size: x-small; color: #0000ff;">else</span></p>
<p><span style="font-size: x-small;">{ <br /></span></p>
</p>
<p><span style="font-size: x-small; color: #0000ff;">if</span><span style="font-size: x-small;">($(pt).attr(</span><span style="font-size: x-small; color: #800000;">&#8220;class&#8221;</span><span style="font-size: x-small;">) !== </span><span style="font-size: x-small; color: #800000;">&#8220;subgrid&#8221;</span><span style="font-size: x-small;">) { $(pt).removeClass(</span><span style="font-size: x-small; color: #800000;">&#8220;ui-state-highlight&#8221;</span><span style="font-size: x-small;">).attr(</span><span style="font-size: x-small; color: #800000;">&#8220;aria-selected&#8221;</span><span style="font-size: x-small;">,</span><span style="font-size: x-small; color: #800000;">&#8220;false&#8221;</span><span style="font-size: x-small;">);}</span></p>
<p>stat =</p>
</p>
<p><span style="font-size: x-small; color: #0000ff;">false</span> <span style="font-size: x-small;">;</span></p>
</p>
<p><span style="font-size: x-small; color: #008000;">// change &#8211; start &#8211; performance improvement for large grid</span></p>
</p>
<p><span style="font-size: x-small;"></span></p>
<p>$(</p>
</p>
<p><span style="font-size: x-small; color: #800000;">&#8220;#jqg_&#8221;</span><span style="font-size: x-small;">+$t.p.selrow.replace(</span><span style="font-size: x-small; color: #800000;">&#8220;.&#8221;</span><span style="font-size: x-small;">, </span><span style="font-size: x-small; color: #800000;">&#8220;\\\\.&#8221;</span><span style="font-size: x-small;">),<strong>pt</strong>).attr(</span><span style="font-size: x-small; color: #800000;">&#8220;checked&#8221;</span><span style="font-size: x-small;">,stat);</span></p>
<p><span style="font-size: x-small; color: #008000;">//$(&#8221;#jqg_&#8221;+$t.p.selrow.replace(&#8221;.&#8221;, &#8220;\\\\.&#8221;),<strong>$t.rows</strong>).attr(&#8221;checked&#8221;,stat);</span></p>
<p><span style="font-size: x-small; color: #008000;">//&#160; change &#8211; end</span></p>
</p>
<p><span style="font-size: x-small;"></span></p>
<p>$t.p.selarrrow.splice(ia,1);</p></p>
]]></description>
        	        	<pubDate>Sun, 17 Jan 2010 06:59:30 +0200</pubDate>
        </item>
</channel>
</rss>