Solved

Flex 3 Datagrid: pop-up window when cell is selected

Posted on 2009-04-07
14
6,410 Views
Last Modified: 2013-11-11
I have a flex datagrid to which I need to add this functionality: user clicks on cell, window should pop-up with additional information about the value in that cell.  The pop-up might need to be another datagrid with more info.

The data source for the main datagrid is xml.  Thanks for any help!
0
Comment
Question by:newbieal
  • 7
  • 7
14 Comments
 
LVL 5

Assisted Solution

by:Fuzzy_Logic_
Fuzzy_Logic_ earned 500 total points
ID: 24089134
Using Adobes Datagrid example at http://livedocs.adobe.com/flex/3/langref/mx/controls/DataGrid.html

add the code snippet below beneath the <mx:Application....>  tag.

Add initialize="init()" to the <mx:Application.... >


<mx:Script>

    <![CDATA[
 

        import mx.controls.dataGridClasses.DataGridItemRenderer;

        import mx.events.ListEvent;

        import mx.controls.Alert;

        

    public function init():void

    {

        //add the event listener

        this.dg.addEventListener(ListEvent.ITEM_CLICK, itemClicked);

    }

    

    private function itemClicked(le:ListEvent):void

    {

        

        var idgr:DataGridItemRenderer = le.itemRenderer as DataGridItemRenderer;

        var itemContents:String = idgr.listData.label;

        

        

        Alert.show(itemContents, "Value of cell clicked");

        

    }

        

    ]]>

</mx:Script>

Open in new window

0
 
LVL 4

Author Comment

by:newbieal
ID: 24089325
Thanks!  This is a great start, however the itemContents should be populated with additional data from my xml file.  If user clicks on a cell with content of 'A'.  Then I need to display additional info from my xml file that relates to content 'A'.

Also, the example only displays info when clicked within cells of the first column.  My datagrid has several more columns.
0
 
LVL 5

Assisted Solution

by:Fuzzy_Logic_
Fuzzy_Logic_ earned 500 total points
ID: 24090128
When I run this I do get the cells values in the Alert box. Not just Column 1 data.

I changed function itemClick to get the object represented by the XML instead and thus get other data for that row.

Below is the whole file, added another child node to the XML



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
 

<mx:Script>

    <![CDATA[

        import mx.core.IFlexDisplayObject;

        import mx.managers.PopUpManager;

        import mx.controls.dataGridClasses.DataGridItemRenderer;

        import mx.events.ListEvent;

        import mx.controls.Alert;

        

    public function init():void

    {

        //add the event listener

        this.dg.addEventListener(ListEvent.ITEM_CLICK, itemClicked);

    }

    

    private function itemClicked(le:ListEvent):void

    {

        

        // store whole item selected

        var itemContents:Object = this.dg.selectedItem

        

        // get other element

        Alert.show(itemContents.data, "Value of cell clicked");

        

    }

        

    ]]>

</mx:Script>
 

     <mx:XMLList id="employees">

        <employee>

       

            <name>Christina Coenraets</name>

            <phone>555-219-2270</phone>

            <email>ccoenraets@fictitious.com</email>

            <active>true</active>

            <data>

                other info CC

            </data>

        </employee>

        <employee>

        

            <name>Joanne Wall</name>

            <phone>555-219-2012</phone>

            <email>jwall@fictitious.com</email>

            <active>true</active>

             <data>

                other info JW

            </data>

        </employee>

        <employee>

        

            <name>Maurice Smith</name>

            <phone>555-219-2012</phone>

            <email>maurice@fictitious.com</email>

            <active>false</active>

             <data>

                other info MC

            </data>

        </employee>

        <employee>

       

            <name>Mary Jones</name>

            <phone>555-219-2000</phone>

            <email>mjones@fictitious.com</email>

            <active>true</active>

             <data>

                other info MJ

            </data>

        </employee>

    </mx:XMLList>
 

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%" 

        paddingTop="10" paddingLeft="10" paddingRight="10">
 

        <mx:Label width="100%" color="blue"

            text="Select a row in the DataGrid control."/>
 

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">

            <mx:columns>

                <mx:DataGridColumn dataField="name" headerText="Name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone"/>

                <mx:DataGridColumn dataField="email" headerText="Email"/>

            </mx:columns>

        </mx:DataGrid>
 

    </mx:Panel>
 

</mx:Application>

Open in new window

0
 
LVL 5

Assisted Solution

by:Fuzzy_Logic_
Fuzzy_Logic_ earned 500 total points
ID: 24090898
Finally to get specific data from a cell, I have added childnodes to the data node so that it maps the parent nodes. Now you can get specific data for a particular cell.

Hope that somewhere in here lies a solution.

ps. search for PopUpManager in adobe live docs to get info on how to get a full pop window http://livedocs.adobe.com/flex/3/langref/index.html


