Datagrid column header split

Greetings,
I am using flashbuilder 4.5 for php premium. I have a datagrid and need
to have multiple column headers some spanning others. I found an
example that has multiple header/iterm renderers, but it is for the mx:datagrid,
not the spark. The example calls it SplitDataGridHeader. Is there a way to
do this with a spark (s:datagrid) without all the extra?
The following is an image of the mx version running:
thanks.

@Johnny,
Try to make use of the headerRenderer property and use <mx:Text /> control as a renderer so that your headerText gets wrapped..
Thanks,
Bhasker
Message was edited by: BhaskerChari

Similar Messages

Datagrid column header word wrap issue

Hi All,
I'm passing dynamic text to a datagrid column header. The word wrap is true but it's not working.
Any ideas how to fix this issue?
DataGridColumn headerText="{myVar.text} Total" headerWordWrap="true"
Thanks
Johnny

@Johnny,
Try to make use of the headerRenderer property and use <mx:Text /> control as a renderer so that your headerText gets wrapped..
Thanks,
Bhasker
Message was edited by: BhaskerChari

Tooltip show forever until the mouse exists the datagrid column header

Hi,
Any idea on showing tooltip forever until the mouse exists the datagrid column header.
Thanks
Atul

Hi JamieVJohnson,
Please specify the
GroupStyle.Panel to the
DataGridRowsPresenter in DataGrid, since the default GroupStyle.Panel (StackPanel) cannot fit for the DataGrid Width "*" and the columns collapse.
<DataGrid Height="100">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="Column 1" Width="2*"/>
<DataGridTextColumn Header="Column 2" Width="1*"/>
</DataGrid.Columns>
</DataGrid>
Sincerely,
Bob Bao
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Are you looking for a typical code sample? Please download
all in one code framework !

Checkbox in a datagrid column header not working properly

Hi,
I have rendered a checkbox in the header of a datagrid column
using headerRenderer property. That column also has all entries as
checkboxes. What I want to do is that on checking the header
checkbox, all checkboxes should get checked. Though I am able to do
this BUT the header checkbox remains uncheched in the whole
process! Whereas, if I remove this eventHandler from it, then the
header checkbox shows the correct state i.e., show checked on
checking & unchecked on unchecking!
Any input?
Thanks in advance,
Cheree

hi many thanks for looking at my problem
what i am trying to do is show a column if the proc_id is greater than 2
it just looks a bit silly when a user configures the file (but not submitted it for loading)
the file cnt is null or zero - i had hoped not to show this - the proc_id is found from the report query !

Datagrid column header event issue

Hi,
I'm trying to find the event that gets triggered when a
column header is dragged and one when its droped to a new position
in the grid but no luck so far Any ideas ?
Thanks.

The DataGrid's headerShift event will be dispatched when the
mouse is released with the column in a new position.
As for detecting the actual drag of the column, you need more
primative events. You can listen for mouseDown events and note the
row number (header row is row 0). You can then listen for mouseMove
events while the mouse is dragging the column.

Hide Specific Datagrid Column Header

Hi,
I'm asking for if ther is a method to hide a specific
datagrid header colum;
The showHeaders property of datagrid give me the possibility
to set the visibility of all datagrid header column.
There is a way to hide, for example, the header of first
datagrid column?
PLEASE HELP ME!!
Thank you

"markuspedro" <[email protected]> wrote in
message
news:glvr3g$gls$[email protected]..
> thank's, but this solution not run.. i would hide the
header of specif
> column..
>
> It' s impossible that flex give us the possibility to
hide only the header
> of all columns...
If you hide the header, then the space it occupies will still
be there, so
the rows will line up. Try using a headerRenderer wit one
state that shows
the header text and one state that shows nothing.

Split-column-header

Dear BIP’ers
I have a fine working table using for-each-group@column:current-group(); in one .rtf table cell.
But now I want to change it into splitting one column as I believe it gives better control over layout.
UserManual suggest using “split-column-header”
I found a simple but working example here http://blogs.oracle.com/xmlpublisher/2007/05/01/
Can you please help me with the syntax:
Putting <?split-column-header: syntaxsyntax DLE_PNO?>
Into this:
<?for-each-group@column:current-group();./DLE_PNO?><?sort:current-group()/DLE_PNO;'ascending';data-type='number'?><?if@inlines:DLE_PNO>’0’?>P<?DLE_PNO?><?end if?><?end for-each-group?>
Regards Thomas

