Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2009-04-07
14
Medium Priority
?
6,472 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 2000 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 2000 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Assisted Solution

by:Fuzzy_Logic_
Fuzzy_Logic_ earned 2000 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 2000 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

Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

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…
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

721 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