Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

merging cells in datagrid

Posted on 2011-10-28
27
Medium Priority
?
733 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:royjayd
  • 16
  • 10
27 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 37045519
Use Adobe AdvancedDataGrid and GroupCollection
0
 

Author Comment

by:royjayd
ID: 37046596
Can you please provide a sample code
0
 

Author Comment

by:royjayd
ID: 37047001
Basically I am looking for a ItemRenderer which will do the grouping based on 'col1'
and i can say
colunm.setItemRenderer(Itemrenderer)
0
Choose an Exciting Career in Cybersecurity

Help prevent cyber-threats and provide solutions to safeguard our global digital economy. Earn your MS in Cybersecurity. WGU’s MSCSIA degree program was designed in collaboration with national intelligence organizations and IT industry leaders.

 

Author Comment

by:royjayd
ID: 37047427
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
 
LVL 29

Expert Comment

by:dgofman
ID: 37054810
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
 
LVL 2

Expert Comment

by:puzzle-it
ID: 37087408
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
 

Author Comment

by:royjayd
ID: 37087885
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
 
LVL 29

Expert Comment

by:dgofman
ID: 37089331
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
 

Author Comment

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

Thx
0
 

Author Comment

by:royjayd
ID: 37091815
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
 

Author Comment

by:royjayd
ID: 37091936
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
 
LVL 29

Expert Comment

by:dgofman
ID: 37092503
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
 

Author Comment

by:royjayd
ID: 37094035
thanks
I was able to remove the duplicates with your code, but i am still not able to merge the cells
0
 
LVL 29

Expert Comment

by:dgofman
ID: 37094893
How u can merge they are rows
0
 

Author Comment

by:royjayd
ID: 37094969
Do i have to create CSS to merge the cells into one cell ?

thanks
0
 
LVL 29

Expert Comment

by:dgofman
ID: 37094997
You can merging cells in ADG by using colSpan
0
 

Author Comment

by:royjayd
ID: 37095130
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
 

Author Comment

by:royjayd
ID: 37095206
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
 
LVL 29

Expert Comment

by:dgofman
ID: 37097634
You still didn't tell me how would you like to merge columns

Draw an image
0
 

Author Comment

by:royjayd
ID: 37100759
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
 

Author Comment

by:royjayd
ID: 37100775
merging cells
0
 

Author Comment

by:royjayd
ID: 37100787
sorry , wrong image..this is the correct image

mergecellsPic.bmp
0
 
LVL 29

Expert Comment

by:dgofman
ID: 37102868
What the difference from my code?  11/06/11 10:48 PM, ID: 37092503
0
 

Author Comment

by:royjayd
ID: 37103408
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
 
LVL 29

Expert Comment

by:dgofman
ID: 37103588
You can remove alternating  colors using CSS
0
 

Author Comment

by:royjayd
ID: 37103923
can you just provide the code how i can do that

thanks
0
 
LVL 29

Accepted Solution

by:
dgofman earned 2000 total points
ID: 37103947
DataGrid {
   alternatingItemColors: #ffffff, #ffffff;
}
0

Featured Post

Become an IT Security Management Expert

In today’s fast-paced, digitally transformed world of business, the need to protect network data and ensure cloud privacy has never been greater. With a B.S. in Network Operations and Security, you can get the credentials it takes to become an IT security management expert.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
Dropbox has a relatively new feature called Smart Sync.  This feature allows Dropbox Professional (not plus) and Dropbox Business (if enabled) users to store information in Dropbox WITHOUT storing any files on their computer.
Integration Management Part 2
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question