<?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: Resolving performance issue on Expand/Collapse Events</title>
	<link>http://www.trirand.com/blog/?page_id=393/treegrid/resolving-performance-issue-on-expandcollapse-events</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/treegrid/resolving-performance-issue-on-expandcollapse-events/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>rpires on Resolving performance issue on Expand/Collapse Events</title>
        	<link>http://www.trirand.com/blog/?page_id=393/treegrid/resolving-performance-issue-on-expandcollapse-events#p23535</link>
        	<category>TreeGrid</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/treegrid/resolving-performance-issue-on-expandcollapse-events#p23535</guid>
        	        	<description><![CDATA[<p>I was having performance issue with a grid containing ~570 rows and treegrid enabled.</p>
<p>When the row had a lot of child rows, whenever I tried to expand or collapse it, it was taking about 3-4 seconds to do it (unnaceptable <img class="spSmiley" style="margin:0" title="Yell" src="/blog/wp-content/forum-smileys/sf-yell.gif" alt="Yell" />).</p>
</p>
<p>The solution I found was to modify the <strong>grid.treegrid.js</strong> and<strong> remove the "context" </strong>information from the selector.</p>
</p>
<p><strong>expandRow</strong>: function(record) {</p>
<p>....</p>
<p>//$("#" + id, <span style="color: #ff0000;">$t.grid.bDiv</span>).css("display", "");<span style="white-space: pre;"> </span>//ORIGINAL CODE (SLOW)</p>
<p>$("#" + id).css("display", "");<span style="white-space: pre;"> </span>//NEW CODE (FAST)</p>
<p>...</p>
<p>},</p>
<p><strong>collapseRow</strong>: function(record) {</p>
<p>...</p>
<p>//$("#" + id, <span style="color: #ff0000;">$t.grid.bDiv</span>).css("display", "none");<span style="white-space: pre;"> </span>//ORIGINAL CODE (SLOW)</p>
<p>$("#" + id).css("display", "none");<span style="white-space: pre;"> </span>//NEW CODE (FAST)</p>
<p>...</p>
<p>}</p>
</p>
<p>We all know that using context was supposed to speed up the selector, but in this case it was doing exactly the opposite...</p>
</p>
<p>After removing the context, the expand/collapse operation now takes ~1 second... good enough.</p>
</p>
<p>I&#39;m not sure this was the more appropriate way to achieve it, but it worked for me.&#160;<img class="spSmiley" style="margin:0" title="Cool" src="/blog/wp-content/forum-smileys/sf-cool.gif" alt="Cool" /></p>
</p>
<p>Hope it helps.</p>
]]></description>
        	        	<pubDate>Thu, 09 Jun 2011 00:16:12 +0300</pubDate>
        </item>
</channel>
</rss>