Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to add ComboBox to dynamically created DataGridColumn

    I can create my datagrid in mxml code with no issues. There are six columns, but I'm showing the code only for the column in question (the one with the ComboBox):
    Code:
    <mx:DataGrid x="82" y="189" width="100%" height="100%" editable="true" id="samplesDataGrid" dataProvider="{samplesData}">
    	<mx:columns>
    		<mx:DataGridColumn headerText="Tag" dataField="sem_tag" width="200" rendererIsEditor="true">
    			<mx:itemRenderer>
    				<fx:Component>
    					<mx:ComboBox width="190" prompt="{data.sem_tag}" dataProvider="{outerDocument.tagsAsStringsList}"/>
    				</fx:Component>
    			</mx:itemRenderer>
    		</mx:DataGridColumn>
    	</mx:columns>
    </mx:DataGrid>
    The dataProvider for the datagrid, samplesData, is an ArrayCollection populated by a method in the java backend that loads data from a file of samples. Each sample has a tag value.
    The dataProvider for the ComboBox, tagsAsStringsList, is an ArrayCollection populated by a method in the java backend that loads data from a file of tags.
    The ComboBox's prompt value is set to the tag value from the samplesData.

    Now I need to create the DataGridColumns dynamically.
    I have the following code (without adding the ComboBox to the column) which works:
    Code:
    public var columns:Array = ["index", "sem_tag", "count", "fake", "raw_transcription", "path"];
    
    private function addDataGridColumn(dataField:String):void
    {
    	var dgc:DataGridColumn = new DataGridColumn(dataField);
    	var cols:Array = samplesDataGrid.columns;
    	cols.push(dgc);
    	if ( dataField == "sem_tag" )
    	{
    		dgc.headerText = "Tag"; dgc.width = 200;
    	}
    	samplesDataGrid.columns = cols;
    }
    I've tried two ways to add the ComboBox with no luck.

    ATTEMPT #1
    I created a tagComboBox.as file:
    Code:
    package components
    {
    	import mx.controls.ComboBox;
    
    	public class tagComboBox extends ComboBox
    	{
    		public function tagComboBox()
    		{
    			super();
    			width=190;
    			prompt=data.sem_tag;dataProvider=outerDocument.tag  sAsStringsList;
    		}
    	}
    }
    The setting of the dataProvider gives me an error:
    Access to undefined property outerDocument

    I removed the dataProvider setting and added the following settings (in bold) in the addDataGridColumn method:
    Code:
    if ( dataField == "sem_tag" )
    {
         dgc.headerText = "Tag"; dgc.width = 200; dgc.rendererIsEditor = true; dgc.itemRenderer = components.tagComboBox;
    }
    When I run my application, I get the error:
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    caused by my prompt=data.sem_tag setting in the tagComboBox.as file.

    ATTEMPT #2
    I created the comboBox in the addDataGridColum method:
    Code:
    if ( dataField == "sem_tag" )
    {
    	var tagComboBox:mx.controls.ComboBox = new mx.controls.ComboBox();
    	tagComboBox.dataProvider = tagsAsStringsList;
    	dgc.headerText = "Tag"; dgc.width = 200; dgc.rendererIsEditor = true; dgc.itemRenderer = tagComboBox;
    }
    The setting of the itemRenderer gives me the following error:
    Implicit coercion of a value of type mx.controls:ComboBox to an unrelated type mx.core:IFactory

    I can’t even set
    tagComboBox.prompt = samplesData.sem_tag
    I get this error:
    Access of possibly undefined property sem_tag through a reference with static type mx.collections:ArrayCollection.

    Thanks in advance for your help!

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    32
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I solved my issue last Friday as follows:

    Code:
    var cf_tagComboBox:ClassFactory = new ClassFactory(mx.controls.ComboBox);
    
    if ( dataField == "sem_tag" )
    {
       dgc.headerText = "Tag"; dgc.width = 200; dgc.rendererIsEditor = true; dgc.itemRenderer = cf_tagComboBox;
    }
    
    // When the dataProvider for the combo box gets populated.
    protected function loadTagsAsStringsArray( event:ResultEvent ):void
    {
       tagsAsStringsList = loadTagsAsStringsResult.lastResult as ArrayCollection;
       cf_tagComboBox.properties = { width:190, dataProvider:tagsAsStringsList };
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •