Please have a look at the code below
Header Renderer class for the datagrid header. My problem is when I
dynamically add the column and assign the headerRenderer to it. The
HeaderRenderer would not dispatch the event . I hope you could help
me in this regard.
package itemRenderers
{
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;
import mx.controls.Image;
import mx.core.IFactory;
[Event(name="EditColumnsEvent", type="flash.events.Event")]
[Event(name="ColumnOutEvent", type="flash.events.Event")]
public class HeaderRenderer extends Image implements IFactory
{
public static const EDIT_COLUMNS_EVENT:String =
"EditColumnsEvent";
public static const COLUMN_OUT_EVENT:String =
"ColumnOutEvent";
public function HeaderRenderer()
{
this.source = "assets/images/ShowColumns.png";
this.addEventListener(MouseEvent.CLICK,
mouseClickHandler,true,0,true);
addEventListener(MouseEvent.MOUSE_OUT,
mouseOutHandler,true,0,true);
}
private function mouseOutHandler(e:Event):void{
dispatchEvent(new
Event(HeaderRenderer.COLUMN_OUT_EVENT));
}
private function mouseClickHandler(e:Event):void{
var event:Event=new Event("EditColumnsEvent");
this.dispatchEvent(event);
}
public function newInstance():*{
return new HeaderRenderer();
}
}
}
CUSTOM DATAGRID WHICH USES ABOVE HEADER RENDERER
package components
{
import flash.events.Event;
import flash.events.MouseEvent;
import itemRenderers.HeaderRenderer;
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
public class CustomDataGrid extends DataGrid
{
public function CustomDataGrid(){
}
private var customHeaderRenderer:HeaderRenderer = new
HeaderRenderer();
//In this method I adding a additional column at the
end which will have this header-renderer
//header renderer gets added but the events associated with it are not
getting caught
override protected function childrenCreated():void{
var btn:Button=new Button();
var dgCol:DataGridColumn=new DataGridColumn();
var cols:Array = this.columns;
//TRIED LOT MANY THINGS BUT NO SUCCESS
this.customHeaderRenderer.addEventListener("EditColumnsEvent",showOptions);
dgCol.headerRenderer = customHeaderRenderer;
//IF U SEE I TRIED MOUSE CLICK EVENT TOO BUT NOTHING
WORKING
//
Application.application.addChild(customHeaderRenderer);
//
HeaderRenderer(dgCol.headerRenderer).addEventListener(MouseEvent.CLICK,showOptions);
dgCol.resizable=false;
dgCol.sortable=false;
dgCol.draggable=false;
dgCol.width=15;
cols.push(dgCol);
this.columns = cols;
this.invalidateProperties();
this.doubleClickEnabled = true;
this.header.addEventListener(MouseEvent.DOUBLE_CLICK, showOptions);
}
override protected function commitProperties():void{
//ALSO TRIED DOING SOMEHING LIKE THIS :)
HeaderRenderer(this.columns[2]
["headerRenderer"]).addEventListener("EditColumnsEvent",showOptions);
}
private function showOptions(e:Event):void{
Alert.show("Header Clicked");
}
}
}
//MAIN APPLICATION
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="vertical" xmlns:components="components.*"
viewSourceURL="srcview/index.html"
xmlns:itemRenderers="itemRenderers.*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function handleClick():void{
Alert.show("Fianally a Hope");
}
]]>
</mx:Script>
<components:CustomDataGrid width="800" height="800"
headerHeight="30">
<components:columns>
<mx:DataGridColumn dataField="">
<mx:headerRenderer>
<mx:Component>
//This thing works fine, headerRenderer’s EditColumnsEvent works fine
here, but for the column which I add in CustomDataGrid at runtime
would not dispatch this event
<itemRenderers:HeaderRenderer
EditColumnsEvent="outerDocument.handleClick()"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField=""/>
</components:columns>
</components:CustomDataGrid>
</mx:Application>
Thanks,
-Ashish
--
You received this message because you are subscribed to the Google Groups "Flex
India Community" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/flex_india?hl=en.
