styling a datagrid in flex

Question

I am attempting to style the headers in a flex datagrid and I keep getting the warning:

"Type DataGrid in CSS selector 'DataGrid' must be qualified with a namespace"

What does this mean? I have gone through a bunch of tutorials and none of them have worked. It seems like changing a the colors in a datagrid should be relatively simple.

Here is a code sample:

<mx:Style>

        .headerCustomStyle
        {
            fontWeight: "bold";
            textAlign: "center";
            color: #0000FF;


        }

        DataGrid {
            alternating-item-colors: #F4FBFF, #FFFFFF;

        }




    </mx:Style>


<mx:DataGrid draggableColumns="true" width="100%" id="topTracks" headerStyleName="headerCustomStyle" dataProvider="{_trackData.track}" >

            <mx:columns>
                <mx:DataGridColumn  id="artistName" dataField="artist.name" headerText="Artist" width="250" />
                <mx:DataGridColumn id="trackName" dataField="name" headerText="Track" width="250"/>
            </mx:columns>


        </mx:DataGrid>

Answer 1

I'm not sure why its telling you that you need a namespace, but in your CSS, DataGrid is a type.

So try and give it the fully qualified namespace for DataGrid (mx.controls.DataGrid)

Answer 2

If you're using Flex 4, you need to define namespaces like this:

@namespace mx "library://ns.adobe.com/flex/halo";
@namespace s "library://ns.adobe.com/flex/spark";
@namespace tlf "library://ns.adobe.com/flashx/textLayout";

/* Halo DataGrid */
mx|DataGrid
{
...
}

/* Spark Button */
s|Button
{
...
}

They might be referring to that if you're using a new version of Flex/Flash Builder. Not sure if Flex 3 requires namespaces though.

Here's Adobe's doc on CSS Namespace Support

Answer 3

great.. thank you.