4 Replies Latest reply on Aug 5, 2010 1:37 PM by Flex harUI

    Customizing the style of the DataGrid Class with Skins and CSS

    Edward Apostol Level 1

      Hi -

       

      I have worked on a Flex/AIR application that involves a custom stylized datagrid component. The application involves invoking the component containing the dataGrid through a custom namespace ( i.e. <myNS:myCustomDataGrid> ). The component itself is composed of the .mxml skin and it's associated .as class file. In particular, the datagrid within the skin file has its style defined through a CSS style sheet. Each dataGridColumn has its own itemRenderer as well.

       

      The style looks like this (I have also included the style for the headings)

       

      /* the datagrid heading style */

       

      .dataGridHeadingStyle

      {

       

      font-family: "MobileFont BT";

      font-size: 15pt;

      header-separator-skin:Embed('/../com/quickplay/skins/transparent.gif');

       

      }

       

       

      /* the datagrid style */

       

      .dataGridStyle{

      font-family: "MobileFont BT";

      font-size: 15pt;

      chrome-color:#999999;

      content-background-color:'#F1F1F1';

      alternating-item-colors:'#F1F1F1','#F1F1F1';

      border-style:none;

      border-color:'#FFFFFF';

      border-alpha:0.6;

      horizontal-grid-lines:true;

      horizontal-grid-line-color:'#FFFFFF';

      horizontal-grid-line-thickness:12px;

      vertical-grid-lines:false;

      roll-over-color:'#00FF00';

      top:0;

      bottom:0;

      left:0;

      right:0;

      }

       

       

      The resultant datagrid appears to look exactly like I want, except the BOTTOM row borders are black. I just want to make them a light grey, and have no other border colors for top,left, or right. I can't seem to find any combination or permutation of style code that will impact the datagrid. I have attached an image for your perusal (had to hide some parts due to various agreements)myCustomDataGrid-sofar.png

      Anyone have any thoughts on how I could do this? I have tried applying the style on the a) itemRenderer file - it just adds  a border for the cell in the column b) in the mxml file invoking the component as both an inline and css based style and c) as referenced in the external style sheet. The external style sheet option has produced what you see in the photo, but I can't get those lines to just lighten up? (no "bottom-border-color" style exists lol).

       

      feedback is appreciated!

       

      thanks

       

      Edward Apostol