Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rate Thread Display Modes
Old 06-07-2006, 05:13 PM   #1
Ledneh
Registered User
 
Join Date: Jun 2006
Posts: 1
Question Rendering HTML in DataGrid cells?

I've been trying to work out methods for using HTML formatting in DataGrid cells. So far, here's what I've come up with from the help docs and Google and what not:

Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:DataGrid id="storyGrid" width="400" height="300" variableRowHeight="true" left="20" top="20">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:source>
                    <mx:Object Price="11.99">
                        <mx:Artist>
                        	<![CDATA[<b>Pave<i>ment</i></b>]]>
                        </mx:Artist>
                        <mx:Album>
                        	&lt;b&gt;Slanted and Enchanted&lt;/b&gt;
                        </mx:Album>
                    </mx:Object>
                    <mx:Object Artist="Pavement" Album="Brighten the Corners" Price="11.99" />
                </mx:source>
            </mx:ArrayCollection>
        </mx:dataProvider>
        <mx:columns>
            <mx:Array>
            	<mx:DataGridColumn dataField="Artist">
            		<mx:itemRenderer>
            			<mx:Component>
							<mx:Text x="0" y="0" width="100%" htmlText="{data.Artist}"/>
						</mx:Component>
            		</mx:itemRenderer>
            	</mx:DataGridColumn>
                <mx:DataGridColumn dataField="Album" />
                <mx:DataGridColumn dataField="Price" />
            </mx:Array>
        </mx:columns>
	</mx:DataGrid>
</mx:Application>
Now, all this works just fine for the DataGridColumn for which the HTML renderer is defined. But the rest just blast out the tags without rendering them.

To fix that, I COULD copy and paste the item renderer for each column, changing the data property as I go, but that feels repetitious and wasteful. So I wanted to ask, is there any way to specify to the DataGrid, "render all HTML contents in your tags" or, failing that, a way to specify a default itemRenderer for the whole grid that renders HTML?

Thanks!
Ledneh is offline   Reply With Quote
Old 06-18-2006, 01:57 PM   #2
nirth
Member
 
Join Date: May 2006
Posts: 46
Send a message via ICQ to nirth Send a message via AIM to nirth Send a message via MSN to nirth Send a message via Yahoo to nirth Send a message via Skype™ to nirth
Default

my opinion that the easiest way to do it, is creation the class, than is u need more customized renderers you can extend your class, and assign different renderers to the columns.

i've did it like this
Code:
// renderers/HTMLRenderer.as
package renderers
{
	import mx.controls.Text;
	import mx.events.FlexEvent;

	public class HTMLRenderer extends Text
	{
		public function HTMLRenderer ()
		{
			super();
		}
		
		private var _data:Object;
		
		[Bindable("dataChange")]
		[Inspectable(environment="none")]
		override public function get data():Object
   		{
        	return _data;
    	}
		override public function set data(value:Object):void
		{
			_data = value;
	
	        if (listData)
			{
	            htmlText = listData.text;
			}
	        else if (_data != null)
	        {
	            if (_data is String)
	                htmlText = String(_data);
	            else
	                htmlText = _data.toString();
	        }	
			dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		}
	}
}
and the mxml
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:DataGrid itemRenderer="renderers.HTMLRenderer" id="storyGrid" width="400" height="300" variableRowHeight="true" left="20" top="20">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:source>
                    <mx:Object Price="11.99">
                        <mx:Artist>
                        	<![CDATA[<b>Pave<i>ment</i></b>]]>
                        </mx:Artist>
                        <mx:Album>
                        	&lt;b&gt;Slanted and Enchanted&lt;/b&gt;
                        </mx:Album>
                    </mx:Object>
                    <mx:Object Artist="Pavement" Album="Brighten the Corners" Price="11.99" />
                </mx:source>
            </mx:ArrayCollection>
        </mx:dataProvider>
        <mx:columns>
            <mx:Array>
            	<mx:DataGridColumn dataField="Artist" />
                <mx:DataGridColumn dataField="Album" />
                <mx:DataGridColumn dataField="Price" />
            </mx:Array>
        </mx:columns>
	</mx:DataGrid>
</mx:Application>
__________________
OrangeBlog finally in english, but really bad one
nirth is offline   Reply With Quote
Old 06-05-2009, 03:10 PM   #3
sevmusic
Registered User
 
Join Date: Jun 2009
Posts: 1
Default

I've seen your code on more than one site.. hopefully you'll see this...

Using this code in Flex 3 gives me this error:

1119: Access of possibly undefined property text through a reference with static type mx.controls.listClasses:BaseListData.

And it is referencing this in HTMLRenderer.as

htmlText = listData.text;

I even tried: import mx.controls.listClasses.BaseListData;

still no luck... am I missing something?

Thanks for the help.
sevmusic is offline   Reply With Quote
Old 12-18-2009, 04:48 PM   #4
_bill
Registered User
 
Join Date: Dec 2009
Posts: 2
Angry Solution: Data corruption when cycling through data sets.

I had trouble extending the Text component directly. I was getting data corruption when cycling through different data sets, so I added a level of abstraction to deal with the Text component indirectly.

You can add to this code to include style accessor functions and so forth.