Regards FL
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
 

<mx:Script>

    <![CDATA[

        import mx.core.IFlexDisplayObject;

        import mx.managers.PopUpManager;

        import mx.controls.dataGridClasses.DataGridItemRenderer;

        import mx.events.ListEvent;

        import mx.controls.Alert;

        

    public function init():void

    {

        //add the event listener

        this.dg.addEventListener(ListEvent.ITEM_CLICK, itemClicked);

    }

    

    private function itemClicked(le:ListEvent):void

    {

        

        // store whole item selected as an XML object

        var itemContents:XML = this.dg.selectedItem as XML;

        

        // get node 'data'

        var detailContents:XMLList = itemContents.data;

        

        // get column index to map to 'data' node

        var colInd:int = le.columnIndex;

        

        //using columnIndex from ListEvent get child of the sub data

        var value:String = detailContents.children()[colInd];

        

        if (value != null)

        {

       Alert.show(value, "Data");

        }

        

    }

        

    ]]>

</mx:Script>

     <mx:XMLList id="employees">

        <employee>

       

            <name>Christina Coenraets</name>

            <phone>555-219-2270</phone>

            <email>ccoenraets@fictitious.com</email>

            <active>true</active>

            <data>

                <middleName>

                    Purple

                </middleName>

                <callHours>

                    6am - 7pm

                </callHours>

                <emailValid>

                    yes

                </emailValid>

            </data>

        </employee>

        <employee>

        

            <name>Joanne Wall</name>

            <phone>555-219-2012</phone>

            <email>jwall@fictitious.com</email>

            <active>true</active>

             <data>

                <middleName>

                    Brown

                </middleName>

                <callHours>

                    11am - 9pm

                </callHours>

                <emailValid>

                    no

                </emailValid>

            </data>

        </employee>

        <employee>

        

            <name>Maurice Smith</name>

            <phone>555-219-2012</phone>

            <email>maurice@fictitious.com</email>

            <active>false</active>

             <data>

                <middleName>

                    Yellow

                </middleName>

                <callHours>

                    6pm - 7pm

                </callHours>

                <emailValid>

                    maybe

                </emailValid>

             </data>

        </employee>

        <employee>

       

            <name>Mary Jones</name>

            <phone>555-219-2000</phone>

            <email>mjones@fictitious.com</email>

            <active>true</active>

             <data>

                <middleName>

                    Black

                </middleName>

                <callHours>

                    8pm - 12pm

                </callHours>

                <emailValid>

                    sometimes

                </emailValid>

            </data>

        </employee>

    </mx:XMLList>
 

    <mx:Panel title="Getting Sub Data from a Cell" height="100%" width="100%" 

        paddingTop="10" paddingLeft="10" paddingRight="10">
 

        <mx:Label width="100%" color="blue"

            text="Click a cell in the DataGrid control."/>
 

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">

            <mx:columns>

                <mx:DataGridColumn dataField="name" headerText="Name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone"/>

                <mx:DataGridColumn dataField="email" headerText="Email"/>

            </mx:columns>

        </mx:DataGrid>
 

    </mx:Panel>
 

</mx:Application>

Open in new window

0
 
LVL 4

Author Comment

by:newbieal
ID: 24091576
Thanks, Fuzzy Logic.

I implemented the code and nothing displayed.  Then I did some line by line debugging and have noticed that this line:

var detailContents:XMLList = itemContents.data;

produces a null value.  I noticed that the 'data' part is not part of the normal 'itemContents' library.  What should I put in place of this 'data' value?

0
 
LVL 4

Author Comment

by:newbieal
ID: 24091771
I changed that line to:

var detailContents.XMLList = itemContents.children();

It produces the data I want, however it is displayed in XML format to the user.  How can I change the format?
0
 
LVL 4

Author Comment

by:newbieal
ID: 24091804
sorry, ignore my last comment reg. the change...it didn't not do what I wanted it.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 5

Expert Comment

by:Fuzzy_Logic_
ID: 24092094
I'm not sure why this isn't working for you. Seems to work just fine here :-~

itemContents.data refers to the extra nodes that I have added to the example which map the parent nodes giving easy access to sub data for each cell

itemContents is just a variable to hold the selected row and thus the XML.

itemContents.children will just give you the XMLList of all the nodes.

itemContents.data refers to the node <data> and using the columnIndex we can access the children of the <data> node.

It depends really how you have structured your XML file as to how you access sub data.



0
 
LVL 5

Expert Comment

by:Fuzzy_Logic_
ID: 24114440
Have you made any progress with this?
0
 
LVL 4

Author Comment

by:newbieal
ID: 24124038
A little bit in that it displays the relevant row info when I click on a cell, but it displays it in xml format.  I want to present it in a way that is user friendly.  I'm struggling with that aspect.
0
 
