2 Replies Latest reply: Nov 25, 2011 2:37 AM by nITiNkIlLeRmEeRuT RSS

    Create border around Grid/GridItem

    nITiNkIlLeRmEeRuT

      Hi,

       

      I am stuck with a problem and no idea on how to proceed on this.

       

      I have created a Grid and want to draw border around it so its appearance is like table. The borders are just not appearing. Can someone provide any direction what I may be missing.

       

      Here is the code

       

       

      [PHP]

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Style>
              Grid
              {
                  horizontal-gap:-1;
                  vertical-gap:-1;
                  border-color:#000000;
                  border-style:solid;
                  border-thickness:5;
              }
              GridItem
              {
                  border-color:#000000;
                  border-style:solid;
                  border-thickness:5;
              }
          </mx:Style>

          <mx:Grid x="31" y="24">
              <mx:GridRow>
                  <mx:GridItem width="100" height="30">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
                  <mx:GridItem width="100" height="30">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
                  <mx:GridItem width="100" colSpan="2" height="30">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
              </mx:GridRow>
              
              <mx:GridRow>
                  <mx:GridItem width="100" height="30">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
                  <mx:GridItem width="120" colSpan="2" height="30">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
                  <mx:GridItem width="100" colSpan="3" height="11">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
              </mx:GridRow>
              
              <mx:GridRow>
                  <mx:GridItem width="100" height="30">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
                  <mx:GridItem width="100" height="30">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
                  <mx:GridItem width="120" colSpan="3" height="30">
                      <mx:Label text ="Nitin">
                          
                      </mx:Label>
                  </mx:GridItem>
              </mx:GridRow>
          </mx:Grid>
      </mx:Application>

      [/PHP]

        • 1. Re: Create border around Grid/GridItem
          nITiNkIlLeRmEeRuT Community Member

          I even tried using the graphics to create border but it is not working

           



          private var bgColor:uint  = 0x000000;


          private var borderColor:uint  = 0x666666;


          private var borderSize:uint   = 2;


          private var cornerRadius:uint = 0;

           

           

          var grid:Grid = new Grid();

           

          grid.graphics.beginFill(bgColor);

          grid.graphics.lineStyle(borderSize, borderColor);

          grid.graphics.drawRoundRect(0, 0, grid.width, grid.height, cornerRadius);

          grid.graphics.endFill();

          • 2. Re: Create border around Grid/GridItem
            nITiNkIlLeRmEeRuT Community Member

            Problem solved.

             

            Using graphics property of Grid Item and horizontal/vertical gap.

             

            gridItem1.graphics.lineStyle(borderSize, borderColor);

            gridItem1.graphics.drawRoundRect(0, 0, 250, 100, cornerRadius);

             

            grid.setStyle("horizontalGap", "0");

            grid.setStyle("verticalGap", "0");