BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Datagrid with multiLine variable height text Item Renderer in Flex

Posted by Shardul Singh Bartwal on December 15, 2010

I was trying to get the multiline text inside the item renderer of a column and I tried a lot for this with multiple controls like TextInput, Textarea, Label etc by using the item render but was not getting the proper output.The thing which I was getting was that every item rendererer was taking the same height which was for the maximum height item renderer,and was not based on the content inside it.
The reason was only that earlier I was putting my these controls inside a Container and
there was sizing related issue for the container as I was not able to make different item renderes of different heights depending upon the text of the field inside it. But later I created my item render directly from the Text component and got the perfect result.

Main Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF" 
	layout="vertical">
	<mx:Script>
		 <![CDATA[
       	import mx.controls.Alert;
           import mx.collections.ArrayCollection;
           
           [Bindable]
           public var arrayCollection:ArrayCollection = new ArrayCollection([
               {indexNo : '1',description:'Shardul just trying for multiline text item Renderer'},
               {indexNo : '2',description:'This text should appear on more then one line of text and it will definetly appear lets try.'},
               {indexNo : '3',description:'Cool its working fine without any prolbem hope you all will like this.'},
           ]);
           
       ]]>
	</mx:Script>   

   
 	 <mx:DataGrid width="300" height="200"
                variableRowHeight="true"
                dataProvider="{arrayCollection}">
        <mx:columns>
        	<mx:DataGridColumn headerText="IndexNo" dataField="indexNo"/>
            <mx:DataGridColumn headerText="Label Check" dataField="description" itemRenderer="VariableHeightItemRenderer"/>
        </mx:columns>
    </mx:DataGrid>
    
</mx:Application>

VariableHeightItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml"  text="{data.description}"
	 buttonMode="true" useHandCursor="true" mouseChildren="false" >
	<mx:Script>
		<![CDATA[
			override public function set data(value:Object):void
			{
				if(value != null)
				super.data = value;
			}
		]]>
	</mx:Script>
</mx:Text>

Hope you will enjoy this.
Keep rocking………..Happy flexing….

Advertisements

2 Responses to “Datagrid with multiLine variable height text Item Renderer in Flex”

  1. Alex said

    DataGrid supports multiline variable rowheight in the default renderer. If you set wordWrap=true on the column and variableRowHeight=true on the DataGrid, the text would wrap without need for a custom renderer. Using Text is not required and will consume more resources.

    If you want to know more about why Text in a Container did not work for you, see the following post:
    http://blogs.adobe.com/aharui/2010/10/mx-datagrid-list-and-variablerowheight.html

  2. Shardul said

    Hi Alex,
    Yes you are absolutely right.With These two properties we will get our requirement. But If I need the item renderer for the Text as I was requiring for the style of the text and for the navigation from the text depending upon the content of text then and then only it was used,but yes in the post I have not used that all.I have also posted on the heading of this post item renderer.

    I also checked the code on
    http://blogs.adobe.com/aharui/2010/10/mx-datagrid-list-and-variablerowheight.html

    Its very nice……. and It has to be as this is from you.
    Thnx a lot.

    Shardul

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: