Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6515
  • Last Modified:

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

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
newbieal
Asked:
newbieal
  • 7
  • 7
4 Solutions
 
Fuzzy_Logic_Commented:
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
 
newbiealAuthor Commented:
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
 
Fuzzy_Logic_Commented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Fuzzy_Logic_Commented:
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
 
newbiealAuthor Commented:
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
 
newbiealAuthor Commented:
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
 
newbiealAuthor Commented:
sorry, ignore my last comment reg. the change...it didn't not do what I wanted it.
0
 
Fuzzy_Logic_Commented:
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
 
Fuzzy_Logic_Commented:
Have you made any progress with this?
0
 
newbiealAuthor Commented:
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
 
Fuzzy_Logic_Commented:
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
 
newbiealAuthor Commented:
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
 
Fuzzy_Logic_Commented:

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
 
newbiealAuthor Commented:
Thanks for all your help.  You've definitely lead me into the right direction.  
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 7
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now