Dynamically creating a column grouped AdvancedDataGrid

Usually people like to write the AdvancedDataGrid component in mxml. But there are some scenarios where there is a need to create the grid dynamically.

Here is a simple sample in which an AdvancedDataGrid is created dynamically with column groups.

Source is posted here.


16 thoughts on “Dynamically creating a column grouped AdvancedDataGrid

  1. Sameer,
    I have a question not directly related to this post, other than it is based on the AdvancedDataGrid. I overrode dragDropHandler(event:DragEvent)
    and in this method, I would like to get the column where the drop occurred. I can get the row using calculateDropIndex(event), but I cannot figure out how to get what column this is dropped into. Any idea how to do this? Thanks.

    • Hi Jason

      Did you figure out how to determine the column index? If so can you let me know how as i m trying to figure that out..

  2. You have to calculate the column index yourself. You can do this by using event.x and finding where x lies in visibleColumns. visibleColumns will give you all the visible columns in the grid.

  3. Hey Sameer,
    I have grouped data using a field(some numeric data) and at group level iam showing different field(String value) using groupLabelFunction.
    group.label has been set to datafield of first column.
    I need to sort my groups based on their label rather then their grouping field.

  4. suppose my groups comes out to be


    after applying label function in place of OOO-SAM
    OO1-ALI.Now when I sort in ascending order it gives SAM after that
    ALI.But actually it should be ALI n then SAM.I think it is comparing numeric value

  5. groupLabelFunction does not modify the data. So, while sorting the actual data will be numeric in your case.
    Use GroupingField.groupingFunction

  6. Hi Sameer,

    I have also implemented dynamic grouping of columns in AdvancedDataGrid but in a slightly different way.I have extended the AdvancedDataGridRenderer to provide a drop-down menu with options like Dynamic grouping etc.You can dynamically group on a column by choosing the menu option for that column.But i am facing one issue in this regard.I am able to dynamically group only once.The reason for it is as follows :

    My initial dataProvider is an ArrayCollection.But when i dynamically group based on the chosen column then the dataProvider becomes a Hierarchical Data.Hence when i click on another column then it gives type mismatch error. Is there a way that i can reset the grid’s dataProvider to the initial ArrayCollection ? Could you please tell me how should i proceed with the above problem.

    private function menuOptionHandler(event:MenuEvent):void
    var groupingCollection:GroupingCollection= new GroupingCollection();
    var grouping:Grouping = new Grouping();
    var groupingField:GroupingField = new GroupingField (gridColumn.dataField);
    grouping.fields = new Array()
    ///////Error here //////////

    groupingCollection.source = ICollectionView(grid.dataProvider);
    groupingCollection.grouping = grouping;
    //grid.dataProvider initially ArrayCollection – changes to Hierarchical //here
    grid.dataProvider = groupingCollection;


  7. Hi sameer,
    I am using groupLabelFunction in my custom Datagrid component. I want to format the display of groupLabel according to its data type. if it is Long datetime value then I want to use dateformatter to change it to MM/DD/YYYY format. But in the first argument (i.e. item:Object), the GroupLabel property has text type of data. So I am usable to detect its data type.
    I am using dummy column to show grouping information. So the second argument of GroupLabelfunction( i.e. col:AdvancedDataGridColumn) has no datafield and header text.
    Please help me how can I accomplish my work


  8. col.dataField and col.headerText will give you dataField and headerText respectively. They are properties of AdvancedDataGridColumn.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s