Solved

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

Posted on 2009-04-07
14
6,454 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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
 
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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
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.

631 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