Kalen Gibbons » itemRenderer http://www.kalengibbons.com/blog The Dead Tree Blog Mon, 24 Oct 2011 20:43:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Displaying DataTips when using an itemRenderer http://www.kalengibbons.com/blog/index.php/2008/12/displaying-datatips-when-using-an-itemrenderer/ http://www.kalengibbons.com/blog/index.php/2008/12/displaying-datatips-when-using-an-itemrenderer/#comments Sat, 13 Dec 2008 20:25:21 +0000 Kalen Gibbons http://www.kalengibbons.com/blog2/?p=77 One of the bad things about using itemRenderers in a DataGridColumn is that you lose the dataTip functionality that it normally provides. Well, here is a way to fake that functionality.

First, add the dataTipField or dataTipFunction to the DataGridColumn like you normally would.

<mx:DataGridColumn  headerText="DataTip"

dataField="name1"
showDataTips="true"
dataTipField="description1" />

Then, in your itemRenderer add the following code to be able to tap into that information and display a tooltip instead.

private function getToolTip():String{

var dg:DataGrid = listData.owner as DataGrid;
var func:Function = dg.columns[listData.columnIndex].dataTipFunction;

if(func != null){

return func.call(this, this.data);

}else if(dg.columns[listData.columnIndex].dataTipField.length){

return data[dg.columns[listData.columnIndex].dataTipField];

}else{

return "";

}

}

 

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{

super.updateDisplayList(unscaledWidth, unscaledHeight);
this.toolTip = getToolTip();

}

This works with both dataTipFields and dataTipFunctions and lets you treat the dataTips in your columns the same way, regardless of whether you’re using an itemRenderer or not. The only minor difference is the positioning of the label, but that can be easily modified with styles. You can download the full source code here, for a functional example of how this works.



 

]]> http://www.kalengibbons.com/blog/index.php/2008/12/displaying-datatips-when-using-an-itemrenderer/feed/ 8 Update: Solution to disappearing data in your itemRenderer http://www.kalengibbons.com/blog/index.php/2008/12/update-solution-to-disappearing-data-in-your-itemrenderer2/ http://www.kalengibbons.com/blog/index.php/2008/12/update-solution-to-disappearing-data-in-your-itemrenderer2/#comments Tue, 09 Dec 2008 03:18:40 +0000 Kalen Gibbons http://www.kalengibbons.com/blog2/?p=125 In a previous post I explained how a rendering bug in Flex was causing items to disappear in an itemRenderer. In the example below, you can see that when you scroll, the items in the list disappear.  This is caused by the varying heights of the elements.  If you explicitly set the height for each element or set variableRowHeights to false, then the problem goes away.





What was causing the problem was apparent but the solution was not.  Thankfully, Olivier Lalonde was nice enough to shed some light on an easy fix.  The itemRenderer needs to be validated as the user scrolls.  So, as Olivier suggests, you simply need to listen for the dataChange event and execute the validateNow() function.

You can see in the example below that the list now has varying row heights… and the data no longer disappears. NICE!  The key point to focus on here is the following line: <mx:VBox dataChange=”validateNow()” verticalGap=”0″>

<mx:List

dataProvider=”{myData.item}“
variableRowHeight=”true“
alternatingItemColors=”['#FFFFFF','#E6EEF3']“
width=”100%“
height=”100%“>

 

<mx:itemRenderer>

<mx:Component>

<mx:VBox verticalGap=”0” dataChange=”validateNow()”>

<mx:HBox>

<mx:Label text=”{data.Label}” fontWeight=”bold” />

<mx:Label text=”{data.date}” color=”#999999” />

</mx:HBox>
<mx:Text text=”{data.description}” width=”100%” />

</mx:VBox>

</mx:Component>

</mx:itemRenderer>

 

</mx:List>







]]> http://www.kalengibbons.com/blog/index.php/2008/12/update-solution-to-disappearing-data-in-your-itemrenderer2/feed/ 20 Disappearing data in your itemRenderer? http://www.kalengibbons.com/blog/index.php/2008/10/disappearing-data-in-your-itemrenderer/ http://www.kalengibbons.com/blog/index.php/2008/10/disappearing-data-in-your-itemrenderer/#comments Wed, 15 Oct 2008 03:11:40 +0000 Kalen Gibbons http://www.kalengibbons.com/blog2/?p=48 Note: An update to this post has been posted here. It provides a better solution than the one offered below, so I recommend you check it out.

Although I love Flex, it can still be a bit buggy at times. I was working with an itemRenderer the other day and came across some very odd behavior. I had a list using an itemRenderer and when the data originally loaded everything was fine, but whenever I scrolled some of the data started disappearing. You can see this demonstrated in the sample below.


<mx:List dataProvider="{myData.item}"

variableRowHeight="true"
alternatingItemColors="['#FFFFFF','#E6EEF3']"
width="100%"
height="100%">

 

<mx:itemRenderer>

<mx:Component>

<mx:VBox verticalGap="0">

<mx:HBox>

<mx:Label text="{data.Label}" fontWeight="bold" />
<mx:Label text="{data.date}" color="#999999" />

</mx:HBox>
<mx:Text text="{data.description}" width="100%" />

</mx:VBox>

</mx:Component>

</mx:itemRenderer>

</mx:List>

Apparently, Flex likes to have all the items in a list the same height; so when an item such as the Text field in the example causes variation, Flex simply doesn’t display it. I found that the easiest way to remedy the issue was to set explicit heights for the items in the renderer. Here is an example of how it works with the height explicitly set:


<mx:List dataProvider="{myData.item}"

variableRowHeight="true"
alternatingItemColors="['#FFFFFF','#E6EEF3']"
width="100%"
height="100%">

 

<mx:itemRenderer>

<mx:Component>

<mx:VBox verticalGap="0">

<mx:HBox>

<mx:Label text="{data.Label}" fontWeight="bold" />
<mx:Label text="{data.date}" color="#999999" />

</mx:HBox>
<mx:Text text="{data.description}" width="100%" height="30" />

</mx:VBox>

</mx:Component>

</mx:itemRenderer>

</mx:List>

Now, this isn’t a perfect solution. What we are doing here is effectively the same thing as setting variableRowHeight to false; thus making all the items in the List the same height. So if anybody has a better solution for this issue please let me know.

]]> http://www.kalengibbons.com/blog/index.php/2008/10/disappearing-data-in-your-itemrenderer/feed/ 9