How to merge cells in DataGrid/AdvancedDataGrid in Adobe Flex

Question

I need to merge the cells as shown in the picture:

Answer 1

Flex (in my understanding) does not directly provide this. You have a few options.

Either way, you may need to arrange your data in a hierarchical model. (Parent with 3 children appears to describe your question)

The first option I see would involve directly declaring your data as hierarchical to the advanceddatagrid. If you search for hierarchical advanceddatagrid you should be able to find tutorials online.

Alternatively, you may desire to always have the data show, and not only when you expand the parent. In this case, you will still need the hierarchical model, but you will have to create a custom itemrenderer able to represent all of the children data for one parent object. (an itemrenderer with three labels in a VBox/VGroup would work for the example you've given)

If these don't help, or you would like more detail on one solution or the other, feel free to ask in a comment.

EDIT::

As an example of the itemrenderer, here's the source of a similar itemrenderer I've used. (mine only populates two labels, but you should be able to extend it if you understand what it's doing)

<VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    implements="mx.controls.listClasses.IDropInListItemRenderer"
    width="100%" height="100%" 
    verticalGap="0" paddingTop="5" paddingBottom="5" 
    horizontalScrollPolicy="off"
    horizontalAlign="center">

    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;

            private var _listData:BaseListData;

            [Bindable("dataChange")]

            // Define the getter method.
            public function get listData():BaseListData
            {
                return _listData;
            }
            // Define the setter method,
            public function set listData(value:BaseListData):void
            {
                _listData = value;
            }

        override public function set data(value:Object):void
        {
            removeAllChildren();

            if (value != null)
            {
                var myListData:DataGridListData = DataGridListData(listData);

                var lLabel1:Label = new Label();
                var lLabel2:Label = new Label();


                lLabel1.text = value[myListData.dataField][0];
                lLabel1.percentWidth = 0;
                addChild(lLabel1);

                lLabel2.text = value[myListData.dataField][1];
                lLabel2.percentWidth = 0;
                addChild(lLabel2);
            }

        } 
        ]]>
    </mx:Script>
</VBox>

I removed a lot of proprietary code, so if it doesn't make any sense let me know.

This is intended to be reusable, hence the value[myListData.dataField], but if you want you can easily make it a lot more specific by defining the fields yourself. This particular code expects the data in the following format, for example:

value[field][0] = "text1";
value[field][1] = "text2";

Object has:

var field:Array = [];

field[0] = "text1";
field[1] = "text2";