Hi Tim
OK. Great here comes the full problem:
Copy-paste from the current result in my pdf output converted to fit this forum:
{color:#0000ff}Work package number: WP 1.11 Start date: Month 17
Work package title: Experimental challenge of Atlantic salmon
Activity type: TRA WP Leader: P7
Participant number: P1 P2 P3 Total
Participant short name: UMA NSV UTR
Person months per participant: 7 3 134 144
Person months not funded: (5) (0) (11) (16)
{color}-----
The 3 participants showed above is dynamic changing from 1 to 20 in the repeating work packages.
The partners must always be showed in one line. The participant short name is written vertical to save space. An rtf template table holds the field codes previously posted in this forum.
It works fine up to approximately 8 partners, but when more partners the table exceeds the right page border.
So I would like to set one fixed cell space for the partners and then split cell for each partner like this:
<?for-each-group:DATATEMPLATE_OB_DLE_ROW;./OB_ID?><?sort:current-group()/OB_NO_S;'ascending';data-type='number'?>
<?for-each-group:current-group();./WP_ID?><?sort:current-group()/WP_NO_S;'ascending';data-type='number'?>
{color:#0000ff}Work package number: WP 1.11 Start date: Month 17
Work package title: Experimental challenge of Atlantic salmon
Activity type: TRA WP Leader: P7{color}
<?for-each-group@column:current-group();./DLE_PNO?><?sort:current-group()/DLE_PNO;'ascending';data-type='number'?><?if@inlines:DLE_PNO>’0’ ?>P<?DLE_PNO?><?end if?><?end for-each-group?>
split-column-header ?
{color:#0000ff}Participant number:..... P1..... P2..... P3 .....Total
Participant short name: .....UMA .....NSV .....UTR
Person months per participant: .....7 .....3 .....134..... 144
Person months not funded:..... (5) .....(0)..... (11)..... (16){color}
Here are some more details:
The table contains a number of groupings before the actial partner table
XML sample:
<DATATEMPLATE_OB_DLE_ROW>
<OB_ID>3</OB_ID>
<OB_NO_S>1</OB_NO_S>
<OB_TITLE>Establish a functional relationship in immune response profiles</OB_TITLE>
<WP_ID>15</WP_ID>
<WP_OB_NO_S>1</WP_OB_NO_S>
<WP_NO_S>14</WP_NO_S>
<WP_TI> Experimental challenge of Atlantic salmon</WP_TI>
<CALC_WP_PNO>P7</CALC_WP_PNO>
<CALC_WP_PDU>17</CALC_WP_PDU>
<WP_ACT_TY>TRA</WP_ACT_TY>
<DL_ID>39</DL_ID>
<DL_WPO_ID>19</DL_WPO_ID>
<DLE_PNO>1</DLE_PNO>
<DLE_SHORT>UMA</DLE_SHORT>
<DLE_EPM>7</DLE_EPM>
<DLE_EPMO>5</DLE_EPMO>
</DATATEMPLATE_OB_DLE_ROW>
Looking forward the see your input ;-)
Best regards Thomas

Split-column-header print

Hello All,
I am having an issue.
Problem :
I have a 6 column in a table and I need to print some number into this 6 columns.
I tried using <?split-column-header:G_SCHEDULE_NUMBER?><?ASSEMBLY?> in the first column but the same split and print the 6 columns in the first column itself and rest 5 is left blank.
XML:
<LIST_G_SCHEDULE_NUMBER>
<G_SCHEDULE_NUMBER>
<START_POINT>PITCH START POINT</START_POINT>
<START_DATE>29-DEC-08</START_DATE>
<END_DATE>29-DEC-08</END_DATE>
<START_TIME>06:00:00</START_TIME>
<END_TIME>06:10:00</END_TIME>
<ASSEMBLY>905-1011-006</ASSEMBLY>
<CHANGEOVER>905-1011-006</CHANGEOVER>
<QUANTITY>20</QUANTITY>
<SCHEDULE_NUMBER>965</SCHEDULE_NUMBER>
</G_SCHEDULE_NUMBER>
<G_SCHEDULE_NUMBER>
<START_POINT>PITCH START POINT</START_POINT>
<START_DATE>29-DEC-08</START_DATE>
<END_DATE>29-DEC-08</END_DATE>
<START_TIME>06:10:00</START_TIME>
<END_TIME>06:20:00</END_TIME>
<ASSEMBLY>905-1011-006</ASSEMBLY>
<CHANGEOVER></CHANGEOVER>
<QUANTITY>20</QUANTITY>
<SCHEDULE_NUMBER>966</SCHEDULE_NUMBER>
</G_SCHEDULE_NUMBER>
<G_SCHEDULE_NUMBER>
<START_POINT>PITCH START POINT</START_POINT>
<START_DATE>29-DEC-08</START_DATE>
<END_DATE>29-DEC-08</END_DATE>
<START_TIME>06:10:00</START_TIME>
<END_TIME>06:20:00</END_TIME>
<ASSEMBLY>905-1011-006</ASSEMBLY>
<CHANGEOVER></CHANGEOVER>
<QUANTITY>20</QUANTITY>
<SCHEDULE_NUMBER>966</SCHEDULE_NUMBER>
</G_SCHEDULE_NUMBER>
<G_SCHEDULE_NUMBER>
<START_POINT>PITCH START POINT</START_POINT>
<START_DATE>29-DEC-08</START_DATE>
<END_DATE>29-DEC-08</END_DATE>
<START_TIME>06:10:00</START_TIME>
<END_TIME>06:20:00</END_TIME>
<ASSEMBLY>905-1011-006</ASSEMBLY>
<CHANGEOVER></CHANGEOVER>
<QUANTITY>20</QUANTITY>
<SCHEDULE_NUMBER>966</SCHEDULE_NUMBER>
</G_SCHEDULE_NUMBER>
<G_SCHEDULE_NUMBER>
<START_POINT>PITCH START POINT</START_POINT>
<START_DATE>29-DEC-08</START_DATE>
<END_DATE>29-DEC-08</END_DATE>
<START_TIME>06:10:00</START_TIME>
<END_TIME>06:20:00</END_TIME>
<ASSEMBLY>905-1011-006</ASSEMBLY>
<CHANGEOVER></CHANGEOVER>
<QUANTITY>20</QUANTITY>
<SCHEDULE_NUMBER>966</SCHEDULE_NUMBER>
</G_SCHEDULE_NUMBER>
<G_SCHEDULE_NUMBER>
<START_POINT>PITCH START POINT</START_POINT>
<START_DATE>29-DEC-08</START_DATE>
<END_DATE>29-DEC-08</END_DATE>
<START_TIME>06:10:00</START_TIME>
<END_TIME>06:20:00</END_TIME>
<ASSEMBLY>905-1011-006</ASSEMBLY>
<CHANGEOVER></CHANGEOVER>
<QUANTITY>20</QUANTITY>
<SCHEDULE_NUMBER>966</SCHEDULE_NUMBER>
</G_SCHEDULE_NUMBER>
</LIST_G_SCHEDULE_NUMBER>
Thanks
Sk

Sure.
Its like this.
I have columns in where i need to have 6 columns.but the same can have data in 2 or 3 columns.
Rest needs to be blank.
If i make 6 columns in the template and then attach the xml tage it splits only the first columns on the cell in 6 columns and rest 5 are kept blank which disturbs the whole layout.
If i don't make 6 columns in the template and have only 1 cell with the tag attached it does make the required amount of columns on each row but its not consistent ,so somewhere its 2 columns and somewhere 3 or 6.
Thanks
Sk

Split ALV Column heading into two

Hello All,
I have a ALV Column Header - ALV LIST - SAP 46C.
Material   | Info Type | Quantity | Price etc..
Due to space contraints and other reason client needs to split the Info type column into two.
Material   | Info | Quantity | Price etc..
           | Type   |
The data records should not have any additional blank lines.
How to achieve this?
Thanks,

You have to assign X to layout property no_colhead.
Then write your heading using write statements.
Here is the exact example you are looking for [Create Multiple Lines Header In ALV List Report|http://www.freesaptutorial.com/create-multiple-lines-header-in-alv-list-report/]

Changing a datagrid column image according to the datagrid column value

Flash Builder 4.5 / SDK 4.5.1.
Fairly new to Flash Builder & Flex
Application targets tablets so it's a "mobile" project.
Been beating my head up against the wall on trying to figure out how to do this. Watched videos on Lynda.com. Read Adobe "docs" till my eyes glaze over. Takes me about 2 lines of code in my corresponding .NET project doing the same thing.....
Tried numerous examples. Inline rendering, external rendering files per the examples.
I have a response field in the database and corresponding column in the s:datagrid. If the "reportInfoResponse" field is null (not answered), show an image with a question mark. If yes show an image with "Yes" on it. Same for a no answer.
I get errors of:
1120:Access of undefined property negativeAnswer.
1120:Access of undefined property affirmativeAnswer
1120:Access of undefined property reportInfoResponse
1120:Access of undefined property showResponseImage
If I put this in an external rendering file I also get an error where it can't access the datafield (reportInfoResponse). I've tried data.reportInfoResponse, {data.reportInfoResponse}, {reportInfoResponse} and just plain reportInfoResponse the external rendering file with no luck. I've tried single and double quotes around Y and N. According to all the examples (not to say there aren't more!), I should be able to reference data.reportInfoResponse in the external file and things should be fine. Of course, the examples are bare bones code and I don't have a clue if any importing of classes or other items need to take place. I never see any references of such. The examples also show the image embedding and changing the image by using imageID.source=... In my code it tells me it can't find it.
I have put (ERROR HERE...) on the lines where I'm getting the error messages. I've eliminated a lot of database scripting and such cause that's all working.
Any and all suggestions would be appreciated as I'm pulling out what little hair I have left.......and that's not much at my age........ And yes, I probably could do it by just show text in the column, but that's not what the customer wants... There are other columns I need to do this for so I figure if I can get 1 done and working, the rest are a snap. I CAN use inline or external rendering to show an image. It's the changing it that is the catch.........
Thanks in advance!
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="onCreationComplete()"
title="{whichCategoryName} > {whichSubCatName} > Questions">
<fx:Script>
<![CDATA[
import com.adobe.serializers.utility.TypeUtility;
import flash.data.SQLConnection;
import flash.data.SQLMode;
import flash.data.SQLResult;
import flash.events.StatusEvent;
import flash.filesystem.File;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.navigateToURL;
import flashx.textLayout.tlf_internal;
import mx.collections.ArrayCollection;
import mx.core.BitmapAsset;
import mx.events.FlexEvent;
import spark.events.GridEvent;
import spark.events.IndexChangeEvent;
...(lots of database coding left out here)
<s:DataGrid id="showQuestions" width="100%" height="100%"
creationComplete="Grid_creationCompleteHandler(event)" fontFamily="_sans"
gridClick="gridClickEvent(event);" horizontalScrollPolicy="off"
selectionColor="#8AD8EF" selectionMode="singleRow" sortableColumns="false"
variableRowHeight="true" verticalCenter="middle">
<s:columns>
<s:ArrayList>
<s:GridColumn visible="false" dataField="id_report" headerText="id_report" resizable="true" sortable="false"></s:GridColumn>
<s:GridColumn visible="false" dataField="id_question" headerText="id_question" resizable="true" sortable="false"></s:GridColumn>
<s:GridColumn id="col_reponse" visible="true" dataField="reportInfoResponse" headerText="Response" resizable="true" sortable="false">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
[Embed(source="assets/unknown.png")]
[Bindable]
public var unknownAnswer:Class;
[Embed(source="assets/yes.png")]
[Bindable]
public var affirmativeAnswer:Class;
[Embed(source="assets/no.png")]
[Bindable]
public var negativeAnswer:Class;
(ERROR HERE - 1120:Access of undefined property reportInfoResponse)
if(reportInfoResponse == "Y")
(ERROR HERE - 1120:Access of undefined property showResponseImage)
showResponseImage.source = affirmativeAnswer;
(ERROR HERE - 1120:Access of undefined property reportInfoResponse)
if (reportInfoResponse == "N")
(ERROR HERE - 1120:Access of undefined property showResponseImage)
showResponseImage.source = negativeAnswer;
]]>
</fx:Script>
<s:Image id="showResponseImage" source="{unknownAnswer}" verticalCenter="0" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn id="col_question" visible="true" dataField="question" headerText="Question" resizable="true" sortable="false"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:AsyncListView list="{showTheseQuestions}"/>
</s:DataGrid>
</s:View>

Ioan Thanks for the reply.
Probably my previous explanation of the problem was a little incomplete. Let me give a better description.
The situation is something like this.
I have a requirement in which the customer wants the column header to reflect the 'keep filter value' restriction that he does dynamically in the query report.
i.e:
-- usually the kf column header shows 'sales volume'
-- column header with text variable of the Calender year / month variable -- 'sales volume for 2000 oct'
-- but when the report is run, if the user wants to go and change the filter: calender year / month > rt clk > keep filer value > select Jan 2003.
The kf column header still shows 'Sales Volume 2000 Oct'
How to make the column header change to 'sales volume for Jan 2003' ?
Any suggestions greatly appreciated.
Thanks,

Exporting to Excel - How to control Column Heading?

I'm working in SSRS 2012. I have one tablix in the report body. The tablix has both Row and Column Groups.
When rendering in the web browser the report page breaks on a row group. The Repeat Column Headers property is set to "True" so it shows the column headings from page to page.
When rendering in Excel, I want one worksheet and not separate worksheets so the page break is disabled via the Page Break->Disabled property expression "=IIf(Globals!RenderFormat.Name="EXCELOPENXML", True, False)".
This is all good but the Column Headings only show up once at the very top in the excel worksheet.
Is it possible to make the Column Headings repeat with each tablix data region as it is rendered vertically down the worksheet?
OR is there a way from SSRS to set the Excel property "Rows to Repeat at top" to include Column Heading; by default the SSRS Report's header is repeated in Excel, but can the number of rows be changed to include the Column Heading?
OR is there some other work around?
Thanks for your help.
Mark

Thanks for the reply Wendy.
You addressed my second question ... "is there a way from SSRS to set the Excel property "Rows to Repeat at top" to include Column Heading; by default the SSRS Report's header is repeated in Excel, but can it be changed to include the Column Heading?
Based on your response, the only way to freeze the column header in excel is to freeze or split panes AFTER export to excel. well booo but I have to accept that I guess.
My first question is what I really want to do, which is to physically repeat the Column Heading in the excel rendering. I included two pictures demonstrate what I want ...
1) the standard SSRS report rendered in Excel ... Column Headings are shown once:
Standard Export to Excel
                       Year
Region
Category
2011
2012
2013
        Total
East
Sales
10
20
30
60
Expenses
8
20
10
38
Profit
2
0
20
22
West
Sales
8
16
24
48
Expenses
6
16
8
30
Profit
2
0
16
18
2) what I'd like to see rendered in Excel ... which is to repeat the headers as you scroll down the page
Desired Export to Excel
                      Year
