merging cells in datagrid

Use Adobe AdvancedDataGrid and GroupCollection

Can you please provide a sample code

Basically I am looking for a ItemRenderer which will do the grouping based on 'col1'
and i can say
colunm.setItemRenderer(Itemrenderer)

I have comeup with something..can you please advice

My renderer which will do the grouping is TradeGroupingRenderer

public class TradeGroupingRenderer extends HBox implements IDropInListItemRenderer{
protected var _listData:DataGridListData;
public function get listData():BaseListData
{
return _listData;
}
public function set listData(value:BaseListData):void
{
_listData = DataGridListData(value);
invalidateProperties();
}
		
public function TradeGroupingRenderer()
{
super();
var matrixGrid:AdvancedDataGrid = AdvancedDataGrid(DataGridListData(_listData).owner);
var myGroup:Grouping = new Grouping();
myGroup.fields = [new GroupingField("col1")];
var myGroupColl:GroupingCollection = new GroupingCollection();
myGroupColl.source = new ArrayCollection(matrixGrid.dataProvider); //error on this line
myGroupColl.grouping = myGroup;
myGroupColl.refresh();
matrixGrid.dataProvider = myGroupColl;
	}
}

Select allOpen in new window

and i am calling like this

public class TradeGrid extends VBox{

private function buildColumnModel(complexheaders:Object,fields:Object):void{
dataGrid.rendererProviders = new ClassFactory(TradeGroupingRenderer );  
      }
}

Try without explicite setting of ArrayCollection

package{
    import mx.collections.ArrayCollection;
    import mx.collections.Grouping;
    import mx.collections.GroupingCollection;
    import mx.collections.GroupingField;
    import mx.containers.HBox;
    import mx.controls.AdvancedDataGrid;
    import mx.controls.dataGridClasses.DataGridListData;
    import mx.controls.listClasses.BaseListData;
    import mx.controls.listClasses.IDropInListItemRenderer;
   
    public class TradeGroupingRenderer extends HBox implements IDropInListItemRenderer{
     
        protected var _listData:DataGridListData;
   
        public function get listData():BaseListData
        {
            return _listData;
        }
        public function set listData(value:BaseListData):void
        {
            _listData = DataGridListData(value);
            invalidateProperties();
        }
       
        public function TradeGroupingRenderer()
        {
            super();
            var matrixGrid:AdvancedDataGrid = AdvancedDataGrid(DataGridListData(_listData).owner);
            var myGroup:Grouping = new Grouping();
            myGroup.fields = [new GroupingField("col1")];
            var myGroupColl:GroupingCollection = new GroupingCollection();
            myGroupColl.source = matrixGrid.dataProvider; //error on this line
            myGroupColl.grouping = myGroup;
            myGroupColl.refresh();
            matrixGrid.dataProvider = myGroupColl;
        }
    }
}

In my opinion you can solve using datagrid and inspecting data you are going to show like described in this article:

http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html

You should check if data in column1 is the same like the previous item, you can recover index of an element inside itemrenderer using ItemIndex property

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/supportClasses/ItemRenderer.html#itemIndex

if you need index of previous item it will be itemIndex-1.
With an if statement inside itemrenderer for col1 you can choose if write the number or an empty string, and/or apply a certain style or a different one .

Let me know if it's been an useful suggestion.

Regards

Actually I don't need the grouping functionality
So I won't be using Groupingcollection. I just want to use
Arraycollection.
Coming back to my original question , I just want to
Display '1' just once under col1 and merge the two cells with value 1.
I  am not sure how to merge the two cells into one cell.
Any code would help.

If you want to use Tree structure you should use HistoricalData or GroupCollection
Otherwise you can create a filter function for removing element from a column and display as DataGrid (not tree)
 

Using filter function will I be able to merge the cells into one cell?
An example would help.

Thx

For example in the below grid

col1    col2     col3
1      jay      manager
1      ram      CEO
2      Kris      Developer

how can i use filter function to remove the duplicate values under col1 and how can i merge the
cells which have duplicate values..

thanks

My code is

private var dataCollection:ArrayCollection = new ArrayCollection();
dataCollection.addItem(Object1);  //contains 1      jay      manager
dataCollection.addItem(Object2);  //contains 1      ram      CEO
dataCollection.addItem(Object3); //contains  2      Kris      Developer


this.dataGrid.dataProvider = dataCollection;
this.dataGrid.visible = true;

Yes, you can.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="alert()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]
            private var dataCollection:ArrayCollection = new ArrayCollection();

            private function alert():void {
                dataCollection.addItem({col1:1, col2:'jay', col3:'manager'});    //contains 1      jay      manager
                dataCollection.addItem({col1:1, col2:'ram', col3:'CEO'});        //contains 1      ram      CEO
                dataCollection.addItem({col1:2, col2:'Kris', col3:'Developer'}); //contains  2      Kris      Developer
                
                var map:Object = {};
                dataCollection.filterFunction = function(item:Object):Boolean {
                    if (!map[item.col1]){
                        map[item.col1] = true;
                    }else{
                        item.col1 = "";
                    }
                    return true;
                };
                dataCollection.refresh();
            }
        ]]>
    </mx:Script>
    <mx:DataGrid dataProvider="{dataCollection}">
        <mx:columns>
            <mx:DataGridColumn dataField="col1"/>
            <mx:DataGridColumn dataField="col2"/>
            <mx:DataGridColumn dataField="col3"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

Select allOpen in new window

thanks
I was able to remove the duplicates with your code, but i am still not able to merge the cells

How u can merge they are rows

Do i have to create CSS to merge the cells into one cell ?

thanks

You can merging cells in ADG by using colSpan

Do i have to create iremRenderer and set the iremrenderer to the column? and use the colSpan in
Itemrenderer ?
Some sample code would be helpful

something like...
private function createColumn(columnIndex:int,fieldObject:Object):AdvancedDataGridColumn{
if(columnIndex == 1){  //dataField="col1"
column.itemRenderer  = new ClassFactory(MergeCellsRenderer);  
}

public class MergeCellsRenderer{
how to use colSpan here?
}

You still didn't tell me how would you like to merge columns

Draw an image

I want to merge the cells under column
Under Id column i want to merge cell1 (which contains 100), cell2 (contains blank)  and cell3 which (contains blank)

sorry , wrong image..this is the correct image

mergecellsPic.bmp

What the difference from my code?  

well its not a big difference . You see the alternating colors under Id column? I just want a single color (white) for the first three cells under Id column in my image.

thx

You can remove alternating  colors using CSS

can you just provide the code how i can do that

thanks