Accessing values from Spark DataGrid headerRenderer textInput

Question

Please see below image.

I am using a spark DataGrid for showing name and age using DatapPovider which is fetching data from database, and showing it on in DataGrid, I have also added two filters in header of Age column by using headerRenderer, I want to re fetch the values from database by using these filters and re-render this DataGrid.

spark datagrid

my main file has a code

    <fx:Script>
    <![CDATA[
        [Bindable] var userListDataProvider:ArrayCollection = new ArrayCollection();
    ]]>
</fx:Script>

<s:DataGrid  dataProvider="{userListDataProvider}">
    <s:columns> 
        <s:ArrayList>
            <s:GridColumn dataField="Name" /> 
            <s:GridColumn dataField="Age" itemEditor="renderer.AgeFilterRenderer"/> 
        </s:ArrayList>
    </s:columns> 
</s:DataGrid>

And my headerRender file has the following code

<s:HGroup>
    <s:TextInput id="fromAge" text="" />
    <s:Label text="To"/>
    <s:TextInput id="toAge" text="" />
</s:HGroup>

I want to re render the DataGrid when user change the values of heder filter but don't know how to access values of these two filter in main mxml file.

What is the best way to do this?

JeffryHouser JeffryHouser · Accepted Answer · 2013-09-15T11:39:25

I recommend dispatching an event from the headerRenderer that includes the values. i'm going to write untested code in the browser; but hopefully this gives you the gist.

First, create a new event class:

public package something.something{
public class AgeFilterEvent extends Event{

 public var fromAge :String;
 public var toAge :String;
 public static var AGE_FILTER_REQUEST = "ageFilterRequest";

 public function AgeFilterEvent(type:String):void{
 // be sure that bubbles is set to true when you call the super argument
   super(type);
 }
}
}

Change your headerrenderer to dispatch the event:

<s:HGroup>
  <fx:script>
    <[[
    protected function onChange():void{
       var event : AgeFilterEvent = new AgeFilterEvent(AgeFilterEvent.AGE_FILTER_REQUEST);
       event.fromAGe = fromAge.text; 
       event.toAge = toAge.text;
       dispatchEVent(event);
    }
  ]]>
  </fx:Script>
    <s:TextInput id="fromAge" text="" change="onChange()" />
    <s:Label text="To"/>
    <s:TextInput id="toAge" text="" change="onChange()"/>
</s:HGroup>

Listen to the event on the DatGrid. You won't be able to do this in MXML because the appropriate metadata does not exist on the DataGrid; so create an ACtionScript listener:

    <fx:Script>
    <![CDATA[
        [Bindable] var userListDataProvider:ArrayCollection = new ArrayCollection();

        // in your main tag of this component. add an initialize or creationComplete listener to fire off this method handler
        public var onInitialize():void{
               grid.addEventListener(AgeFilterEvent.AGE_FILTER_REQUEST, onFilter);
        }

        public function onFilter():void{
            // code here to filter the dataProvider
       }
    ]]>
</fx:Script>

<!-- added an id to the DataGrid so it could be accessed in ACtionScript -->
<s:DataGrid id="grid"  dataProvider="{userListDataProvider}">
    <s:columns> 
        <s:ArrayList>
            <s:GridColumn dataField="Name" /> 
            <s:GridColumn dataField="Age" itemEditor="renderer.AgeFilterRenderer"/> 
        </s:ArrayList>
    </s:columns> 
</s:DataGrid>

Accessing values from Spark DataGrid headerRenderer textInput

1 Answers