LVL 5

Expert Comment

by:Fuzzy_Logic_
ID: 24124115
If you like show me the xml that you are getting in the display and then I'll show you how to make it more readable.
0
 
LVL 4

Author Comment

by:newbieal
ID: 24127822
It's just like any xml file data.  Here is an example (actual data is much longer, but I think you get the gist):

<Data>
<CellData> 1 </CellData>
</Data>
0
 
LVL 5

Accepted Solution

by:
Fuzzy_Logic_ earned 500 total points
ID: 24128682

If your xml is simple as you say then all the information is above.

I've edited the code and added some commented out lines. They are in private function itemClicked(le:ListEvent)





<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">

 

<mx:Script>

    <![CDATA[

        import mx.core.IFlexDisplayObject;

        import mx.managers.PopUpManager;

        import mx.controls.dataGridClasses.DataGridItemRenderer;

        import mx.events.ListEvent;

        import mx.controls.Alert;

        

    public function init():void

    {

        //add the event listener

        this.dg.addEventListener(ListEvent.ITEM_CLICK, itemClicked);

    }

    

    private function itemClicked(le:ListEvent):void

    {

        

        // store whole item selected as an XML object

        var itemContents:XML = this.dg.selectedItem as XML;

        

        // get node 'data'

        var detailContents:XMLList = itemContents.data;

        

        // get column index to map to 'data' node

        var colInd:int = le.columnIndex;

        //

        //

        //#################################################################################

        // uncomment one line to see how to get each part of the XML

        

        //var value:String = detailContents.children()[colInd];            // uses columnIndex from ListEvent get particluar sub data

        //var value:String = itemContents;                                 // gets the whole row in XML

        //var value:String = itemContents.subdata;                         // gets the sub data in XML

        //var value:String = itemContents.phone;                           // gets the phone data as String

        //var value:String = itemContents.subdata.middleName;              // gets the middle name of the sub data

        var value:String = "My name is " + itemContents.ename + ".\n My phone is " + itemContents.phone + ".\n Contact me during " + itemContents.subdata.callHours;

           

                                                                           // The line above puts a lot of the elements into a readable message.

        //#################################################################################

        //

        //

          

        if (value != null)

        {

       Alert.show(value, "Data");

        }

        

    }

        

    ]]>

</mx:Script>

     <mx:XMLList id="employees">

        <employee>

       

            <ename>Christina Coenraets</ename>

            <phone>555-219-2270</phone>

            <email>ccoenraets@fictitious.com</email>

            <active>true</active>

            <subdata>

                <middleName>

                    Purple

                </middleName>

                <callHours>

                    6am - 7pm

                </callHours>

                <emailValid>

                    yes

                </emailValid>

            </subdata>

        </employee>

        <employee>

        

            <ename>Joanne Wall</ename>

            <phone>555-219-2012</phone>

            <email>jwall@fictitious.com</email>

            <active>true</active>

             <subdata>

                <middleName>

                    Brown

                </middleName>

                <callHours>

                    11am - 9pm

                </callHours>

                <emailValid>

                    no

                </emailValid>

            </subdata>

        </employee>

        <employee>

        

            <ename>Maurice Smith</ename>

            <phone>555-219-2012</phone>

            <email>maurice@fictitious.com</email>

            <active>false</active>

             <subdata>

                <middleName>

                    Yellow

                </middleName>

                <callHours>

                    6pm - 7pm

                </callHours>

                <emailValid>

                    maybe

                </emailValid>

             </subdata>

        </employee>

        <employee>

       

            <ename>Mary Jones</ename>

            <phone>555-219-2000</phone>

            <email>mjones@fictitious.com</email>

            <active>true</active>

             <subdata>

                <middleName>

                    Black

                </middleName>

                <callHours>

                    8pm - 12pm

                </callHours>

                <emailValid>

                    sometimes

                </emailValid>

            </subdata>

        </employee>

    </mx:XMLList>

 

    <mx:Panel title="Getting Sub Data from a Cell" height="100%" width="100%" 

        paddingTop="10" paddingLeft="10" paddingRight="10">

 

        <mx:Label width="100%" color="blue"

            text="Click a cell in the DataGrid control."/>

 

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">

            <mx:columns>

                <mx:DataGridColumn dataField="ename" headerText="Name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone"/>

                <mx:DataGridColumn dataField="email" headerText="Email"/>

            </mx:columns>

        </mx:DataGrid>

 

    </mx:Panel>

 

</mx:Application>

Open in new window

0
 
LVL 4

Author Closing Comment

by:newbieal
ID: 31567571
Thanks for all your help.  You've definitely lead me into the right direction.  
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
FLV versus SWF 11 263
Youtube video error 30 697
bandwidth 5 64
embedding a media live encoder stream 3 90
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now