ActionScript Code:
package renderers {     import mx.containers.Canvas;     import mx.controls.Text;     import mx.controls.dataGridClasses.DataGridListData;     import mx.controls.listClasses.BaseListData;     import mx.controls.listClasses.IDropInListItemRenderer;     import mx.controls.listClasses.IListItemRenderer;     import mx.core.UIComponent;     import mx.events.FlexEvent;     public class HTMLRenderer extends UIComponent implements IDropInListItemRenderer, IListItemRenderer     {         [Bindable( "dataChange" )]                 protected var _data:Object;         protected var _listData:BaseListData;         protected var _container:Canvas;         protected var _textControl:Text;         protected var _textFormat:TextFormat;         protected var _styleSheet:StyleSheet;                 public function HTMLRenderer()         {             super();         }                       /**          * Returns the data value.          * IListItemRenderer method          *          * @returns Object          * @see IListItemRenderer          */         public function get data():Object         {             return _data;         }                 /**          * Commits the received object to the data property, invalidates properties,          * and dispatches a dataChange events.          * IListItemRenderer method          *          * @param value Object          * @see IListItemRenderer          */         public function set data( value:Object ):void         {             _data = value;             invalidateProperties();             dispatchEvent( new FlexEvent( FlexEvent.DATA_CHANGE ) );         }                 /**          * Returns the listData value.          * IDropInListItemRenderer method          *          * @returns BaseListData          * @see     IDropInListItemRenderer          */         public function get listData():BaseListData         {             return _listData;         }                 /**          * Commits the listData and invalidates properties.          * IDropInListItemRenderer method          *          * @param value BaseListData          * @see IDropInListItemRenderer          */         public function set listData( value:BaseListData ):void         {             _listData = value;             invalidateProperties();         }                 /**          * Creates all child elements and ensure they are in the display list.          */         override protected function createChildren():void         {             super.createChildren();                         if ( _container == null )             {                 _container = new Canvas();                 _container.horizontalScrollPolicy = "off";                 _container.verticalScrollPolicy = "off";                 addChild( _container );                                 _textControl = new Text();                 _container.addChild( _textControl );             }             else if ( !this.numChildren )             {                 addChild( _container );             }         }                        /**          * Commits all properties and sets the visible HTML text. This is where          * the magic happens. Called by the framework during init and invalidateProperties.          */         override protected function commitProperties():void         {             super.commitProperties();                         // Determine the value of htmlText.             var value:String = "";             var dataField:String = "htmlText"; // default.             try             {                 // Set the htmlText to the label, which will appropriately handle labelFunctions                 value = DataGridListData( listData ).label;             }             catch ( err:Error )             {                 // Ignore error, try to handle another way.                 if ( _data != null && _data[ dataField ] != null )                 {                     if ( _data[ dataField ] is String ) { value = _data[ dataField ]; }                     else { value = _data[ dataField ].toString(); }                 }             }             // Set the htmlText!             _textControl.htmlText = value;             invalidateSize();         }                 /**          * Measure informs the parent object what the preferred size should be.          * This will be ignored if an explicit width and height are set.          * Called by the framework during init and invalidateSize.          */         override protected function measure():void         {             super.measure();             if ( _textControl != null )             {                 measuredWidth = _textControl.width;                 measuredHeight = _textControl.height;             }         }         /**          * Position and size child elements and call all drawing API methods.          * Called by the framework during init and invalidateDisplayList.          */         override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void         {             super.updateDisplayList( unscaledWidth, unscaledHeight );                      _container.width = unscaledWidth;             _container.height = unscaledHeight;            }           } }

I hope this helps folks.
_bill is offline   Reply With Quote
Old 12-18-2009, 04:59 PM   #5
_bill
Registered User
 
Join Date: Dec 2009
Posts: 2
Default Fixed resizing problem

HTML text doesn't always measure its size correctly immediately. I added an event to the code above that will fire after 1 frame (allowing the HTML text to render) and re-invalidate the size. The event fires once and then removes itself.

Replace the "commitProperties" function above with this code:

ActionScript Code:
/**          * Commits all properties and sets the visible HTML text. This is where          * the magic happens. Called by the framework during init and invalidateProperties.          */         override protected function commitProperties():void         {             super.commitProperties();                         // Determine the value of htmlText.             var value:String = "";             var dataField:String = "htmlText"; // default.             try             {                 // Set the htmlText to the label, which will appropriately handle labelFunctions                 value = DataGridListData( listData ).label;             }             catch ( err:Error )             {                 // Ignore error, try to handle another way.                 if ( _data != null && _data[ dataField ] != null )                 {                     if ( _data[ dataField ] is String ) { value = _data[ dataField ]; }                     else { value = _data[ dataField ].toString(); }                 }             }             // Set the htmlText!             _textControl.htmlText = value;                         // Invalidate size now, then do it again in another frame to ensure rendering accuracy.             invalidateSize();             this.addEventListener( Event.ENTER_FRAME, invalidateSizeOnEnterFrame, false, 0, true );         }                 /**          * Invalidates size and removes this function as an event listener for EnterFrame.          *          * @param event Event of type Event.ENTER_FRAME          */         protected function invalidateSizeOnEnterFrame( event:Event ):void         {             this.removeEventListener( Event.ENTER_FRAME, invalidateSizeOnEnterFrame, false );             invalidateSize();         }
_bill is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
DataGrid not rendering html elements BenB Components 2 06-08-2009 12:45 PM
Export data from DataGrid to HTML Dzian Components 0 01-08-2006 02:42 PM
html text rendering problem in flash mx overbyte ActionScript 1.0 (and below) 5 11-13-2005 07:57 PM
HTML partially rendering jcharlesberry ActionScript 2.0 3 06-30-2005 05:20 PM
DataGrid and html CellRenderer clp0978 Components 1 10-26-2004 06:27 PM


All times are GMT. The time now is 11:51 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.