Use ItemRenderer and HeaderRenderer extension in the DataGrid to perform operations

If you only want to simply display data, or perform some formatting operations on the displayed data, the basic DataGrid and labelFunction support can be satisfied, but most of us need to target different data and objects, perform different rendering, such as checkbox, drop-down selection box, and date. For example, you can control and display complex views, such as Gantt charts. In this case, ItemRenderer and HeaderRenderer must be extended.
(1) IDataRenderer and IDropInListItemRenderer interfaces are implemented for ItemRenderer classes.
Many flex control classes implement IDataRenderer interfaces by default, such as buttons, iner, and TextArea. Many flex control classes also implement the IDropInListItemRenderer interface, but unfortunately the Container is not implemented by default. What I do requires plotting. Therefore, to use the Canvas extension directly, you must implement the IDropInListItemRenderer interface to obtain the ListData object.
Copy codeThe Code is as follows:
Private var _ listData: BaseListData;
// Make the listData property bindable.
[Bindable ("dataChange")]
Public function get listData (): BaseListData
{
Return _ listData;
}
Public function set listData (value: BaseListData): void
{
_ ListData = value;
}
Private var _ listData: BaseListData;
// Make the listData property bindable.
[Bindable ("dataChange")]
Public function get listData (): BaseListData
{
Return _ listData;
}
Public function set listData (value: BaseListData): void
{
_ ListData = value;
}

Unfortunately, I didn't know it at the beginning, so it took a long time to find out how to obtain the current Column index.
In this way, I can get the DataGridColumn object in the setData method, as follows (I am using the AdvancedDataGrid object ):
Copy codeThe Code is as follows:
Var dg: AdvancedDataGrid = this. owner as AdvancedDataGrid;
// ListData is obtained by implementing the IDropInListItemRenderer interface.
Var gdgc: GanttAdvancedDataGridColumn =
Dg. columns [listData. columnIndex] as GanttAdvancedDataGridColumn;
Var dg: AdvancedDataGrid = this. owner as AdvancedDataGrid;
// ListData is obtained by implementing the IDropInListItemRenderer interface.
Var gdgc: GanttAdvancedDataGridColumn =
Dg. columns [listData. columnIndex] as GanttAdvancedDataGridColumn;

(2) Extend the DataGridColumn object to add attributes and pass parameters.
Some attributes need to be dynamically passed in from outside, but some attributes do not belong to list data. The Grid Header needs to use the data for some rendering operations. In this case, you need to extend the implementation of the DataGridColumn object and obtain the DataGridColumn object in the HeaderRenderer object to obtain the parameters.
The following is an extended AdvanceDataGridColumn. In this extension, the startDate and lastDate attributes are added.
Copy codeThe Code is as follows:
<Gantt: GanttAdvancedDataGridColumn id = "ganttColumn" headerText = "Gantt" itemRenderer = "{ganttItemEditor}" headerRenderer = "{ganttHeaderEditor}" minWidth = "400"/>
<Gantt: GanttAdvancedDataGridColumn id = "ganttColumn" headerText = "Gantt" itemRenderer = "{ganttItemEditor}" headerRenderer = "{ganttHeaderEditor}" minWidth = "400"/>

In this way, you can set this Column externally during application initialization:
Copy codeThe Code is as follows:
GanttColumn. startDate = new Date (startTime );
GanttColumn. lastDate = new Date (lastTime );
GanttColumn. startDate = new Date (startTime );
GanttColumn. lastDate = new Date (lastTime );

In HeaderRenderer, you can obtain the corresponding objects and parameters in the setData method.
Copy codeThe Code is as follows:
Override public function set data (value: Object): void {
Super. data = value;
Var advancedDataGridColumn: GanttAdvancedDataGridColumn
= Value as GanttAdvancedDataGridColumn;
If (advancedDataGridColumn! = Null ){
If (advancedDataGridColumn. startDate! = Null ){
StartDate = advancedDataGridColumn. startDate;
LastDate = advancedDataGridColumn. lastDate;
Render ();
}
}
}
Override public function set data (value: Object): void {
Super. data = value;
Var advancedDataGridColumn: GanttAdvancedDataGridColumn
= Value as GanttAdvancedDataGridColumn;
If (advancedDataGridColumn! = Null ){
If (advancedDataGridColumn. startDate! = Null ){
StartDate = advancedDataGridColumn. startDate;
LastDate = advancedDataGridColumn. lastDate;
Render ();
}
}
}

(3) Use labelFunction to format the display data
For example, I want to format the date data as follows:
Copy codeThe Code is as follows:
Private function date_labelFunc (item: Object, column: AdvancedDataGridColumn): String {
Var dateFormatter: DateFormatter = new DateFormatter ();
DateFormatter. formatString = "YYYY-MM-DD HH: NN ";
Var td: Date = new Date (new Number (item [column. dataField]);
Return dateFormatter. format (td );
}
Private function date_labelFunc (item: Object, column: AdvancedDataGridColumn): String {
Var dateFormatter: DateFormatter = new DateFormatter ();
DateFormatter. formatString = "YYYY-MM-DD HH: NN ";
Var td: Date = new Date (new Number (item [column. dataField]);
Return dateFormatter. format (td );
}

In the datagridcolumn of mx, You can reference this label function.
Copy codeThe Code is as follows:
<Mx: AdvancedDataGridColumn headerText = "startTime" dataField = "startTime" labelFunction = "date_labelFunc" width = "120"/>
<Mx: AdvancedDataGridColumn headerText = "startTime" dataField = "startTime" labelFunction = "date_labelFunc" width = "120"/>