<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Blue Flex &#187; datagrid</title>
	<atom:link href="http://kennethsutherland.com/tag/datagrid/feed/" rel="self" type="application/rss+xml" />
	<link>http://kennethsutherland.com</link>
	<description>Flex with a hint of cool</description>
	<lastBuildDate>Fri, 30 Apr 2010 11:17:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Show dual coloured highlight for a DG</title>
		<link>http://kennethsutherland.com/2009/06/11/show-dual-coloured-highlight-for-a-dg/</link>
		<comments>http://kennethsutherland.com/2009/06/11/show-dual-coloured-highlight-for-a-dg/#comments</comments>
		<pubDate>Thu, 11 Jun 2009 15:02:48 +0000</pubDate>
		<dc:creator>Kenneth</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[actionscript 3]]></category>
		<category><![CDATA[advanceddatagrid]]></category>
		<category><![CDATA[datagrid]]></category>
		<category><![CDATA[drawHighlightIndicator]]></category>

		<guid isPermaLink="false">http://kennethsutherland.com/?p=491</guid>
		<description><![CDATA[If you have a datagrid that has different coloured columns, then why should you have to do with only using a single colour for the highlight. Below is a simple soloution using actionscript to solve this. First I should state that you need to use the AdvancedDataGrid even if you only need a normal DataGrid. [...]]]></description>
			<content:encoded><![CDATA[<p>If you have a datagrid that has different coloured columns, then why should you have to do with only using a single colour for the highlight.</p>
<p>Below is a simple soloution using actionscript to solve this.</p>
<p>First I should state that you need to use the AdvancedDataGrid even if you only need a normal DataGrid.  This is because the AdvancedDataGrid has a method called drawHighlightIndicator(&#8230;), which as you&#8217;d expect from the name draws the highlight.  Normally this is a single colour, but with a little overriding you&#8217;ll be able to change this.</p>
<p>Below is the main snippet of code from the extended AdvancedDataGrid.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;">override <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #339966; font-weight: bold;">function</span> drawHighlightIndicator<span style="color: #000000;">&#40;</span>  indicator<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Sprite</span>, <span style="color: #004993;">x</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, <span style="color: #004993;">y</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>,
	<span style="color: #004993;">width</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, <span style="color: #004993;">height</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>, <span style="color: #004993;">color</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">uint</span>,  itemRenderer<span style="color: #000000; font-weight: bold;">:</span>IListItemRenderer<span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #009900;">//The indicator is the highlight, so grab its graphics and clear them</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> g<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Graphics</span> = <span style="color: #004993;">Sprite</span><span style="color: #000000;">&#40;</span>indicator<span style="color: #000000;">&#41;</span>.<span style="color: #004993;">graphics</span>;
	g.<span style="color: #004993;">clear</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
&nbsp;
	<span style="color: #6699cc; font-weight: bold;">var</span> xPos <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">Number</span> = <span style="color: #000000; font-weight:bold;">0</span>;
	<span style="color: #6699cc; font-weight: bold;">var</span> yPos <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">Number</span> = <span style="color: #000000; font-weight:bold;">0</span>;
	<span style="color: #009900;">//loop through the number of columns in the datagrid</span>
	<span style="color: #0033ff; font-weight: bold;">for</span><span style="color: #000000;">&#40;</span><span style="color: #6699cc; font-weight: bold;">var</span> i <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">uint</span> = <span style="color: #000000; font-weight:bold;">0</span>; i <span style="color: #000000; font-weight: bold;">&amp;</span>lt; <span style="color: #0033ff; font-weight: bold;">this</span>.columnCount; i<span style="color: #000000; font-weight: bold;">++</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#123;</span>
		<span style="color: #009900;">//get a random colour</span>
		g.<span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>randColour<span style="color: #000000;">&#41;</span>;
		<span style="color: #009900;">//draw the rectanlge that fills the first column</span>
		g.<span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span>xPos, <span style="color: #004993;">y</span>, <span style="color: #0033ff; font-weight: bold;">this</span>.columns<span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span>.<span style="color: #004993;">width</span>, <span style="color: #004993;">height</span><span style="color: #000000;">&#41;</span>;
		<span style="color: #009900;">//update the starting X position so that it starts at the begin of the</span>
		<span style="color: #009900;">//next column</span>
		xPos = xPos <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #0033ff; font-weight: bold;">this</span>.columns<span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span>.<span style="color: #004993;">width</span>;
	<span style="color: #000000;">&#125;</span>
	g.<span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>using the above you could create a DataGrid like the below which has some left hand columns in light purple and the rest in white. Then on highlight that same light purple colour is used for the white cells and the existing light purple becomes a slightly darker purple.</p>
<p><img class="aligncenter" title="Twin DG colour example" src="/flex/june09/TwinHighlight/twinDGColour.JPG" alt="Twin DG colour example" width="389" height="175" /></p>
<p>Check out this <a title="Twin coloured DG highlight" href="http://www.kennethsutherland.com/flex/june09/TwinHighlight/demoTwinHighlight.html" target="_blank">link to see a very simple/colourful demo</a>. As ever right click app for full source code.</p>
<p style="text-align: center;"><script type="text/javascript"><!--
google_ad_client = "pub-7396620608505330";
google_ad_slot = "1277482570";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
]]></content:encoded>
			<wfw:commentRss>http://kennethsutherland.com/2009/06/11/show-dual-coloured-highlight-for-a-dg/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
