1 Reply Latest reply on Oct 10, 2011 6:55 PM by Raja Thannasi

    Add and remove option in DataGrid in flex

    Raja Thannasi Level 1

      Dear Friends,

                      I have a datagrid which we can add a row and remove the row.In this DataGrid when i clicked to add new row im getting check Box at first,which i dont want to need at first.Pls help me regarding this.Please find the screen shot and code here.

      <fx:Script>

              <![CDATA[

      [Bindable]

                  private var archiveData:ArrayCollection;

      private static const ADD_ARCH_ROW:String = "Click to Add Archive Row";

                 

       

                  private function checkArchiveEditBegin(e:DataGridEvent):void

                  {                   

                      if(e.rowIndex == archiveData.length - 1 && e.columnIndex != 1)                       

                          e.preventDefault();

                  }

                  private function ediArchivetEnd(e:DataGridEvent):void

                  {                       

                       var item:Object = archiveGrid.dataProvider.getItemAt(e.rowIndex);           

                      if(e.rowIndex == archiveData.length - 1)

                      {

                          var txtIn:TextInput =     TextInput(e.currentTarget.itemEditorInstance);                   

                          var dt:Object = e.itemRenderer.data;                   

                          if(txtIn.text != ADD_ARCH_ROW)

                          {

                              archiveData.addItemAt(new archiveDetails(txtIn.text, "", ""), e.rowIndex);

                          }

                         

                          archiveGrid.destroyItemEditor();                                   

                          e.preventDefault();

                      }

                  }

                 

                  public function deleteArchiveRow(e:MouseEvent):void{                           

                      archiveData.removeItemAt(archiveGrid.selectedIndex);

                      archiveData.refresh();               

                     

                  }

                  protected function AddArchiveRows(event:MouseEvent):void

                  {

                      archiveData = new ArrayCollection();                       

                      archiveData.addItem({archiveFrom: ADD_ARCH_ROW});               

                      archiveGrid.visible = true;               

                  }                       

                  protected function button2_clickHandler(event:MouseEvent):void

                  {

                      if(archiveData.length!=1){

                      archiveData.removeItemAt(archiveGrid.selectedIndex);

                  }datagird.PNG

      <mx:DataGrid id="archiveGrid" dataProvider="{myData}" x="399" y="6" width="539" height="169" visible="false" sortableColumns="false" editable="true"

                       itemEditBeginning="checkArchiveEditBegin(event)"

                       itemEditEnd="ediArchivetEnd(event)">

              <mx:columns>

                  <mx:DataGridColumn id="arc" headerText="" width="50" editable="false">

                      <mx:itemRenderer>

                          <fx:Component>

                              <mx:CheckBox textAlign="center" click="outerDocument.deleteArchiveRow(event)"/>

                          </fx:Component>

                      </mx:itemRenderer>

                  </mx:DataGridColumn>

                  <mx:DataGridColumn headerText="FROM" dataField="archiveFrom" width="300"/>

                  <mx:DataGridColumn headerText="TO" dataField="archiveTo" width="125"/>

                  <mx:DataGridColumn headerText="DAYS" dataField="archiveDays" width="100"/>           

              </mx:columns>

          </mx:DataGrid>

      <s:Button x="444" y="266" label="Delete" click="button2_clickHandler(event)"/>