Skinning selected DataGrid header in Flex 4

Hi,
What I'm trying to do seems trivial, but after hours of searching for historical clues I have still not achieved it. I simply want to reskin only the selected header. There seems to be multiple approaches:
1) define a custom headerRenderer - but this ends up with the sort indicator cobbled on top of your custom drawn area
2) rework the header background skin to clip/draw the selected column differently - but this requires clipping to the selected column, and figuring out the dimensions to clip to
Am I missing an obvious and easier solution?  Any examples out there?
Thanks!

Thanks again Alex.
I managed to achieve something satisfactory with the following custom HeaderRenderer. The negative padding on the right side allows the gradient to extend underneath the sort skin to fill the entire column. This seemed easier (if not cleaner) than also skinning the sort arrow skin in the same way.
I also had to extend DataGridHeader and override drawHeaderIndicator (for the rollover of the column header) and drawSelectionIndicator (for the transitionary state of clicking on the column header before the sort takes effect).
Still a work in progress, but hopefully this will save the next Googler some time in achieving any of these goals.  And of course I welcome any refinements or any admonishments that I'm doing something really stupid.
<?xml version="1.0" encoding="utf-8"?>
<s:Group> 
implements="mx.controls.listClasses.IListItemRenderer"xmlns:fx="
http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/halo"width="
100%" height="100%">
<fx:Script>
<![CDATA[
import com.company.player.model.Constants; 
import mx.collections.ArrayCollection; 
import mx.controls.DataGrid; 
import mx.controls.dataGridClasses.DataGridColumn; 
import mx.controls.listClasses.IListItemRenderer; 
import mx.controls.listClasses.ListBase; 
private var _data:Object; 
static private const LABEL_BUFFER:int = 4; 
static private const SORT_INDICATOR_WIDTH:int = 14; 
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
var owner:DataGrid = owner as DataGrid; 
var col:DataGridColumn = data as DataGridColumn; 
var bSorted:Boolean = false; 
var ac:ArrayCollection = owner.dataProvider as ArrayCollection; 
if (ac && ac.sort){
// there's a sort in place - is it on this column?
var sortFieldName:String = ac.sort.fields[0].name; 
bSorted = (sortFieldName == col.dataField);
gradientOverlay.alpha = bSorted ? 1 : 0;
gradientOverlay.visible = bSorted;
lbl.width = col.width - LABEL_BUFFER - (bSorted ? SORT_INDICATOR_WIDTH : 0);
lbl.text = col.headerText;
lbl.setStyle(
"color", bSorted ? "#343434" : "#767676"); 
super.updateDisplayList(unscaledWidth, unscaledHeight);}
]]>
</fx:Script>
<s:HGroup id="gradientOverlay" width="100%" height="100%" paddingTop="-2" paddingRight="{-SORT_INDICATOR_WIDTH}" >
<s:Rect width="100%" height="100%" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="{Constants.SELECTION_GRADIENT1}" alpha="1"/>
<s:GradientEntry color="{Constants.SELECTION_GRADIENT2}" alpha="1"/>
</s:LinearGradient>  
</s:fill>
</s:Rect>  
</s:HGroup>
<s:HGroup width="100%" height="100%" verticalAlign="middle" paddingLeft="{LABEL_BUFFER}" >
<s:Label id="lbl" maxDisplayedLines="1" showTruncationTip="true" />  
</s:HGroup>
</s:Group>

