how to access the datagrid in one mxml in another component?

Question

I have a datagrid in my mxml file, say, samp.mxml.

<mx:DataGrid id="taskDataGrid" dataProvider="{initDG}" variableRowHeight="true" 
    editable="true" width="100%"  paddingBottom="1" paddingTop="1" height="55" > 

<mx:columns>

      <mx:DataGridColumn dataField="Select" 
                editable="true" 
                rendererIsEditor="true" 
                itemRenderer="mx.controls.CheckBox" 
                editorDataField="selected" />

      <mx:DataGridColumn dataField="TaskName"
                width="220"
                editable="true" 
                rendererIsEditor="true" 
                itemRenderer="components.taskComponent"/> //i call the component.

      <mx:DataGridColumn dataField="TaskId"
                itemRenderer="mx.controls.TextInput" />     

 </mx:columns>
 </mx:DataGrid>

In one of the columns of the datagrid, I have to display a text input box and a button. So I have written that functionality as a separate component,i.e, taskComponent.mxml

 <mx:TextInput id="TaskName"
    editable="true" 
    text="{data.TaskName}" 
    mouseDown="addTaskRow(event);"    
   /> 

 <mx:Button id="searchTask" label="..." width="30" height="25" click="showPopUp();"/>

Now If i click the text input box in the component, I want another data row to be added. Earlier I had it as, if I click the datagrid, a row gets added. So I wrote the function in the samp.mxml itself. This is the function to add a data grid row.

private function addTaskRow(event:MouseEvent):void
        {
            taskDataGrid.dataProvider.addItem(
                {

                }
            );
            taskDataGrid.height += 30; 

        }

If i try to write the function in the taskComponent file, it shows the error, "Access of undefined property taskDataGrid". How do I use the datagrid in the taskComponent?

Answer 1

Add trace(this.owner); to the mouseDown of the text input and see what it traces. If it traces something like [object DataGrid], you can use DataGrid(this.owner) to access the taskDataGrid.

Answer 2

You don't want to do it that way. Presumably, the box and button add a new task. What you want to do is add a new row to whatever the initDG variable is. It should be an ArrayCollection. Then, when it's added, the grid will refresh to show the new data.

You don't want your UI to be the data. You want it to reflect the data. Concentrate on modifying a data model and simply let that grid reflect it. You may need to delve into Flex a little more. Focus on learning more about DataGrid, dataProvider, and how binding works with ArrayCollections.

Answer 3

Check out Peter Ent's article on Item Renderers. It's very informative, and lets you in on some best practices. I've referred to this many times, and I've found many of the things he says to be very useful...

http://www.adobe.com/devnet/flex/articles/itemrenderers%5Fpt1.html

This article in particular show you how to use ListData to access the parent component - the CORRECT way to do this:

http://www.adobe.com/devnet/flex/articles/itemrenderers%5Fpt3%5F02.html

ListData is key for accessing the parent. The other option is to dispatch a custom Event from the renderer.