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>

Similar Messages

  • 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.

  • 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

  • Flex DataGrid with Dynamic Grouping

    Does anyone know of any examples of Flex datagrids that have
    grouping features comparable to the numerous grid components
    available in the ASP.NET world? I’m thinking of .NET
    component vendors such as Telerik, Infragistics, Component Art,
    DevExpress, etc.
    The way these .NET controls generally work is that you drag
    the header of a column to a bar above the grid, which causes the
    grid to redraw based on the new grouping you just specified.
    This is an example of a grid component that I am currently
    using:
    Telerik
    Grid
    Thank you,
    Mike Chabot

    The renderer's data property is the data for the entire row so you can get the column1 data and assign the combobox's dataprovider accordingly.
    Alex Harui
    Flex SDK Developer
    Adobe Systems Inc.
    Blog: http://blogs.adobe.com/aharui

  • DataGrid header functionality to manipulate column data

    I have been displaying information for individual series in a chart via a datagrid so that the user can edit it (change color, series style, etc.) And it works fine, but now I need to add in some functionality in the header of the series style column.  Basically the user needs to be able to "override" each entry to make all of the series types lines or area or plot or whatever he chooses in the header.  In my research on the net, it looks like I may have to use AdvancedDataGrid to do this.  Does anyone know how I would do this.
    Here's what I have so far.  I've left out most of the other columns for simplicity.
    <mx:DataGrid id="seriesTable" color="black" fontSize="9" rowHeight="30" editable="true" resizeEffect="slow" rollOverColor="#CCCCCC"
    selectionColor="#999999" dataProvider="{axis.seriesList}" width="100%"
    rowCount="{axis.seriesList.length > 2 ? axis.seriesList.length : 2}" >
      <mx:columns>
             <mx:DataGridColumn width="40" dataField="color" headerText="Color" id="colorColumn"
                        rendererIsEditor="true"  editorDataField="result" itemRenderer="renderer.ColorPickerRenderer"/>
             <mx:DataGridColumn dataField="plotType" width="220" id="plotColumn"
                       rendererIsEditor="true"  editorDataField="result" itemRenderer="renderer.TypeBoxRenderer"/>
          </mx:columns>
    </mx:DataGrid>
    (I could also include TypeBoxRender code but I don't think it's really needed to understand what is going on here.)

    I have been displaying information for individual series in a chart via a datagrid so that the user can edit it (change color, series style, etc.) And it works fine, but now I need to add in some functionality in the header of the series style column.  Basically the user needs to be able to "override" each entry to make all of the series types lines or area or plot or whatever he chooses in the header.  In my research on the net, it looks like I may have to use AdvancedDataGrid to do this.  Does anyone know how I would do this.
    Here's what I have so far.  I've left out most of the other columns for simplicity.
    <mx:DataGrid id="seriesTable" color="black" fontSize="9" rowHeight="30" editable="true" resizeEffect="slow" rollOverColor="#CCCCCC"
    selectionColor="#999999" dataProvider="{axis.seriesList}" width="100%"
    rowCount="{axis.seriesList.length > 2 ? axis.seriesList.length : 2}" >
      <mx:columns>
             <mx:DataGridColumn width="40" dataField="color" headerText="Color" id="colorColumn"
                        rendererIsEditor="true"  editorDataField="result" itemRenderer="renderer.ColorPickerRenderer"/>
             <mx:DataGridColumn dataField="plotType" width="220" id="plotColumn"
                       rendererIsEditor="true"  editorDataField="result" itemRenderer="renderer.TypeBoxRenderer"/>
          </mx:columns>
    </mx:DataGrid>
    (I could also include TypeBoxRender code but I don't think it's really needed to understand what is going on here.)

  • 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?

  • Flex datagrid borders off by 1px?

    Is there a way to extend the datagrid component or any to her way to avoid this?
    Flex datagrid column header borders and column borders keep going off by 1px... and they randomly alternate when resized.
    I have no idea how to fix this, and it to me looks like a problem with flex, not so much what i coded
    http://screencast.com/t/NmI3Zjk0NmU
    http://screencast.com/t/YzE0NDk5 - resized
    It's like it's going off by 1px because of some rounding error... no idea why this is happening, and I'm using
    Code I'm using (a bit sloppy but still)
    http://pastebin.ca/1888773

    I could use someone's help on this... Every single datagrid i create (at least with a custom header gradient, I think), has borders off by 1px, what can I do to fix this?  I've even seen this happening on other sample flex projects. No idea how to fix this

  • Flex datagrid data on datachange

    Hi all,
    I am using an extended datagrid which takes its height on the basis of measured height of items. Item renderer for datagrid is a canvas. Which holds one more canvas(header for item renderer) and a text area. The problem I am facing is with the header canvas in item renderer. Header canvas has one label which diaplay a name of user. On the basis of data provider for the current item visibility of this label in header canvas is set as true or false. issue is when it set to false it repaints(on data change event) all the previous header canvas label also to visible false. And just the last item has the data. Rather it should set its visiblity false only for the current item and rest items sholud behave as value set for them.
    Thanks in advance.

    Adobe Newsbot hopes that the following resources helps you.
    NewsBot is experimental and any feedback (reply to this post) on
    its utility will be appreciated:
    Flex 3 - Handling service results:
    Flex interprets the XML data that a web service or HTTP
    service returns to ..... a DataGrid control with DataTable data
    returned from a .NET web service.
    Link:
    http://livedocs.adobe.com/flex/3/html/data_access_6.html
    Flex cookbook beta - Building Flex Applications with SOAP Web
    Services:
    Mar 3, 2008 ... If you are using web services technologies
    then it is usually ... The DataGrid tag instanciates an instance of
    the DataGrid Flex control.
    Link:
    http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=7863
    Flex 3 - Using WebService components:
    The Flex web service API generally supports Simple Object
    Access Protocol (SOAP) ... property of a DataGrid control and
    displayed in the DataGrid control.
    Link:
    http://livedocs.adobe.com/flex/3/html/data_access_3.html
    Adobe - Flex General Discussion:
    Flex datagrid data column / webservice - justneed2know -
    08/27/2008 ... I use a web service to populate a datagrid and its
    columns (on of which is date).
    Link:
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1388794&enterthread=y
    All Classes (Flex 3):
    mx.rpc.soap, AbstractWebService is an abstract base class for
    implementations that provide RPC access to SOAP-based web services.
    Link:
    http://livedocs.adobe.com/flex/3/langref/class-summary.html
    Adobe - Developer Center : Using Flex Builder to Create Web:
    Using Flex Builder to Create Web ServiceBased Flex
    Applications ... The web service result data needs to flow to the
    DataGrid. Select the 'Data will flow
    Link:
    http://www.adobe.com/devnet/flex/articles/flexbuilder_ws_04.html
    Disclaimer: This response is generated automatically by the
    Adobe NewsBot based on Adobe
    Community
    Engine.

  • 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

  • Styling the TabBar rollover color *without* skin

    Hello all,
    I'm styling the flex TabBar using Adobe flex explorer, and
    facing a very annoying problem while trying to set the rollOver
    color of the tabs.
    At first place I thought I could set the rollover color using
    the tabStyleName's fillColors style, but this style can only get 2
    colors that determines the default bg color, unlike the ButtonBar,
    whose fillColors can get 4 colors where the last 2 determines the
    rollover colors.
    Since TabBar extends ButtonBar, I thought that instead of
    using the .tabStyleName I could use the buttonStyleName , in which
    I can define rollover colors with the fillColors style which
    receives 4 colors, where the last two, determines the rollover
    color, as the buttonStyleName has no effect on the tabs.
    This is a link to a demo project that illustrates the
    problem:
    http://files-upload.com/files/616415/TabsRolloverColor.rar
    I will be very glad to get some ideas to get around this.
    Thanks a lot,
    Almog.

    You can include the email parameters.  As far as having the link behave like a link and change colors, that cannot be done with a static textfield as far as I know.  By its nature static text doesn't change.

  • [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

  • How to disaply multiple column of a table in a single flex datagrid column

    Hi,
    I have a table in my database which has say 3 column (Firstname,LastName,Location). I wanted to display these 3 different values in a single column in flex datagrid.
    Could you please help me out in this
    Thanks,
    Pratik

    Generally, in such scenarios each column is made corresponding to the column in database only and not single column.
    However, we can setStyle of a datagrid to make it appear as if all three  columns have been populated in single.
    set verticalGridLines="false" for dataGrid. Further cosmetic changes can be made to realise the required look.
    In some cases, labelFunction of a datagridColumn also suffices the need.
    Tanu

  • Import CSV/Excel data into Flex Datagrid using Java/JSP

    Hi,
    Is there any way we can import excel/csv data into flex datagrid component.
    I see that is been done using php in this site. http://code.google.com/p/as3xls/
    Any help would be appreciated.
    Thanks in advance

    You can store the list of data from the Excel sheet that you have read already into an ArrayList
    Then go through the JDBC tutorial, and learn how to insert a single record into the table.
    After you understand how to insert a single record, you can iterate through the ArrayList of data and insert them into the table in the database.
    If you know JDBC, see if you can use OR Mapping frameworks like Hibernate or iBatis, they make it very easy to manage database in Java.

  • Showing multiple links from inside a flex datagrid button

    Hi,
    I have a requirement where I need to show a button inside
    flex datagrid column.Which I'm doing with custom itemrenderer.When
    the User clicks on a particular button inside data grid I need to
    show him multiple links with images where user cal click on one of
    the links if he choses to do so.How do I achieve this.Any example
    is greatly appreciated.
    Regards
    mflex.

    "...show him multiple links with images ..." Where/how does
    this need to be displayed?
    Tracy

  • Table css column-header text color not working

    When setting
    -fx-text-fill: red;
    in a css table, it does not change the header to tex to red. Is there another value? .table-view .column-header {                                                                                                                                                                                                                                                                                                                   

    You have to override the following from the caspian.css:
    .table-view .column-header  {
        -fx-text-fill: -fx-selection-bar-text;
        /* TODO: for some reason, this doesn't scale. */
        -fx-font-size: 1.083333em; /* 13pt - 1 more than the default font */
        -fx-size: 25;
        -fx-border-style: solid;
        -fx-border-color:
              Inner border: we have different colours along the top, right, bottom and left.
              Refer to RT-12298 for the spec.
            derive(-fx-base, 80%)
            linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%)
            derive(-fx-base, 10%)
            linear-gradient(to bottom, derive(-fx-base,80%) 20%, derive(-fx-base,-10%) 90%),
            /* Outer border: */
            transparent -fx-table-header-border-color -fx-table-header-border-color transparent;
        -fx-border-insets: 0 1 1 0, 0 0 0 0;
        -fx-border-width: 0.083333em, 0.083333em;
    .table-view .column-header-background {
        -fx-background-color: -fx-body-color;
        -fx-padding: 0;
    }

Maybe you are looking for