Similar Messages

  • Remove Flex DataGrid Heading Rollover Color

    Hi,
    How can i stop rollover color change in Flex 3 DataGrid heading ?
    Can i override the following mehtod if yes how can i do this ?
     drawHeaderIndicator(s, r.x, 0, visibleColumns[i].width, cachedHeaderHeight - 0.5, getStyle("rollOverColor"), r);
    Thanks,
    -Shrban

    To do what you want to do requires a fair amount of work as the rollover color is set as a style, you can change the color but it seems the rollover can't be disabled(not without a custom datagrid).
    A quick fix is to try and at least reduce the difference in the rollover color, this could be done as per below, which basically makes the rollover color the same as the lighter shade of the header gradient.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="appHandler(event)">
    <mx:Script>
    <![CDATA[
    import mx.controls.Label;
    import mx.events.FlexEvent;
    protected function appHandler(event:FlexEvent):void
    var colors:Array = dg.getStyle("headerColors");
    dg.setStyle("rollOverColor",colors[0]);
    ]]>
    </mx:Script>
    <mx:DataGrid id="dg" x="234" y="198" width="619" height="360">
    <mx:columns>
    <mx:DataGridColumn headerText="Column 1" dataField="col1" />
    </mx:columns>
    </mx:DataGrid>
    </mx:Application>

  • Add categories to DataGrid header

    Is there a simple way to add categories to the DataGrid header? Basically, instead of just a single row with headers, I want an additional row that sits above that row and describes sections of the grid (rather than individual columns). E.g., in html, I could do something like this:
      <table>
        <tr><th colspan="2">Name</th><th colspan="2">Data</th></tr>
        <tr><th>first</th><th>last</th><th>age</th><th>gender</th></tr>
        <tr><td>john</td><td>doe</td><td>26</td><td>male</td></tr>
      </table>
    Is there a reasonable way to do something like that in Flex? I've looked at Alex Harui's DataGrid footer, but after playing around with it a bit, it doesn't seem that it would be easily adapated.

    So I'm trying to generalize this to more than two subcolumns. I got the item renderer working fine, but when I include the modified SplitDataGridHeader as a custom header renderer, it fubars the whole grid (even the other columns). I assume something I'm doing is making the Player very unhappy, but I don't see any errors when debugging in FlexBuilder: the entire Grid just shows up as plain white, with no styles applied and no data at all (even for the columns using standard renderers). Any idea what could be causing issues like this?

  • Multiple rows in Datagrid header

    Hi,
    Can anybody help me in creating a datagrid header as shown in
    the below link.
    http://i12.tinypic.com/52lbtde.jpg
    Thanks in advance...

    Upgrade to Flex 3 beta 1 and use AdvancedDataGrid component
    or use the technique shared by Alex Harui:
    http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html#comments

  • [svn:fx-3.x] 8510: Eliminating Datagrid header flicker which occurs under various circumstances .

    Revision: 8510
    Author:   [email protected]
    Date:     2009-07-10 11:48:49 -0700 (Fri, 10 Jul 2009)
    Log Message:
    Eliminating Datagrid header flicker which occurs under various circumstances.
    Reviewer: Alex
    Bugs: SDK-14571.
    QE Notes: Opened a new item to track the remaining performance item (e.g. header is still regenerated too often).
    Doc Notes: None.
    Ticket Links:
        http://bugs.adobe.com/jira/browse/SDK-14571
    Modified Paths:
        flex/sdk/branches/3.x/frameworks/projects/framework/src/mx/controls/DataGrid.as

  • A question about /usr/include/sys/select.h header file

    good day! i hope i can get some help about this and i would be very grateful if my question will be answered. i have a question regarding the select.h header file that we include in our programs when we use the select(3C) function.
    * Select uses bit masks of file descriptors in longs.
    * These macros manipulate such bit fields.
    * FD_SETSIZE may be defined by the user, but the
    * default here should be >= NOFILE (param.h).
    29 #ifndef FD_SETSIZE
    30 #define FD_SETSIZE 1024
    31 #endif
    its says here in the header file that the value of FD_SETSIZE may be defined by the user and i need to know how. i've already tried declaring a constant at the beggining of the program but it didn't work...
    example:
    #undef FD_SETSIZE
    #define FD_SETSIZE 2048
    the FD_SET macro generates an error if a value larger than 1024 is passed from in the first argument. i need to increase its value in order for me to wait for more than 1024 socket descriptors on select function. how can i increase or modify its value? thanks in advance...

    AFAIK, the only way to change the FD_SETSIZE value is by building your own version of the libc.a and linking it statically to your executable. Not good at all IMHO.
    The sources of Solaris 8 contain the implementation of select(3C) with both standard and 'large' (64K) FD_SETSIZE.
    AFAIK, 64-bit version of the libc.so contains the 64K-descriptors version of the select(3C), so you may consider building your application with -xarch=v9 flag to get 64-bit application...
    As for poll(2) - there is a manual page (man -s 2 poll) and some notes in the Answerbook. poll(2) is the actual system call that is used by select(3C), which is an interface function, so there is no functional difference between these two.
    There is a potential problem with portability of your code if you are using poll(), but it looks like you have no choice... sorry about it...

  • A questions about /usr/include/sys/select.h header file

    good day! i hope i can get some help about this and i would be very grateful if my question will be answered. i have a question regarding the select.h header file that we include in our programs when we use the select(3C) function.
    * Select uses bit masks of file descriptors in longs.
    * These macros manipulate such bit fields.
    * FD_SETSIZE may be defined by the user, but the
    * default here should be >= NOFILE (param.h).
    29 #ifndef FD_SETSIZE
    30 #define FD_SETSIZE 1024
    31 #endif
    its says here in the header file that the value of FD_SETSIZE may be defined by the user and i need to know how. i've already tried declaring a constant at the beggining of the program but it didn't work...
    example:
    #undef FD_SETSIZE
    #define FD_SETSIZE 2048
    the FD_SET macro generates an error if a value larger than 1024 is passed from in the first argument. i need to increase its value in order for me to wait for more than 1024 socket descriptors on select function. how can i increase or modify its value? thanks in advance...

    AFAIK, the only way to change the FD_SETSIZE value is by building your own version of the libc.a and linking it statically to your executable. Not good at all IMHO.
    The sources of Solaris 8 contain the implementation of select(3C) with both standard and 'large' (64K) FD_SETSIZE.
    AFAIK, 64-bit version of the libc.so contains the 64K-descriptors version of the select(3C), so you may consider building your application with -xarch=v9 flag to get 64-bit application...
    As for poll(2) - there is a manual page (man -s 2 poll) and some notes in the Answerbook. poll(2) is the actual system call that is used by select(3C), which is an interface function, so there is no functional difference between these two.
    There is a potential problem with portability of your code if you are using poll(), but it looks like you have no choice... sorry about it...

  • Return selected column header of table

    I'm sure there's probably a way of doing this.  But I haven't found it yet.
    I'm building an application that will act as a kind of "universal" report generator for tables in a MySQL database. 
    On startup, a Combo box is populated with table names of the database.  When the user selects one of those tables, the column names are retrieved from the database and used to populate the column headers of the LabVIEW table.  
    The idea is that the user will be able to select that column and enter filter contraints into a text box.  Those constraints will then be added to the WHERE statement for that column.  
    So far I've only been able to find a way to return the Active Cell or a Selection of Cells when the user clicks on the actual data in the table.  
    Is there a direct way to retrun a  selected column header value in LabVIEW?
    I'm musing there may be some kind of workaround using transparent controls on top of the headers.  But since different tables will have different numbers of columns that the user sets the width on, I'm not really sure this will work either.  
    Patrick Allen
    Solved!
    Go to Solution.

    falkpl wrote:
    If you make the headers editable, this allows active cells to specify your column selected active row is -1 column is the selected column. you might have to use mouse down? to filter out the ability for the user to edit your column headers though.
    Hmmm.....this has possibilities. 
    I definately don't want the user changing the actual headers.  Although in this case, maybe I could call that a "feature".   Eventually the idea is that when the user has all the data filtered to his liking , he pushes an "export" buttton and everything is dumped to an Excel worksheet.  He can then manipulate it.  Create graphs.  Etc. Etc.   So maybe changing the headers to something other than somewhat non-intuitive field names in our database is desireable.  
    Thanks for the suggestion. 
    Patrick Allen

  • Read Http header in Flex

    Hi, I have a Flex web application accessed through a portal by users
    of different organisations.
    When user logs on to portal, user can access the Flex application without further authentication. However I need to know user credentials
    in order to control the functionality within the Flex app.
    If I can read the Http Header when Flex app is initialised, I will get all the required info.
    In jsp, I can use request.getHeader("")
    What is the best way to read Http Headers from a Flex App?

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="load()">
    <mx:Script>
            <![CDATA[
            public var xmlLoader:URLLoader=new URLLoader();
    function load():void{
                var xmlString:URLRequest = new URLRequest("items.xml");
              xmlLoader.load(xmlString);
            xmlLoader.addEventListener(Event.COMPLETE,init);
       function init(event:Event):void{
           var xDoc:XMLDocument = new XMLDocument();
        xDoc.ignoreWhite = true;
       var  myXML:XML=XML(xmlLoader.data);  
       var fr:String=myXML.items.item[0].Value.toString();
    ]]>
        </mx:Script>
    </mx:Application>
    Suppose this is ur items.xml file
    <items>
      <item>
        <name>jk</name>
        <Value>high</Value>
      </item>
      <item>
        <name>coat</name>
    <Value>medium</Value>
      </item>
       <item>
    <name>milk</name>
    <Value>low</Value>
       </item>
    </items>
    May be u need some imports
    Then the output will be :high(becoz items is  a xml list containing many xml nodes...item[0] is first xml node and Value is the element..toString methods converts it into a string)

  • How to turn off DataGrid header rollover?

    Does anybody know how to turn off the background rollover
    color in a DataGrid header? I have seen how to set
    useRollOver=false to turn it off in the body of the DataGrid but so
    far I can't see how to turn this off in the header. Thanks.

    I found a way to fix this but it seems like a kludge. In the
    table's style:
    headerColors: #D4DBE1,#D4DBE1;
    useRollOver: false;
    rollOverColor: #D4DBE1;
    useRollOver:false works for the data rows, not the header.
    Then setting rollOverColor will be ignored by the data rows, but
    will turn off the rollover for the headers, as long as the color is
    the same as the header colors.

  • Questions about Spark DataGrid (Header Font Styles, Header Gradient)

    Just starting out in 4.5 SDK, and just a tad confused on the Spark DataGrid.
    1) Trying to set the font style for just the header, but don't see those properties in the designer....as they appear to apply to every part of the DataGrid.
    2) Want to set a linear gradient for the header utilizing two specific colors, alphas and ratios.  Not sure where to set them now.
    I think that is it for now.  From what I have done with it so far, I love it....just obviously not as much user documentation as the MX DataGrid.
    Thanks in advance!
    Bill

    You can do per column header renderers by setting the headerRenderer property on the column. But if you want to swap out all the headers, the header renderer has to be specified in the skin. One neat trick you can do is subclass the DataGridSkin and replace the "headerRenderer" declaration. This also works with the other skin parts.
    <?xml version="1.0" encoding="utf-8"?>
    <skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    xmlns:skins="spark.skins.spark.*">
        <fx:Declarations>
            <!-- See DataGridSkin for other possible parts -->    
            <fx:Component id="headerRenderer">
                <s:CustomGridHeaderRenderer />
            </fx:Component>
        </fx:Declarations>
    </skins:DataGridSkin>
    -Kevin

  • Remove DataGrid Header Separator dynamically

    Hello,
    Scenario: I have a DG with 3 static columns and many dynamic columns added at run time.
    I want to have one and only one header for all the dynamic columns.
    In a way it can be seen as multiple datagridColumns (without headers) in  a single dataGridColumn (with only a header). Now there is a heavy traffic between static columns and the dynamic columns. So I dont think it is possible to have two different DG's.
    My Attempts: I tried to use the HeaderSeparatorSkin to remove the header separators so as to give a feel of one single header. But since the headerseparatorskin is removed at DG level it can be either removed for all columns or for none.
    My Question: I will have to create a custom DG so as to draw separator skin for few columns and remove for others. But I am not sure how can I do that since using "headerSeparatorSkin" removes it for all columns. Can some one show me a path as to how I can accomplish this?
    A very bad way of accomplishing the above is to remove all the header separator skins and then use headerRenderer for the static columns to show a line similar to separator skin. But that is a bad way of coding I guess.
    Thanks in advance,
    Bhargav

    Thank you for the reply Flex harUI.
    If I understood right the renderer will extend a DG and will have columnns  and only one row. But the row color will not match the the row of the main DG.
    Secondly I have using a checkbox renderer to be displayed in the columns created dynamically. The data of this renderer is changing with users interaction. Thus I am not very sure if implementing a renderer inside a renderer should be a good idea.
    But I will try and use your suggestion to see if it can be used for my implementation.
    Thanks again,
    Bhargav

  • Add sort images in DataGrid Header

    Hi,
    I have a datagrid, where in I have defined the 'headerRelease' event to sort the data-grid columns. The sorting that I have to use is not the default sorting. It has some other rules, which have been defined in the headerRelease event.
    <mx:DataGrid id="idGridWebAlerts" dataProvider="{ webAlertsPage }"  variableRowHeight="true"
            width="100%" headerRelease="headRelEvt(event)" selectable="false" />
    In the headerRelease method, I have called the preventDefault() method of the header Release event, which will disable the default sorting. Due to this method call, the sort order images, that appear by default on datagrid column header do not show up.
    One of the ways to add those images is to use HeaderRenderers, but that causes flickering of headers after the datagrid has loaded. Is there any other way we can get/add the sort order depiction images to data grid header?
    Please help.
    Anjali

    Hi,
    I tried the table sorter utility.but it is sorting only if there are text property.
    so it is sorting according to the text.
    then i tried the code
    Comparator comparator = new Comparator()
           public int compare(Object x1, Object x2)
              IResultNodeElement e1 = (IResultNodeElement ) x1;
              IResultNodeElement e2 = (IResultNodeElement ) x2;
              return e1.getDs().compareTo(e2.getDs());
         wdContext.nodeResultNode().sortElements(comparator);
    Then it is sorting in one order..is there any way to sort it in other order..
    Regards
    AD

  • How do I pass a value from a selected datagrid row to a popup

    I am working on a project tracking application in flex and need to pass the value of one of the rows from the datagrid to a popup. We have a screen with 2 data grids. The first datagrid lists the projects, their start, and end date and the project owner. The datagrid below the first datagrid lists the tasks for that specific project listed in the datagrid above. When you click on the project name above, the datagrid below is populated with the tasks. Within the tasks datagrid are start and end date boxes.
    What I need to do is be able to pass the project ID from the original datagrid into a popup that is called when a user changes the date of a project task. The popup is designed to submit a reason for why the user is changing the date on the task. In short, when they submit a reason, I need the project id passed from the datagrid into the popup so when submit is clicked, the proper row in the DB table is update via a CFC. Thank you.

    I tried that, but when I try to build the project, I get the error that there is a call to an undefined value. Here is code:
    Project Component:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        width="100%" height="100%" creationComplete="init();" xmlns:mxml="components.mxml.*">
        <mx:Script>
            <![CDATA[
                import mx.events.ListEvent;
                import mx.controls.dataGridClasses.DataGridColumn;
                import mx.rpc.events.ResultEvent;
                import mx.managers.PopUpManager;
                import mx.core.IFlexDisplayObject;
                import components.mxml.NewProject;
                import components.mxml.NewTask;
                import components.mxml.dateChangeNotice;
                import mx.controls.Alert;
                private function init():void{
                    roGetData.getProjects();
                    //roGetData.getTasks();
                private function projectClick(event:ListEvent):void{
                    //Alert.show(dgProjects.selectedItem.projectID);
                    roGetData.getTasks(dgProjects.selectedItem.projectID);
                private function refreshProjects(event:MouseEvent):void{
                    roGetData.getProjects();
                private function ResultEvent_Projects(event:ResultEvent):void{
                    dgProjects.dataProvider = event.result;
                private function ResultEvent_Tasks(event:ResultEvent):void{
                    adgTasks.dataProvider = event.result;
                private function ResultEvent_UpdateTasks(event:ResultEvent):void{
                    Alert.show('Your task was updated');
                private function showNewProject():void{
                    var newProjectWindow:IFlexDisplayObject =
                        PopUpManager.createPopUp(this, NewProject, true);
                    newProjectWindow.addEventListener(MouseEvent.CLICK, refreshProjects);
                private function showNewTask():void{
                    var newTaskWindow:IFlexDisplayObject =
                        PopUpManager.createPopUp(this, NewTask, true);
                private function dateFormat(item:Object, column:DataGridColumn):String{
                    return dateFormatter.format(item[column.dataField]);
                    //Function calls the Reason popup window
                //private function changeReason():void{
                    //Create Popup Window
                    //var resultWindow:IFlexDisplayObject =
                    //PopUpManager.createPopUp(this, dateChangeNotice, false);
            ]]>
        </mx:Script>
        <mx:RemoteObject id="roGetData" destination="ColdFusion" source="projectTracker.components.cfc.controllers.getController">
            <mx:method name="getProjects" result="ResultEvent_Projects(event);" fault="Alert.show(event.fault.faultString);" />
            <mx:method name="getTasks" result="ResultEvent_Tasks(event);" fault="Alert.show(event.fault.faultString);" />
        </mx:RemoteObject>
        <!--<mx:RemoteObject id="roUpdateData" destination="ColdFusion" source="projectTracker.components.cfc.controllers.updateController">
            <mx:method name="updateTasks" result="ResultEvent_UpdateTasks(event);" fault="Alert.show(event.fault.faultString);" />
        </mx:RemoteObject>-->
        <mx:DateFormatter id="dateFormatter" />
        <mx:HBox width="100%">
            <mx:Label text="Projects:" />
            <mx:Button label="Insert New Project" click="showNewProject();"/>
        </mx:HBox>   
        <mx:Panel width="100%" height="45%" title="Projects">
            <mx:DataGrid id="dgProjects" width="100%" height="100%" itemClick="projectClick(event);" dataProvider="">
                <mx:columns>
                   <mx:DataGridColumn dataField="projectID" headerText="ProjectID" visible="false" />- I Need to pass this value
                    <mx:DataGridColumn dataField="name" headerText="Project" />
                    <mx:DataGridColumn dataField="startDate" headerText="Date Started" labelFunction="dateFormat" />
                    <mx:DataGridColumn dataField="endDate" headerText="Completion Date" labelFunction="dateFormat" />
                    <mx:DataGridColumn dataField="description" headerText="Description" />
                    <mx:DataGridColumn dataField="statusName" headerText="Status" />
                    <mx:DataGridColumn dataField="ownerName" headerText="Owner" />
                </mx:columns>
            </mx:DataGrid>
        </mx:Panel>
        <mx:Panel width="100%" height="45%" title="Project Tasks">
            <mx:AdvancedDataGrid id="adgTasks" width="95%" height="100%" variableRowHeight="true">
                <mx:columns>
                    <mx:AdvancedDataGridColumn dataField="taskID" visible="false" width="50" />
                    <mx:AdvancedDataGridColumn dataField="name" width="25" />
                    <!--<mx:AdvancedDataGridColumn dataField="startDate" headerText="Date Started" />
                    <mx:AdvancedDataGridColumn dataField="endDate" headerText="Completion Date" />-->
                    <mx:AdvancedDataGridColumn id="descript" dataField="description" headerText="Description" width="50"/>
                    <mx:AdvancedDataGridColumn dataField="ownerID" headerText="Owner" width="25"  />
                    <mx:AdvancedDataGridColumn dataField="notes" headerText="Project Notes" width="50"/>
                    <mx:AdvancedDataGridColumn dataField="Dates" headerText="Dates" width="50"/>
                </mx:columns>
                <mx:rendererProviders>
                    <mx:AdvancedDataGridRendererProvider dataField="taskID" columnIndex="5">
                        <mx:renderer>
                            <mx:Component>
                                <mxml:dgDateHSlider startDate="{data.startDate}" endDate="{data.endDate}"/>   
                            </mx:Component>
                        </mx:renderer>
                    </mx:AdvancedDataGridRendererProvider>
                </mx:rendererProviders>
            </mx:AdvancedDataGrid>   
        </mx:Panel>
        <mx:HBox width="100%">
            <mx:Label text="Tasks:" />
            <mx:Button label="Insert New Task" click="showNewTask();"/>
            <mx:Spacer width="200"/>
        </mx:HBox>
    </mx:VBox>
    Popup Components
    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400" title="Reason for Date Change" backgroundColor="#E5E4E4">
    <mx:Script>
        <![CDATA[
                 import mx.events.ValidationResultEvent;
                import mx.rpc.events.ResultEvent;
                import mx.managers.PopUpManager;
                import mx.core.IFlexDisplayObject;
                import components.mxml.NewUser;
                import mx.controls.Alert;
                import components.mxml.Projects;
                import components.mxml.NewTask;
            //Clear Text Area Function
           public function Clear():void{
                reasonText.text = "";
            //function to send notes to db via RO
            public function writeNotes():void{
      into here-->    updateReason.reasonUpdate(taskID.selectedItem,reasonText.text);  taskID.selectedItem is not recognized. It errors on compile
            //remote object Results Event
            public function reasonResult(event:ResultEvent):void{
                Alert.show("Label update successful, thank you!");
                Clear();
        ]]>
    </mx:Script>
    <!--Update Remote Object-->
    <mx:RemoteObject id="updateReason" destination="ColdFusion" source="projectTracker.components.cfc.controllers.createController">
        <mx:method name="reasonUpdate" result="reasonResult(event);" fault="Alert.show(event.fault.faultString);"/>
    </mx:RemoteObject>
    <!--Reason Text Area-->
        <mx:TextArea x="19" y="60" width="90%" height="246" maxChars="1000" wordWrap="true" enabled="true" id="reasonText"/>
        <mx:Button label="Update" click="writeNotes()" right="65" bottom="0"/>
        <mx:Button label="Exit" click="PopUpManager.removePopUp(this);" right="10" bottom="0"/>
        <mx:Text text="Please Specify your reason for changing the dates of this task." width="90%" fontWeight="bold" top="10" horizontalCenter="0"/>
    </mx:TitleWindow>

  • How to include a custom bkgd in the spark datagrid header

    I have a CustomDatagridSkin.mxml, which is based upon the default DataGrid.
    I'm looking at the code, and I'm a noob, trying to make heads or tails out of it. If I could just figure out how to change the header color I would be happy. But what I'd really like to know is how to apply a graphic to the background of the header.
    Is there some example on the net that I can follow, because I'm having a hell of a time finding something useful.
    The demo that Deepa had was awsome (corkboard and postit notes looking thing).
    How was that done?
    Thanks
    Kristin

    Hi,
    Do you want a custom background for the entire header bar? or for each individual header renderer? I would take a look at the DefaultGridHeaderRenderer class to see how we do headers. These header renderers are used by the GridColumnHeaderGroup to create the column headers. You can modify it to have your own custom background graphic. If you just want to tweak the color, you can apply the chromeColor style to the DataGrid.
    I can try to cook up an example for you when I have a bit of time, but not at the moment. Hope this points you in the right direction.
    -Kevin

Maybe you are looking for