• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 748
  • Last Modified:

FLEX 3 Datagrid: How to get column to fit wide text.

I am using the flex3 datagrid with some data where one of the columns is many screens wide. I would like to find a way to make the flex datagrid risize the column to fit the text and to automatically add a left-right scroll bar at the bottom.

Is this possible?
0
AdrianSmithUK
Asked:
AdrianSmithUK
  • 4
  • 4
1 Solution
 
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
can you post a screen shot?

did you try specifying the <mx:DataGridColumn>  width and height?


did you mean row size? then check this

http://www.flex888.com/712/datagrid-with-flexible-row-height.html
0
 
AdrianSmithUKAuthor Commented:
Hi Shivaspk

Here is a simple demo.

I am using a 1920px wide monitor and on my screen the text overflows the cell and no scroll bars are added. (See screenshot)

If this was an html table in a browser the page would stretch to the right until it met the end of the text (with the right css of course) and the browser would add a horizontal scroll bar so that the user could navigate to the end of the text.

A simple solution was to set the page to 5000px wide and set the grid to 100% wide. However, I really want the grid to fill the screen (less the padding) and for the table to add scroll bars as necessary.



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">

<mx:Script>
	<![CDATA[
	
	[Bindable]
	public var d:String = 'http://cgi.ebay.co.uk/Womens-Rocket-Dog-Preppy-Boat-Shoe_W0QQitemZ130383117582QQcmdZViewItemQQptZWomen_s_Shoes?var=&hash=item641e165555&r=Womens-Rocket-Dog-Preppy-Boat-Shoe_W0QQitemZ130383117582QQcmdZViewItemQQptZWomen_s_Shoes?var=&hash=item641e165555&z=Womens-Rocket-Dog-Preppy-Boat-Shoe_W0QQitemZ130383117582QQcmdZViewItemQQptZWomen_s_Shoes?var=&hash=item641e165555';
		
	]]>
</mx:Script>

<mx:DataGrid width="100%" height="100%" dataProvider="{d}" sortableColumns="true">

<mx:columns>
	<mx:DataGridColumn dataField="d" headerText="Ref" visible="true" />
</mx:columns>

</mx:DataGrid>
	
</mx:Application>

Open in new window

screenshot.jpg
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
Oh I see, just enable the wordWrap on the column and you are done. Try the code attached.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
	
	<mx:Script>
		<![CDATA[
			
			[Bindable]
			public var d:String = 'http://cgi.ebay.co.uk/Womens-Rocket-Dog-Preppy-Boat-Shoe_W0QQitemZ130383117582QQcmdZViewItemQQptZWomen_s_Shoes?var=&hash=item641e165555&r=Womens-Rocket-Dog-Preppy-Boat-Shoe_W0QQitemZ130383117582QQcmdZViewItemQQptZWomen_s_Shoes?var=&hash=item641e165555&z=Womens-Rocket-Dog-Preppy-Boat-Shoe_W0QQitemZ130383117582QQcmdZViewItemQQptZWomen_s_Shoes?var=&hash=item641e165555';
			
		]]>
	</mx:Script>
	
	<mx:DataGrid width="100%" height="100%" dataProvider="{d}" sortableColumns="true">
		
		<mx:columns>
			<mx:DataGridColumn dataField="d" headerText="Ref" visible="true" wordWrap="true"/>
		</mx:columns>
		
	</mx:DataGrid>
	
</mx:Application>

Open in new window

0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
AdrianSmithUKAuthor Commented:
Hi Shivaspk

Wordwrap wasn't really what I was looking for, but many thanks for the help.

I really wanted a single row of text and a column that scaled accordingly (like in html). From my invetigations I don't think it's possible without using AS3 and counting characters and setting the chart/column width dynamically.

Do you know of any other method?

0
 
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
scaled accordingly with a scroll bar???
0
 
AdrianSmithUKAuthor Commented:
Hi Shivaspk

Sorry, I'm not sure I understand your last post.

Could you expand?
0
 
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
What I meant was were you expecting to see a scroll bar? as the the row data / column is wider than 100% of the screen visible area.
0
 
AdrianSmithUKAuthor Commented:
Thank you.

Yes that's right. If I did it in AS3 either the page could scroll or the grid could be made to scroll by adding a scroll bar component at run time. Using the page scroll bars would be easier.

I don't want to waste any more of your time on this issue. I just wondered if you knew of a simple way to achieve the result without resulting to AS3. If not I think we've come to the end of this thread.

Let me know and I'll close the thread down and award the points.

Kind Regards,
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now