5 Replies Latest reply on Jun 2, 2010 1:05 AM by Dajji

    Expand cell in AdvancedDataGrid

    hezjing Level 1

      Hi

       

      I want the user to click on a cell of an AdvancedDataGrid, and the cell will expand and display more details within it.

      If the user click on the same cell again, it will collapse and showing the one line data ...

       

      How do I implement this in Flex?

        • 1. Re: Expand cell in AdvancedDataGrid
          Dajji Level 3

          You would need to do couple of things to achieve this. First of all, variableRowHeight property of the Datagrid needs to be set. Then you need to set the itemRenderer for the column in which cells will have this functionality of expanding. This can be a MXML component with two states for example. When a user clicks on your component, you can change the state.

          • 2. Re: Expand cell in AdvancedDataGrid
            hezjing Level 1

            Hi Dajji

             

            Thanks, and I have extended the MXAdvancedDataGridItemRenderer with two states.

             

            The question now is, when the renderer is changing to the expanded state, I want to also increase the height of the row of the cell.

            How can I do that in MXAdvancedDataGridItemRenderer?

            • 3. Re: Expand cell in AdvancedDataGrid
              Dajji Level 3

              You need to set the height of your components in second state. The row height will change as per the height of the components.

              • 4. Re: Expand cell in AdvancedDataGrid
                hezjing Level 1

                Hmmm ... here is my renderer,

                 

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

                <s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                  xmlns:s="library://ns.adobe.com/flex/spark"

                                                  xmlns:mx="library://ns.adobe.com/flex/mx"

                                                  click="toggleState(event);">

                    <fx:Script>

                        <![CDATA[

                            override public function set data(value:Object):void

                            {

                                // display the data on the cell

                                label.text = value["name"];

                            }

                           

                            private function toggleState(event:Event):void

                            {

                                if (currentState == 'default') {

                                    // increase the height for detailed state;                                 

                                    panel.height=400;

                                } else {

                                    // restore the height for default state;

                                    panel.height=60;

                                }

                                currentState = currentState == 'default' ? 'detailed' : 'default';

                            }

                        ]]>

                    </fx:Script>

                    <s:states>

                        <s:State name="default"/>

                        <s:State name="detailed"/>

                    </s:states>

                    <!-- panel's height will be adjusted based on the state -->

                    <s:Panel id="panel" height="60">

                        <mx:VBox>

                            <s:Label id="myLabel" />

                            <s:Button id="b2" label="New Button"

                                              visible="false"

                                              visible.detailed="true"

                                              includeInLayout="false"

                                              includeInLayout.detailed="true"/>       

                           

                        </mx:VBox>   

                    </s:Panel>

                </s:MXAdvancedDataGridItemRenderer>

                In the default state, only myLabel is displayed. When the user clicked on the cell and changed to detailed state, the panel height is increased to 400 and a button is added below myLabel. However, the height of the row doesn't adjusted accordingly, the panel is span over the next few rows.
                By the way, my AdvancedDataGrid has few columns, but only one column that is using this renderer.
                Do you have any idea of what could be the problem?

                • 5. Re: Expand cell in AdvancedDataGrid
                  Dajji Level 3

                  I haven't tried this with Flex 4 but I have tried this with Flex 3 and DataGrid component. It works fine.