4 Replies Latest reply on Jun 14, 2007 7:31 PM by ntsiii

    Adding DataGridColumn dynamically.

    babo_ya Level 3
      Anyone knows how to add DataGridColumn dynamically?
      Basically, I have a datagrid and when user clicks expand button then it adds 5 more columns and the widh & height of datagrid expands. I know I need to do this using actionscript and DataGrid has a property call 'columns' which is an array, so I tried aDataGrid.columns.push(aNewDataGridColumn) and this didn't work...

      Thanks,
        • 1. Re: Adding DataGridColumn dynamically.
          Garyl Woolworth Level 1
          This way is a little bit static has far as the columns however it does rely totally on actionscript. A way to make it dynamic would be to run a loop over an array of all the columns you need and set the same properties that I have set statically. As I only had a limited amount of time I think this will get you started in the right direction.

          The only mxml tag you need is the datagrid declared on the stage itself. And a creationComplete handler to run initComplete()

          <mx:DataGrid id="myDG" width="100%" height="100%"/>

          Then you as would be as follows.

          import mx.controls.dataGridClasses.DataGridColumn;
          import mx.collections.ArrayCollection;

          private var column:DataGridColumn;

          [Bindable]
          private var dgColumns:ArrayCollection = new ArrayCollection;

          [Bindable]
          private var dgDP:ArrayCollection = new ArrayCollection([
          {firstname:"Bob", lastname:"Hope", email:"bob@hope.com"},
          {firstname:"Jerry", lastname:"Springer", email:"jerry@springer.com"},
          {firstname:"Michael", lastname:"Jordan", email:"mj@bulls.com"}]);


          private function initComplete():void {
          column = new DataGridColumn("firstnameColumn");
          column.headerText = "First Name";
          column.dataField = "firstname";
          myDG.columns.push(column);

          column = new DataGridColumn("lastnameColumn");
          column.headerText = "Last Name";
          column.dataField = "lastname";
          myDG.columns.push(column);

          column = new DataGridColumn("emailColumn");
          column.headerText = "Email";
          column.dataField = "email";
          myDG.columns.push(column);

          myDG.dataProvider = dgDP;

          }
          • 2. Re: Adding DataGridColumn dynamically.
            Garyl Woolworth Level 1
            Just thought of something since the button needs to add 5 columns why not set the datagrid to have the columns from the beginning but set the visibility to false on the 5 you need to add. then when the button is clicked you could run a for loop on the last 5 columns setting there visibility to true. By doing this your dg could stay the same width / height and the only thing that changes is the width of the columns which by setting the visibility should auto adjust the columns for you.
            • 3. Re: Adding DataGridColumn dynamically.
              babo_ya Level 3
              Thanks for your help
              I tried something similar already & and I also tried your example but, this didn't work.
              5 columns is just for an example. It could be any number.
              Any idea?
              Thanks for your help