CODEWITHSUNDEEP
actionscript-3apache-flexflex4flash-builder
Muhammad Umar
Muhammad Umar

Reputation: 11782

Dynamically add the datacolumn of DataGrid

Guys i got a dataColumn already defined as 

<mx:DataGridColumn headerText="Role" id="roleAdmin"  headerStyleName="myHeaderStyles">
        <mx:itemRenderer>
                <fx:Component>
                        <mx:VBox>
                                <mx:Text width="100%" text="{(data.role == 0)? 'Super Admin':((data.role == 1)? 'Admin': ((data.role == 2)? 'Regular User': 'Unknown'))}"/>
                        </mx:VBox>
                </fx:Component>
        </mx:itemRenderer>
</mx:DataGridColumn>

All I want to do is, to create this data dynamically depending upon the conditions I placed.Anyone can help me with the code what I should do and how can I add all these things.

Best Regards

Upvotes: 0

Views: 2733

Answers (2)

pho
pho

Reputation: 25489

You don't need a custom itemrenderer at all. This is a classic example of the use of a labelFunction.

First, write a label function as follows:

private function roleLabelFunction(data:Object, column:DataGridColumn):String {
    switch(data.role) {
        case 0: return 'Super Admin';
        case 1: return 'Admin';
        case 2: return 'Regular User';
        default: return 'Unknown';
    }
    //Some flex compilers show a compiler error if there is no return in the main function body, so this is the same as the default case
    return 'Unknown';
}

Then use this as the labelFunction of your datagridcolumn

<mx:DataGridColumn headerText="Role" id="roleAdmin"  headerStyleName="myHeaderStyles" labelFunction="roleLabelFunction">

Upvotes: 1

Santhosh Nayak
Santhosh Nayak

Reputation: 2288

Try this. You will get logic how to handle dynamic columns with item renderer.

var cols:Array=new Array();
cols = dgDatagrid.columns;
var column:DataGridColumn = new DataGridColumn();
column.headerText = "Role";
column.width=170;
column.dataField="role";
column.setStyle('headerStyleName',myHeaderStyles);
column.itemRenderer = new ClassFactory(MyRenderer);  
cols.push(column);
dgDatagrid.columns=cols;

MyRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         >

    <s:layout>
        <s:HorizontalLayout paddingLeft="10" paddingRight="10" />
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
    import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.events.FlexEvent;

            import spark.events.TextOperationEvent;

            private var dg:DataGrid;
            private var dglistData:DataGridListData;


            override public function set data( value:Object ) : void 
            {
                super.data = value;
                if(value){
                    dglistData = listData as DataGridListData;
                    if(value[dglistData.dataField]){
txtText.text=((value[dglistData.dataField]) == 0)? 'Super Admin':(((value[dglistData.dataField]) == 1)? 'Admin': (((value[dglistData.dataField]) == 2)? 'Regular User': 'Unknown'))

                        }
                                            }
            }
]]>
</fx:Script>

<mx:VBox>
<mx:Text width="100%" id="txtText"/>
 </mx:VBox>
</s:MXDataGridItemRenderer>

Upvotes: 5

Related Questions