3 Replies Latest reply on Jan 26, 2007 7:22 AM by ur_dtrain

    Adding a Tree into a datagrid column

    Bacherak
      I have a requirement where I have to create a datagrid with one of the columns having a tree control. The problem I am trying to resolve is how to dynamically change the height of the datagrid column which has the tree when the tree is collapsed and dynamically increase the datagrid column height when the tree is expanded.
      Is is feasible ? Am I chasing a wild dream ?
      Any help will be greatly appreciated...
      Thanks
        • 1. Re: Adding a Tree into a datagrid column
          ur_dtrain Level 1
          You might try using an event handler (like itemClick) then contextually determine where the effected column is located. The DataGrid component has a rowHeight property, and most every display object has a measuredHeight property. So I'd recommend checking one against the other, then updating accordingly.
          • 2. Re: Adding a Tree into a datagrid column
            Bacherak Level 1
            Darin,
            Thank you for responding. I was able to get a tree display in a datagrid. I am going to attach all the code.
            The problem I am facing is, I need two clicks to expand a tree in the datagrid column so that both the tree to expand and the datagrid column to adjust its height. Let me know why this is so. May be, being a newbie, I am completely off the track here. Thanks in advance.
            THE MXML
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.ram.flash.custom.*">
            <mx:XML id="xmlData" source="myDataWithTree.xml"/>
            <mx:HBox>
            <mx:DataGrid id="dgSource" dataProvider="{xmlData.person}" editable="false" variableRowHeight="true">
            <mx:columns>
            <mx:Array>
            <mx:DataGridColumn editable="false" sortable="false" resizable="true" width="400" textAlign="left" headerText="Id" dataField="address">
            <mx:itemRenderer>
            <mx:Component>
            <ns1:PruDataGridTreeColumn disclosureOpenIcon="@Embed(source='icn_minus.jpg')" disclosureClosedIcon="@Embed(source='icn_plus.jpg')" width="260" height="20" />
            </mx:Component>
            </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Name" dataField="name" editable="false"/>
            <mx:DataGridColumn headerText="Age" dataField="age" editable="false"/>
            </mx:Array>
            </mx:columns>
            </mx:DataGrid>
            </mx:HBox>
            </mx:Application>


            THE DATA
            <?xml version="1.0" encoding="UTF-8" ?>
            <data>
            <person>
            <name>Mister</name>
            <age>36</age>
            <address>
            <Capitals label="U.S. State Capitals">
            <capital label="AL" value="Montgomery"/>
            <capital label="AK" value="Juneau"/>
            <capital label="AR" value="Little Rock"/>
            <capital label="AZ" value="Phoenix"/>
            <capital label="AL" value="Montgomery"/>
            <capital label="AK" value="Juneau"/>
            <capital label="AR" value="Little Rock"/>
            <capital label="AZ" value="Phoenix"/>
            <capital label="AL" value="Montgomery"/>
            <capital label="AK" value="Juneau"/>
            <capital label="AR" value="Little Rock"/>
            <capital label="AZ" value="Phoenix"/>
            </Capitals>
            </address>
            </person><person>
            <name>Missus</name>
            <age>28</age>
            <address>
            <Capitals label="Indian State Capitals">
            <capital label="AL" value="Montgomery"/>
            <capital label="AK" value="Juneau"/>
            <capital label="AR" value="Little Rock"/>
            <capital label="AZ" value="Phoenix"/>
            </Capitals>
            </address>
            </person>
            </data>

            THE CUSTOM ACTIONSCRIPT CLASS
            package com.ram.flash.custom
            {
            import flash.geom.Rectangle;
            import mx.core.IDataRenderer;
            import mx.controls.listClasses.IListItemRenderer;
            import flash.display.DisplayObjectContainer;
            import flash.events.Event;
            import mx.managers.ISystemManager;
            import mx.controls.Tree;
            import flash.display.Sprite;
            import flash.display.DisplayObject;
            import mx.events.FlexEvent;
            import mx.collections.XMLListCollection;
            import flash.events.MouseEvent;
            import mx.controls.treeClasses.TreeItemRenderer;
            import mx.controls.treeClasses.TreeListData;
            import mx.core.ClassFactory;
            import mx.events.ScrollEvent;
            import mx.controls.DataGrid;
            import mx.events.CollectionEvent;
            import mx.events.CollectionEventKind;

            public class PruDataGridTreeColumn extends Tree implements IListItemRenderer, IDataRenderer
            {
            private var _data : Object = null;
            private var _dataGrid:DataGrid = null;
            [Bindable("dataChange")]
            public override function get data():Object
            {
            return _data;
            }
            public function set myDataGrid(value:DataGrid):void
            {
            _dataGrid = value;
            }
            public function PruDataGridTreeColumn()
            {
            super();
            }
            public override function set data(value:Object):void
            {
            this._data = value;
            this.invalidateProperties();
            var xmlDATA:XMLList = new XMLList(_data);
            this.labelField='@label';
            this.dataProvider = xmlDATA.address.Capitals;
            dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
            }
            override public function expandItem(item:Object, open:Boolean, animate:Boolean=false, dispatchEvent:Boolean=false, cause:Event=null):void
            {
            animate = true;
            super.expandItem(item,open,animate,dispatchEvent,cause);
            var lc:XML = new XML(item);
            var ht:Number = 20;
            var wt:Number = this.width;
            if(open)
            {
            ht = (lc.children().length() * 20 + 40);
            this.height = (lc.children().length() * 20 + 40);
            }
            else
            {
            ht = 20;
            this.height = 20;
            }
            }

            }
            }
            • 3. Re: Adding a Tree into a datagrid column
              ur_dtrain Level 1
              Try using the 'resize' event of the tree to force the data grid to behave. Perhaps dispatch a dataChange (mx.events.FlexEvent.DATA_CHANGE) on the grid when the tree is modified.