merging cells in datagrid

hi guys

I have in my datagrid


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


Is there any way i can merge the two cells in col1 into one cell which have same values?


my display should be


col1    col2     col3
1      jay      manager
       ram       CEO
2      Kris      Developer

col1 is merged for same value and '1' is shown only once


any idea how i can do that?

thanks
royjaydAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dgofmanCommented:
Use Adobe AdvancedDataGrid and GroupCollection
0
royjaydAuthor Commented:
Can you please provide a sample code
0
royjaydAuthor Commented:
Basically I am looking for a ItemRenderer which will do the grouping based on 'col1'
and i can say
colunm.setItemRenderer(Itemrenderer)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

royjaydAuthor Commented:
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;
	}
}

Open 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 );  
      }
}
0
dgofmanCommented:
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;
        }
    }
}
0
puzzle-itCommented:
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
0
royjaydAuthor Commented:
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.
0
dgofmanCommented:
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)
 
0
royjaydAuthor Commented:
Using filter function will I be able to merge the cells into one cell?
An example would help.

Thx
0
royjaydAuthor Commented:
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
0
royjaydAuthor Commented:
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;
0
dgofmanCommented:
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>

Open in new window

0
royjaydAuthor Commented:
thanks
I was able to remove the duplicates with your code, but i am still not able to merge the cells
0
dgofmanCommented:
How u can merge they are rows
0
royjaydAuthor Commented:
Do i have to create CSS to merge the cells into one cell ?

thanks
0
dgofmanCommented:
You can merging cells in ADG by using colSpan
0
royjaydAuthor Commented:
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
0
royjaydAuthor Commented:
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?
}
0
dgofmanCommented:
You still didn't tell me how would you like to merge columns

Draw an image
0
royjaydAuthor Commented:
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)
0
royjaydAuthor Commented:
merging cells
0
royjaydAuthor Commented:
sorry , wrong image..this is the correct image

mergecellsPic.bmp
0
dgofmanCommented:
What the difference from my code?  11/06/11 10:48 PM, ID: 37092503
0
royjaydAuthor Commented:
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
0
dgofmanCommented:
You can remove alternating  colors using CSS
0
royjaydAuthor Commented:
can you just provide the code how i can do that

thanks
0
dgofmanCommented:
DataGrid {
   alternatingItemColors: #ffffff, #ffffff;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.

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.