10 Replies Latest reply on Aug 1, 2011 12:43 AM by FahaAK

    Add a dynamically created check box into DataGrid

    sksmylachal
      Rquirement: Add a  dynamically created check box into the first column of a Dynamically created a  DataGrid .
      Note: The dataprovider of the  datagrid is an object of arraycollection, which is populated by tables in the  database. So each time the columns of the DataGrid may varry depents upon the  table.
        • 1. Re: Add a dynamically created check box into DataGrid
          Abhrodip Paul-cXMMf1 Level 2

          Assuming you need this in every row of the first column. If this is true you can just use an itemrenderer for datagrid.

          1 person found this helpful
          • 2. Re: Add a dynamically created check box into DataGrid
            sksmylachal Level 1

            Hi Abhrodip,

             

                      Could you please share some code snippets for adding a dynamically created checkbox into the first column(in every row) of a dynamically created DataGrid.

             

             

            Thanks and Regards,

             

            SREEJITH K S

            • 3. Re: Add a dynamically created check box into DataGrid
              sksmylachal Level 1

              Hi Abhrodip,

               

                         Here is the code snippets that I have used for dynamically create a Datagrid and assign data on it. Then created a dynamic checkbox as well.

              Could you please update the code that can include the checkbox in the first column of the datagrid in every row.

               

               

              <![CDATA[
              import mx.collections.ArrayCollection;

              import mx.controls.DataGrid;
              import mx.controls.CheckBox;

              [Bindable]
              private var dtGrid:DataGrid;

               

                [Bindable]
              private var chkBox:CheckBox;

               

              [Bindable]
              private var peeps:ArrayCollection;

               

              private function init():void
              {
                 peeps = new ArrayCollection();
                 peeps.addItem({firstName: "Handsome", lastName: "Dude", age: 24, sex: "male"});
                 peeps.addItem({firstName: "Red", lastName: "Bloke", age: 25, sex: "male"});
                 peeps.addItem({firstName: "Tall", lastName: "Guy", age: 25, sex: "male"});
                 peeps.addItem({firstName: "Cute", lastName: "Girl", age: 24, sex: "female"});
                 peeps.addItem({firstName: "Hot", lastName: "Chick", age: 24, sex: "female"});
                 peeps.addItem({firstName: "Lazy", lastName: "Man", age: 25, sex: "male"});

               


                 chkBox=new CheckBox();

               

                 dtGrid=new DataGrid();

               

                 dtGrid.dataProvider=peeps;

               

                 this.addElement(dtGrid);

               

              }

               

               

              ]]>

               

               

               

              Thanks and Regards,

               

              SREEJITH K S

              • 4. Re: Add a dynamically created check box into DataGrid
                Abhrodip Paul-cXMMf1 Level 2

                Hi SREEJIT,

                 

                Can you please give a try to below code? This should work.

                 

                 

                 

                <![CDATA[
                              import mx.controls.dataGridClasses.DataGridColumn;
                                import mx.collections.ArrayCollection;
                           
                                import mx.controls.DataGrid;
                                import mx.controls.CheckBox;
                           
                                [Bindable]
                                private var dtGrid:DataGrid;
                                  [Bindable]
                                private var chkBox:CheckBox;
                           
                                [Bindable]
                                private var peeps:ArrayCollection;
                           
                            
                           
                                private function init():void
                                {
                                   peeps = new ArrayCollection();
                                   peeps.addItem({firstName: "Handsome", lastName: "Dude", age: 24, sex: "male"});
                                   peeps.addItem({firstName: "Red", lastName: "Bloke", age: 25, sex: "male"});
                                   peeps.addItem({firstName: "Tall", lastName: "Guy", age: 25, sex: "male"});
                                   peeps.addItem({firstName: "Cute", lastName: "Girl", age: 24, sex: "female"});
                                   peeps.addItem({firstName: "Hot", lastName: "Chick", age: 24, sex: "female"});
                                   peeps.addItem({firstName: "Lazy", lastName: "Man", age: 25, sex: "male"});
                                  
                                   //chkBox=new CheckBox();
                                  
                                   var dataGridColumn:DataGridColumn = new DataGridColumn("");
                                   dataGridColumn.itemRenderer = new ClassFactory( CheckBox );
                                  
                                   var dataGridColumnfirstName:DataGridColumn = new DataGridColumn("firstName");
                                   dataGridColumnfirstName.dataField = "firstName";
                                  
                                   var dataGridColumnlastName:DataGridColumn = new DataGridColumn("lastName");
                                   dataGridColumnlastName.dataField = "lastName";
                                  
                                   var dataGridColumnage:DataGridColumn = new DataGridColumn("age");
                                   dataGridColumnage.dataField = "age";
                                  
                                   var dataGridColumnsex:DataGridColumn = new DataGridColumn("sex");
                                   dataGridColumnsex.dataField = "sex";
                                  
                                   dtGrid=new DataGrid();
                                  
                                   dtGrid.columns = [dataGridColumn, dataGridColumnfirstName
                                       ,dataGridColumnlastName,dataGridColumnage,dataGridColumnsex ];
                                  
                                   dtGrid.dataProvider = peeps;
                                   this.addElement(dtGrid);
                            }
                            ]]>

                • 5. Re: Add a dynamically created check box into DataGrid
                  sksmylachal Level 1

                  Hi Abhrodip,

                   

                             Thanks for your Valuable reply and Valuable time.

                   

                   

                    But We have one more concern like, the value of arrayCollection may vary each time.

                   

                   

                  The actual scenario is we are reading data from different table by just selecting the table name from a listbox.

                   

                  Each time when the table selected, the query will read all the columns of the table. So each time the column number and name may vary depends on the table selected.

                   

                  Each time we are reading the table using query and populating the ArrayCollection variable.

                   

                   

                  Then this arrayCollection variable is assign to dataProvider of DataGrid. And the dataGrid will automatically set the columns depemds on arrayCollection values.

                   

                   

                  In this scenario we need to add the first column with CheckBox.

                   

                   

                  Thanks and Regards,

                   

                  SREEJITH K S

                  • 6. Re: Add a dynamically created check box into DataGrid
                    sksmylachal Level 1

                    Hi Abhrodip,

                     

                     

                                   Hope you have understood our scenario and issue. If any query please give me a shout.

                     

                     

                     

                    Thanks and Regards,

                     

                    SREEJITH K S

                    • 7. Re: Add a dynamically created check box into DataGrid
                      Abhrodip Paul-cXMMf1 Level 2

                      The below code might work for you. Please give it a try.

                       

                      <![CDATA[
                                    import mx.controls.dataGridClasses.DataGridColumn;
                                      import mx.collections.ArrayCollection;
                                 
                                      import mx.controls.DataGrid;
                                      import mx.controls.CheckBox;
                                 
                                      [Bindable]
                                      private var dtGrid:DataGrid;
                                        [Bindable]
                                      private var chkBox:CheckBox;
                                 
                                      [Bindable]
                                      private var peeps:ArrayCollection;
                                 
                                  
                                 
                                      private function init():void
                                      {
                                         peeps = new ArrayCollection();
                                         peeps.addItem({firstName: "Handsome", lastName: "Dude", age: 24, sex: "male"});
                                         peeps.addItem({firstName: "Red", lastName: "Bloke", age: 25, sex: "male"});
                                         peeps.addItem({firstName: "Tall", lastName: "Guy", age: 25, sex: "male"});
                                         peeps.addItem({firstName: "Cute", lastName: "Girl", age: 24, sex: "female"});
                                         peeps.addItem({firstName: "Hot", lastName: "Chick", age: 24, sex: "female"});
                                         peeps.addItem({firstName: "Lazy", lastName: "Man", age: 25, sex: "male"});
                                        
                                         var dataGridColumn:DataGridColumn = new DataGridColumn("");
                                         dataGridColumn.itemRenderer = new ClassFactory( CheckBox );
                                
                                         dtGrid=new DataGrid();
                                         dtGrid.dataProvider = peeps;
                                         this.addElement(dtGrid);
                                        
                                         var tempColArray:Array = new Array();
                                         tempColArray[0] = dataGridColumn;
                                         for( var i:int = 0; dtGrid.columns.length > i; ++i )
                                         {
                                                 tempColArray[i + 1] = dtGrid.columns[i];   
                                         }
                                        
                                         dtGrid.columns = tempColArray;
                                         dtGrid.invalidateDisplayList();
                                  }
                                  ]]>

                      • 8. Re: Add a dynamically created check box into DataGrid
                        sksmylachal Level 1

                        Hi Abhrodip,

                         

                         

                                   You are great!!

                         

                                  This code worked very well for us.

                         

                               Thank you very much.

                         

                         

                         

                        Thanks and Regards,

                         

                        SREEJITH K S

                        • 9. Re: Add a dynamically created check box into DataGrid
                          sksmylachal Level 1

                          Hi Abhrodip,

                           

                           

                                     Is there any way to programmatically select these check box one by one.

                           

                           

                          Thanks and Regards,

                           

                          SREEJITH K S

                          • 10. Re: Add a dynamically created check box into DataGrid
                            FahaAK

                            hi..,


                            Im new to flex i just tried copying the above code and pasted it to see if this gives me what i wanted....,

                            it pretty much is what i wanted however when i try using chkbox variable it throws a "implicit coerrsion" error...,

                            I actually intend to display only thows rows that are checked in the checkbox in another state programmatically...,

                            please help me out...thanks in advance