Google maps steps description in HTML and Flex datagrid issue.

Question

I am working with google map api ... http://code.google.com/p/gmaps-samples-flash/source/browse/trunk/samplecode/GeocodingSimple.mxml

What i want to do is to take up all the steps of direction, and place them in a datagrid. but the problem that the google map api provide description on in HTML format. and then i put this steps data in my flex datagrid, it shows up all the html tags in it too, including with the data.

Can there be some way i can do this, without the html tags.

My code for the google maps look like this :

private function processTurnByTurn():void  {

       var stepText:String;
       var stepMarker:Marker;
       for (var turnCounter:int=dir.getRoute(0).numSteps-1; turnCounter >= 0; turnCounter--)
       {
        StepArray.addItem({step: dir.getRoute(0).getStep(turnCounter).descriptionHtml});
       }

     }

This is the function to create the step ArrayCollection for the datagrid and the datagrid code looks like this:

<mx:DataGrid width="100%" height="100%" 
           dataProvider="{StepArray}">
            <mx:columns>
              <mx:DataGridColumn headerText="Column 1" dataField="step"/>
            </mx:columns>
          </mx:DataGrid>

Can someone help me out with this issue. Regards Zeeshan

Answer 1

You need to create an itemRenderer component: http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_3.html

Check the docs. There's simple ones you can define right in your datagrid definition, and there's others, like my link, that you create as custom component depending on how much control you want over the display.

The point is, you can control whether your label sets the "htmlText" field vs. the "text" field. Or you can write a control that strips out the html and displays the required text. It all depends on how you want to show those direction elements.

Answer 2

Use htmlText property instead of text in the itemRenderer

Answer 3

Yes, Html text, but be careful that a small number of html tags are supported by Flex