4 Replies Latest reply on Aug 27, 2009 11:40 AM by Peter deHaan

    How do I style my MX datagrids in a Spark panel?

    Handycam Level 1

      I am updating an app done originally in 3.0 to 4.0.

       

      One part of it has a panel, with 3 data grids:

       

      http://img.skitch.com/20090727-fjiyj5jknxgxf7tjns39c47xsg.jpg

      So I have made a new Spark Panel skin, based on the wireframe skin:

       

      http://img.skitch.com/20090727-td4r8n91fwdcc2s6ma3w3f7usp.jpg

      But, as you can see, the data grids have lost all styling, which is been done  in CSS:

       

      .miGrid {
           alternatingItemColors: #fff, #fff;
           backgroundColor: #fff;
           backgroundAlpha: 0;
           headerColors: #fde8a9, #fde8a9;
           horizontalGridLines: false;
           verticalGridLines: false;
           borderThickness: 0;
           verticalGridLineColor: #000;
           useRollOver: false;
           rollOverColor: #daee8a;
           borderColor: #F4EED0;
           color: #8C7A5D;
           dropShadowEnabled: false;
           fontSize: 10;
           headerStyleName: "miGridHeader";
      }
      
      .miGridHeader  {
         color: #553519;
         fontSize: 10;
         fontWeight: bold;
      }
      

      What gives?  How do I get those Datagrids to take on the specs in my css?

        • 1. Re: How do I style my MX datagrids in a Spark panel?
          Peter deHaan Level 4

          Handycam,

           

          In your project properties, add the following text in the Additional compiler settings text field: -theme=${flexlib}\themes\Halo\halo.swc

          (See http://blog.flexexamples.com/2009/07/14/using-the-halo-theme-in-flex-4/ for a quick example on where to find the compiler settings)

           

          I quickly tested with your previous snippet:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/halo">
              <fx:Style>
                  @namespace s "library://ns.adobe.com/flex/spark";
                  @namespace mx "library://ns.adobe.com/flex/halo";
                  .miGrid {
                      alternatingItemColors: #fff, #fff;
                      backgroundColor: #fff;
                      backgroundAlpha: 0;
                      headerColors: #fde8a9, #fde8a9;
                      horizontalGridLines: false;
                      verticalGridLines: false;
                      borderThickness: 0;
                      verticalGridLineColor: #000;
                      useRollOver: false;
                      rollOverColor: #daee8a;
                      borderColor: #F4EED0;
                      color: #8C7A5D;
                      dropShadowEnabled: false;
                      fontSize: 10;
                      headerStyleName: "miGridHeader";
                  }
                  .miGridHeader {
                      color: #553519;
                      fontSize: 10;
                      fontWeight: bold;
                  }
              </fx:Style>
              <s:Panel>
                  <mx:DataGrid styleName="miGrid">
                      <mx:dataProvider>
                          <fx:Array>
                              <fx:Object c1="1.one" c2="1.two" />
                              <fx:Object c1="2.one" c2="2.two" />
                              <fx:Object c1="3.one" c2="3.two" />
                              <fx:Object c1="4.one" c2="4.two" />
                              <fx:Object c1="5.one" c2="5.two" />
                              <fx:Object c1="6.one" c2="6.two" />
                              <fx:Object c1="7.one" c2="7.two" />
                              <fx:Object c1="8.one" c2="8.two" />
                              <fx:Object c1="9.one" c2="9.two" />
                          </fx:Array>
                      </mx:dataProvider>
                  </mx:DataGrid>
              </s:Panel>
          </s:Application>
          

           

          Peter

          • 2. Re: How do I style my MX datagrids in a Spark panel?
            Handycam Level 1

            Aha!  Like magic.  Thanks, Peter.

            • 3. Re: How do I style my MX datagrids in a Spark panel?
              wicket971 Level 1

              When I add this to my project all the fonts in my project get completly changed. Is there a way to just apply this to the datagrid component and not the whole project?

              • 4. Re: How do I style my MX datagrids in a Spark panel?
                Peter deHaan Level 4

                wicket,

                 

                Are you setting the fontFamily style on the Spark Panel, or somewhere globally?

                There are a few gotchas with mixing Halo/MX controls with Spark containers. You may need to embed some fonts twice (using embedAsCFF=false/DefineFont3, as well as embedAsCFF=true/DefineFont4), or you could try checking out Using a CFF embedded font with a Halo DataGrid control in Flex 4 which shows how you can get your Halo/MX DataGrid control to use a DefineFont4 embedded font by specifying a TLF-capable item renderer.

                 

                Peter