Integrating a Datagrid on Pop-up

594
7
06-07-2012 07:24 AM
kaarimelmaanani
New Contributor II
Hi
i'm working on Flex viewers 2.5 source code and the Flash builder 4.6

First i wanted to add a pop-up on the maps containing few line on the texte by following this example http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Pop_up_configuration_files/01m30000002... .. and every thing gone alright
But when I tried to add a small datagrid on This  Pop-up windows it  doesn't work it throw an error (Error #1083).

Does any one knows how i can do it



Few line of my source code
<description>
<![CDATA[<b>................. " text"
        </b> <A HREF="http://..../"> see more... </A> 
       
        ]]>
  
  <mx:DataGrid width="100%" height="40%" sortableColumns="True"  editable ="true">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
            <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
            <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
        </mx:columns>
     </mx:DataGrid>

</description>


Thank you

Regards Km
Tags (2)
0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Emeritus
Kaarim,

   There is a forum specific to the Flex Viewer that you should post Flex Viewer questions to:

http://forums.arcgis.com/forums/111-ArcGIS-Viewer-for-Flex

   The CDATA section in the description can only have a very limited subset of HTML tags. It does not support MXML code. to do what you want you will have to modify extend the Flex API's PopUpRendererSkin.mxml (obtained from the Flex API source download, not part of the Flex Viewers source).

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow the steps as shown in the below graphic:
0 Kudos
kaarimelmaanani
New Contributor II
Thanks for replying  rscheitlin

But i don't get what your told me to do
i have downloaded " PopUpRendererSkin.mxml " from the API Source code , do i have to import it in my flex viewers porject under the popups package ?
i'm lost .. i don't have any idea how to proceed

Can you give me more details about the step to do ?
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Kaarim,

   Yes you take the PopUpRenderer.mxml from the API download and place it in your Flex Viewer project either in your widgets package folder or the src/com/esri/viewer/skins/ folder and make your code changes by adding the datagrid to the fx Declarations section and in the commitProperties function is where you add it to the vGroup. You will then need to add these lines to the default.css in your project.

esri|PopUpRenderer
{
    skin-class: ClassReference("com.esri.viewer.skins.PopUpRendererSkin");
}


That shows you the basics of getting started. I assume because you are even attempting this that you have the coding skill to get done what you are attempting.

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow the steps as shown in the below graphic:
0 Kudos
kaarimelmaanani
New Contributor II
Thanks for the answer
Kaarim,
/ and make your code changes by adding the datagrid to the fx Declarations section and in the commitProperties function is where you add it to the vGroup. You will then need to add these lines to the default.css in your project.


But i still don't get it  .. can you be more patient and give me some explanation ..

Regards KM
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Kaarim,

   What part are you not understanding?
0 Kudos
kaarimelmaanani
New Contributor II
The parts In quotes ..

adding the datagrid to the fx Declarations section  i used this ( a blank grid)
<mx:DataGrid width="100%" height="40%" sortableColumns="True"  editable ="true">
   <mx:columns>
    <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
    <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
    <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
   </mx:columns>
  </mx:DataGrid>


and in the commitProperties function is where you add it to the vGroup. How ? do you have any example

Thanks
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Kaarim,

   No I don't have an example, I am providing advice not actually doing the coding. If you look at the commitProperties function you will see how other items that are in the declarations section are added by using the vGroup.addElement and then using the id of the component in the declarations section (I notice that you datagrid does not have an id). If you are struggling with this part you are probably in over your head.
0 Kudos