7 Replies Latest reply on Aug 30, 2012 12:30 PM by kglad

    Datagrid column widths

    BinaryBloke

      Hi.

       

      I have a working datagrid... example below.

       

      Please can someone help me modify this code so that I can set the width of each column so it matches the size of the text in that column. At present all columns appear the same width and they do not expand in width to fit the text in the array.

       

      function dataGridFunction() { var characters:Array = new Array(new Array("Jerry Seinfeld", "35", "37.9", "+2.9"),

      new Array("Chuck Norris", "35", "24", "-11"),

      new Array("Jim Raynor", "35", "40", "+5"));

      //

      //

      for (var i:Number = 0; i < characters.length; i++) {

      var firstName:String = characters[i][0];

      var lastName:String = characters[i][1];

      var award:String = characters[i][2];

      var diff:String = characters[i][3];

      dataGridMain.addItem({Name:firstName, TH:lastName, TR:award, VS:diff});

      }

       

      dataGridMain.setStyle("fontFamily", "Verdana");

      dataGridMain.setStyle("headerColor", "0xA6CBDD");

      dataGridMain.setStyle("alternatingRowColors", ["0xF0F0F0", "0xFFFFFF"]);

      dataGridMain.setStyle("rollOverColor", "0xDCEBF1");

      dataGridMain.setStyle("selectionColor", "0xFFF97D");

      dataGridMain.setStyle("selectionDuration", 300);}

      dataGridFunction();

        • 1. Re: Datagrid column widths
          kglad Adobe Community Professional & MVP

          :

           

           

          function dataGridFunction() { var characters:Array = new Array(new Array("Jerry Seinfeld", "35", "37.9", "+2.9"),

          new Array("Chuck Norris", "35", "24", "-11"),

          new Array("Jim Raynor", "35", "40", "+5"));

          //

          //

          for (var i:Number = 0; i < characters.length; i++) {

          var firstName:String = characters[i][0];

          var lastName:String = characters[i][1];

          var award:String = characters[i][2];

          var diff:String = characters[i][3];

          dataGridMain.addItem({Name:firstName, TH:lastName, TR:award, VS:diff});

          }

           

          dataGridMain.setStyle("fontFamily", "Verdana");

          dataGridMain.setStyle("headerColor", "0xA6CBDD");

          dataGridMain.setStyle("alternatingRowColors", ["0xF0F0F0", "0xFFFFFF"]);

          dataGridMain.setStyle("rollOverColor", "0xDCEBF1");

          dataGridMain.setStyle("selectionColor", "0xFFF97D");

          dataGridMain.setStyle("selectionDuration", 300);

          dataGridMain.getColumnAt(0).width = dataGridMain._width-240;

          dataGridMain.getColumnAt(1).width = 80;

          dataGridMain.getColumnAt(2).width = 80;

          dataGridMain.getColumnAt(3).width = 80;

          }

          dataGridFunction();

          1 person found this helpful
          • 2. Re: Datagrid column widths
            BinaryBloke Level 1

            Hi. I have tried this thanks, but column 1 is now squashed and too small to display the name. Column 2 / 3 are equal size and column 4 is slightly smaller that column 2 / 4.

            • 3. Re: Datagrid column widths
              kglad Adobe Community Professional & MVP

              i furnished code so you can see how to control the column widths.

               

              but i can't see your datagrid.  i have no idea how wide it is.  maybe you need to increase its width.

               

              or assign whatever numbers to suit your needs.

              • 4. Re: Datagrid column widths
                BinaryBloke Level 1

                Thanks. My datagrid is 240 wide. I took that first line out and added the one in bold. All appears to work ok now for all 4. Is the first line important in someway.

                 

                //dataGridMain.getColumnAt(0).width = dataGridMain._width-240;

                dataGridMain.getColumnAt(0).width = 120;

                dataGridMain.getColumnAt(1).width = 35;

                dataGridMain.getColumnAt(2).width = 35;

                dataGridMain.getColumnAt(3).width = 35;

                • 5. Re: Datagrid column widths
                  kglad Adobe Community Professional & MVP

                  actually, you probably want to use to assign the left-over width to your first column:

                   

                   

                   

                  dataGridMain.getColumnAt(0).width = dataGridMain._width-105;

                  dataGridMain.getColumnAt(1).width = 35;

                  dataGridMain.getColumnAt(2).width = 35;

                  dataGridMain.getColumnAt(3).width = 35;

                   

                  p.s.  please mark helpful/correct responses.

                  1 person found this helpful
                  • 6. Re: Datagrid column widths
                    BinaryBloke Level 1

                    Works a treat. Thanks again.

                    • 7. Re: Datagrid column widths
                      kglad Adobe Community Professional & MVP

                      you're welcome.