Region
Category
2011
2012
2013
        Total
East
Sales
10
20
30
60
Expenses
8
20
10
38
Profit
2
0
20
22
                       Year
Region
Category
2011
2012
2013
        Total
West
Sales
8
16
24
48
Expenses
6
16
8
30
Profit
2
0
16
18
Thanks again for your help,
Mark

Center text in Datagrid columns

Hi all,
I need help vertically centering text in a datagrid column.
Does anyone know of a way to do this without custom item
Renderers?

Would really need to see the code to see the extent of the damage Photoshop html has caused. This is a typical problem when exporting html from Photoshop OR trying to assemble the slices into one gigantic table where the cells have been split and merged numerous times which causes distortion.
The idea, looking at your page, would be to insert a simple 3 column x 1 row table into Dreamweaver then insert the components that make up your page into their realtive columns. Using this simple construction method will ensure that all the page elements remain seperate and cannot interact with other element in different cells, which is what is NOT happening in your construction at the moment.

Dynamic Columns, using the element name as the column header name

BI Publisher Experts,
I'm a relative newbie in the RTF layout world and i'm trying to acheive a layout which dynamically nominates the column headers as the element name.
For example using the XML below:
<?xml version="1.0" encoding="UTF-8" ?>
- <ROWSET>
- <DATA>
- <THREECOLUMNDATA>
<FIRST_NAME>First Name</FIRST_NAME>
<LAST_NAME>Last Name</LAST_NAME>
<EMAIL>[email protected]</EMAIL>
</THREECOLUMNDATA>
</DATA>
</ROWSET>
Excuse formatting, looked ok in preview!
I'd like to acheive the following output:
| FIRST_NAME | LAST_NAME | EMAIL |
|-----------------------|---------------------- |--------------------------------------------------------|
| First Name | Last Name | [email protected] |
I've managed to get the row data columns working using:
<?for-each@cell:current()/*?><?.?><?parent::*/text()?> <?end for-each?>
And i've been working on the header for a while now, using
<?for-each@column:current()/THREECOLUMNDATA[1]/*?><?name(.)?><?end for-each?>
But no luck with the header. I only ever get a blank header.
I've also reviewed the following syntax:
<?split-column-header:THREECOLUMNDATA?> <?/FIRST_NAME?>
But of course, this pulls specific element data out as the header, not quite what I need.
Question is: Is there specific functionality to pull the element name out as the header, or do I somehow specifically need to include the header name as a data value in the XML?
Advice appreciated!

If you could get your XML to look like this instead of what you have, you will be able to use split-column-header and split-column-data
<?xml version="1.0" encoding="UTF-8" ?>
<ROWSET>
<DATA>
<THREECOLUMNDATA>
<COL_DTLS>
<COL_LABEL>FIRST_NAME</COL_LABEL>
<COL_VALUE>First Name</COL_VALUE>
</COL_DTLS>
<COL_DTLS>
<COL_LABEL>LAST_NAME</COL_LABEL>
<COL_VALUE>Last Name</COL_VALUE>
</COL_DTLS>
<COL_DTLS>
<COL_LABEL>EMAIL</COL_LABEL>
<COL_VALUE>[email protected]</COL_VALUE>
</COL_DTLS>
</THREECOLUMNDATA>
</DATA>
</ROWSET>
Now if you <?split-column-header:COL_DTLS?><?COL_LABEL?> and <?split-column-data:COL_DTLS?><?COL_VALUE?> you'll get the required output...

How not to sort datagrid column on double click

Hello,
I am currently building an application containing a datagrid for data representation. I've created a custom datagridheader in order to add a input text for filtering the columns (see code below).
My goal is to hide the textinput, and then show it on a double click on the header. So i would like to know how to avoid the sort of this column each time i double click.?
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx" resize="onColumnResize(event)" clipAndEnableScrolling="true" doubleClick="managefilterField(event)">
    <fx:Declarations>
        
        <fx:Component id="defaultSortIndicator">
            <s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">
                <fx:Script>
                    <![CDATA[
                        import spark.components.DataGrid;
                        import spark.components.Grid;
                         * @private
                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                            const dataGrid:DataGrid = grid.dataGrid;
                            if (!dataGrid)
                                return;
                            const color:uint = dataGrid.getStyle("symbolColor");
                            arrowFill1.color = color;
                            arrowFill2.color = color;
                    ]]>
                </fx:Script>
                <s:fill>
                    <s:RadialGradient rotation="90" focalPointRatio="1">
                        
                        <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
                        
                        <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
                    </s:RadialGradient>
                </s:fill>
            </s:Path>
        </fx:Component>
        
        <s:Label id="labelDisplay"
                 verticalCenter="1" left="0" right="0" top="0" bottom="0"
                 textAlign="start"
                 fontWeight="bold"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 showTruncationTip="true" />
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import net.awl.ismp.console.components.misc.FilterCriteria;
            import net.awl.ismp.console.events.ColumnFilteredEvent;
            import net.awl.ismp.console.events.ColumnResizedEvent;
            import mx.events.ResizeEvent;
            import spark.components.gridClasses.IGridVisualElement;
            import mx.core.IVisualElement;
            import spark.components.DataGrid;
            import spark.components.GridColumnHeaderGroup;
            import spark.components.gridClasses.GridColumn;
            import spark.primitives.supportClasses.GraphicElement;
            // chrome color constants and variables
            private static const DEFAULT_COLOR_VALUE:uint = 0xCC;
            private static const DEFAULT_COLOR:uint = 0xCCCCCC;
            private static const DEFAULT_SYMBOL_COLOR:uint = 0x000000;
            private static var colorTransform:ColorTransform = new ColorTransform();
             * @private
            private function dispatchChangeEvent(type:String):void
                if (hasEventListener(type))
                    dispatchEvent(new Event(type));
            protected function onColumnResize(event:ResizeEvent):void
                dispatchEvent(new ColumnResizedEvent(ColumnResizedEvent.COLUMNRESIZED_EVT,this.width,this.column.columnInde x));
            // maxDisplayedLines
            private var _maxDisplayedLines:int = 1;
            [Bindable("maxDisplayedLinesChanged")]
            [Inspectable(minValue="-1")]
             * The value of this property is used to initialize the
             * <code>maxDisplayedLines</code> property of this renderer's
             * <code>labelDisplay</code> element.
             * @copy spark.components.supportClasses.TextBase#maxDisplayedLines
             * @default 1
             * @langversion 3.0
             * @playerversion Flash 10
             * @playerversion AIR 1.5
             * @productversion Flex 4.5
            public function get maxDisplayedLines():int
                return _maxDisplayedLines;
            override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void
                trace("state changed from : "+oldState+" to "+newState);
                super.stateChanged(oldState, newState, recursive);
             * @private
            public function set maxDisplayedLines(value:int):void
                if (value == _maxDisplayedLines)
                    return;
                _maxDisplayedLines = value;
                if (labelDisplay)
                    labelDisplay.maxDisplayedLines = value;
                invalidateSize();
                invalidateDisplayList();
                dispatchChangeEvent("maxDisplayedLinesChanged");
            // sortIndicator
            private var _sortIndicator:IFactory;
            private var sortIndicatorInstance:IVisualElement;
            [Bindable("sortIndicatorChanged")]
             * A visual element that's displayed when the column is sorted.
             * <p>The sortIndicator visual element is added to the <code>sortIndicatorGroup</code>
             * by this renderer's <code>prepare()</code> method. Any size/location constraints
             * specified by the sortIndicator define its location relative to the sortIndicatorGroup.</p>
             * @default null
             * @langversion 3.0
             * @playerversion Flash 10
             * @playerversion AIR 1.5
             * @productversion Flex 4.5
            public function get sortIndicator():IFactory
                return (_sortIndicator) ? _sortIndicator : defaultSortIndicator;
             * @private
            public function set sortIndicator(value:IFactory):void
                trace("setSortIndicator");
                if (_sortIndicator == value)
                    return;
                _sortIndicator = value;
                if (sortIndicatorInstance)
                    sortIndicatorGroup.includeInLayout = false;
                    sortIndicatorGroup.removeElement(sortIndicatorInstance);
                    sortIndicatorInstance = null;
                invalidateDisplayList();
                dispatchChangeEvent("sortIndicatorChanged");
             * @private
             * Create and add the sortIndicator to the sortIndicatorGroup and the
             * labelDisplay into the labelDisplayGroup.
            override public function prepare(hasBeenRecycled:Boolean):void
                trace("prepare !!");
                super.prepare(hasBeenRecycled);
                if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup))
                    labelDisplayGroup.removeAllElements();
                    labelDisplayGroup.addElement(labelDisplay);
                trace(sortIndicator);
                trace("sortIndicatorInstance : "+sortIndicatorInstance);
                const column:GridColumn = this.column;
                if (sortIndicator && column && column.grid && column.grid.dataGrid && column.grid.dataGrid.columnHeaderGroup)
                    const dataGrid:DataGrid = column.grid.dataGrid;
                    const columnHeaderGroup:GridColumnHeaderGroup = dataGrid.columnHeaderGroup;
                    if (columnHeaderGroup.isSortIndicatorVisible(column.columnIndex))
                        if (!sortIndicatorInstance)
                            sortIndicatorInstance = sortIndicator.newInstance();
                            sortIndicatorGroup.addElement(sortIndicatorInstance);
                            chromeColorChanged = true;
                            invalidateDisplayList();
                        // Initialize sortIndicator
                        sortIndicatorInstance.visible = true;
                        const gridVisualElement:IGridVisualElement = sortIndicatorInstance as IGridVisualElement;
                        if (gridVisualElement)
                            gridVisualElement.prepareGridVisualElement(column.grid, -1, column.columnIndex);
                        sortIndicatorGroup.includeInLayout = true;
                        sortIndicatorGroup.scaleY = (column.sortDescending) ? 1 : -1;
                    else
                        if (sortIndicatorInstance)
                            sortIndicatorGroup.removeElement(sortIndicatorInstance);
                            sortIndicatorGroup.includeInLayout = false;
                            sortIndicatorInstance = null;
            private var chromeColorChanged:Boolean = false;
            private var colorized:Boolean = false;
             * @private
             * Apply chromeColor style.
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                //trace("update display list");
                // Apply chrome color
                if (chromeColorChanged)
                    var chromeColor:uint = getStyle("chromeColor");
                    if (chromeColor != DEFAULT_COLOR || colorized)
                        colorTransform.redOffset = ((chromeColor & (0xFF << 16)) >> 16) - DEFAULT_COLOR_VALUE;
                        colorTransform.greenOffset = ((chromeColor & (0xFF << 8)) >> 8) - DEFAULT_COLOR_VALUE;
                        colorTransform.blueOffset = (chromeColor & 0xFF) - DEFAULT_COLOR_VALUE;
                        colorTransform.alphaMultiplier = alpha;
                        transform.colorTransform = colorTransform;
                        var exclusions:Array = [labelDisplay, sortIndicatorInstance];
                        // Apply inverse colorizing to exclusions
                        if (exclusions && exclusions.length > 0)
                            colorTransform.redOffset = -colorTransform.redOffset;
                            colorTransform.greenOffset = -colorTransform.greenOffset;
                            colorTransform.blueOffset = -colorTransform.blueOffset;
                            for (var i:int = 0; i < exclusions.length; i++)
                                var exclusionObject:Object = exclusions[i];
                                if (exclusionObject &&
                                    (exclusionObject is DisplayObject ||
                                        exclusionObject is GraphicElement))
                                    colorTransform.alphaMultiplier = exclusionObject.alpha;
                                    exclusionObject.transform.colorTransform = colorTransform;
                        colorized = true;
                    chromeColorChanged = false;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
             * @private
            override public function styleChanged(styleProp:String):void
                var allStyles:Boolean = !styleProp || styleProp == "styleName";
                super.styleChanged(styleProp);
                if (allStyles || styleProp == "chromeColor")
                    chromeColorChanged = true;
                    invalidateDisplayList();
            protected function managefilterField(event:MouseEvent):void
                trace("double click sortIndicator : "+this.sortIndicatorInstance);
                this.filterInput.visible=!this.filterInput.visible;
                this.filterInput.includeInLayout=this.filterInput.visible;
                this.filterSpacer.visible=this.filterInput.visible;
                this.filterSpacer.includeInLayout=this.filterInput.visible;
                if(!this.filterInput.visible)
                    this.filterInput.text="";
                    dispatchEvent(new ColumnFilteredEvent(ColumnFilteredEvent.COLUMNFILTERED_EVT,new FilterCriteria(this.column.dataField,this.filterInput.text)));
                this.filterInput.setStyle("borderColor",0xFF6319);
                this.filterInput.setStyle("focusColor",0xFF6319);
                //this.filterInput.setStyle(
            protected function onTextInputSelection(event:MouseEvent):void
                event.stopImmediatePropagation();
                this.filterInput.setStyle("borderColor",0xFF6319);
                this.filterInput.setStyle("focusColor",0xFF6319);
            protected function onKeyUp(event:KeyboardEvent):void
                if(event.charCode==Keyboard.ENTER)
                    stage.focus=null;
            protected function onFocusOut(event:FocusEvent):void
                this.filterInput.setStyle("borderColor",0x00ff00);
                this.filterInput.setStyle("focusColor",0x70B2EE);
                dispatchEvent(new ColumnFilteredEvent(ColumnFilteredEvent.COLUMNFILTERED_EVT,new FilterCriteria(this.column.dataField,this.filterInput.text)));
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="down" />
    </s:states>
    
    
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000"
                                 color.down="0xFFFFFF"
                                 alpha="0.01"
                                 alpha.down="0" />
                <s:GradientEntry color="0x000000"
                                 color.down="0xFFFFFF"
                                 alpha="0.07"
                                 alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    
    <s:Rect id="fill" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 color.hovered="0xBBBDBD"
                                 color.down="0xAAAAAA"
                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8"
                                 color.hovered="0x9FA0A1"
                                 color.down="0x929496"
                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    
    <s:Rect id="lowlight" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    
    <s:Rect id="highlight" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.0"
                                 alpha="0.33"
                                 alpha.hovered="0.22"
                                 alpha.down="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48"
                                 alpha="0.33"
                                 alpha.hovered="0.22"
                                 alpha.down="0.12" />
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48001"
                                 alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    
    <s:Rect id="highlightStroke" left="0" right="0" top="0" bottom="0" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.hovered="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.hovered="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    
    <s:Rect id="hldownstroke1" left="0" right="0" top="0" bottom="0" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <s:Rect id="hldownstroke2" left="1" right="1" top="1" bottom="1" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    
    <s:VGroup verticalAlign="middle" left="7" top="5" right="7" bottom="5" gap="2" >
        <s:TextInput id="filterInput" width="100%" visible="false" includeInLayout="false" keyUp="onKeyUp(event)" focusOut="onFocusOut(event)" click="onTextInputSelection(event)"/>
        <s:Spacer id="filterSpacer" visible="false" includeInLayout="false" height="5" />
    <s:HGroup width="100%" height="100%" verticalAlign="middle">
        <s:Group id="labelDisplayGroup" width="100%" />
        <s:Group id="sortIndicatorGroup" includeInLayout="false" />
    </s:HGroup>
    </s:VGroup>
</s:GridItemRenderer>

Based on your idea, i've intercepted the click event and I use stopImmediatePropagation.
THen i added an image to sort the column. So if the image is clicked the sort is ok.

Datagrid column in module causing memory leak

Hi All
I'm having trouble with a DataGrid column preventing a module from being release properly. I can't imagine this is the intended behaviour.
Using this simple test case, a WindowedApplication and an mx:Module I wonder if anyone else can reproduce this problem. The issue goes away if you simply comment out the GridColumn Instance.
Can anyone offer any advice?
Many thanks
James
DataGridTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElement;
            import mx.events.ModuleEvent;
            import mx.modules.IModuleInfo;
            import mx.modules.ModuleManager;
            private var assetModule:IModuleInfo;
            protected function load_clickHandler(event:MouseEvent):void
                assetModule = ModuleManager.getModule('DataGridTestModule.swf');
                assetModule.addEventListener("ready", getModuleInstance);
                assetModule.load();
            public function getModuleInstance(event:ModuleEvent):void
                var sm:DisplayObject = assetModule.factory.create() as DisplayObject;
                sm.addEventListener("close", closeModule);
                contentHolder.addElement(sm as IVisualElement);
            private function closeModule(event:Event):void
                event.target.removeEventListener("close", closeModule);
                contentHolder.removeElement(event.target as IVisualElement);
                assetModule.unload();
                assetModule = null;
        ]]>
    </fx:Script>
    <s:VGroup width="100%" height="100%">
        <s:HGroup >
            <s:Button id="load" label="Load" click="load_clickHandler(event)"/>
        </s:HGroup>
        <s:BorderContainer id="contentHolder" width="100%" height="100%"/>
    </s:VGroup>
</s:WindowedApplication>
DataGridTestModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      layout="absolute" xmlns:components="components.*">
    <fx:Script>
        <![CDATA[
            protected function close_clickHandler(event:MouseEvent):void
                dispatchEvent(new Event('close', true, false))
        ]]>
    </fx:Script>
    <s:BorderContainer id="contacts"
                       width="100%" height="100%"
                       backgroundAlpha="0"
                       borderVisible="false">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:Button id="close" label="Close" click="close_clickHandler(event)"/>
        <s:DataGrid id="queries" >
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn/> 
                </s:ArrayList>
            </s:columns>
        </s:DataGrid>
    </s:BorderContainer>
</mx:Module>

OK, So I've done some more testing. Creating the GridColumn in AS during the creationComplete event is a slight improvement. It seems to allow the DataGrid and the Module be GC'd, but it's still leaking memory somewhere. I just can't get my head around the Profiler. Also, it's going to be a massive headache if we have to rewrite our application to create all the GridColumns in AS. Surely this shouldn't be necessary?
New test case below:
DataGridTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.core.IVisualElement;
            import mx.events.ModuleEvent;
            import mx.modules.IModuleInfo;
            import mx.modules.ModuleManager;
            import spark.components.gridClasses.GridColumn;
            private var assetModule:IModuleInfo;
            private var sm:DisplayObject;
            protected function load_clickHandler(event:MouseEvent):void
                assetModule = ModuleManager.getModule('DataGridTestModule.swf');
                assetModule.addEventListener("ready", getModuleInstance);
                assetModule.load();
            public function getModuleInstance(event:ModuleEvent):void
                sm = assetModule.factory.create() as DisplayObject;
                sm.addEventListener("close", closeModule);
                contentHolder.addElement(sm as IVisualElement);
            private function closeModule(event:Event):void
                event.target.removeEventListener("close", closeModule);
                contentHolder.removeElement(event.target as IVisualElement);
                assetModule.unload();
                assetModule = null;
        ]]>
    </fx:Script>
    <s:VGroup width="100%" height="100%">
        <s:HGroup >
            <s:Button id="load" label="Load" click="load_clickHandler(event)"/>
        </s:HGroup>
        <s:BorderContainer id="contentHolder" width="100%" height="100%"/>
    </s:VGroup>
</s:WindowedApplication>
DataGridTestModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      creationComplete="module1_creationCompleteHandler(event)"
                      layout="absolute" xmlns:components="components.*">
    <fx:Script>
        <![CDATA[
            import flash.utils.setTimeout;
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
            import spark.components.gridClasses.GridColumn;
             [Bindable]
            private var _col:ArrayList = new ArrayList();
            protected function close_clickHandler(event:MouseEvent):void
                dispatchEvent(new Event('close', true, false))
            protected function module1_creationCompleteHandler(event:FlexEvent):void
                var gc:GridColumn = new GridColumn();
                gc.headerText = 'Test Column';
                _col.addItem(gc);
        ]]>
    </fx:Script>
    <s:BorderContainer width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:Button id="close" label="Close" click="close_clickHandler(event)"/>
        <s:DataGrid id="queries" columns="{_col}"/>
    </s:BorderContainer>
</mx:Module>

Datagrid column header split

Similar Messages

Maybe you are looking for