16 Replies Latest reply on Oct 27, 2010 4:38 AM by welcomecan

    flex datagrid issue?

    welcomecan Level 1

      <mx:DataGridColumn    color="black" headerText="Folder Pattern"   minWidth="150" sortable="true"   >

       

                              <mx:itemRenderer>

       

                                  <fx:Component >

       

                                      <mx:HBox width="100%"

       

                                               horizontalAlign="left" verticalAlign="middle">

       

                                          <mx:Image source="{'images/edit_16.gif'}"  buttonMode="true"  toolTip="Edit the Folder Pattern" click="outerDocument.folderpatternimagclick()"/>

       

                                          <mx:Label text="{data.dfcp_name_pattern}" color="black"  />

       

                                      </mx:HBox>

       

                                  </fx:Component>

       

                                 

       

                              </mx:itemRenderer>

       

                              <mx:itemEditor>

       

                                  <fx:Component>

       

                                     

       

                                      <mx:Image source="{'images/edit_16.gif'}"  buttonMode="true"   toolTip="Edit the Folder Pattern" />

       

                                      <mx:TextInput text="{data.dfcp_name_pattern}" />

       

                                         

       

                                  </fx:Component>

       

                           

       

                                                  

       

                                      </mx:itemEditor>

       

                             

       

                              </mx:DataGridColumn>

        • 1. Re: flex datagrid issue?
          welcomecan Level 1

          i want edit text that column .that i need edit textbox near a image.but i got run time error. give solution?

          • 2. Re: flex datagrid issue?
            BhaskerChari Level 4

            Remove Image control form your itemEditor you will get rid of the run time error..

             

            See below...

             

            <mx:itemEditor>

                 <fx:Component>

                      <mx:TextInput text="{data.dfcp_name_pattern}" />

                 </fx:Component>

            </mx:itemEditor>

             

             

             

            Thanks,

            Bhasker

            • 3. Re: flex datagrid issue?
              welcomecan Level 1

              thats correct but i want to display textbox that time i need near image.

              • 4. Re: flex datagrid issue?
                BhaskerChari Level 4

                @welcomecan,

                 

                You can try this code...below...However you cannot get an image displayed in your itemEditor as you cannot image so you need to put only TextInput..

                 

                In the below code you get TextInout when you click on cell and if you change any text the cell will get edited and updated as well. But one problem I could see is when you click on a cell to edit and if you havent changed anything and press Tab key then the text in the cell is disappearing..

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" minWidth="955" minHeight="600">    
                <mx:Script>         
                <![CDATA[
                  import mx.collections.ArrayCollection;
                    
                  [Bindable]
                        private var fileListArray:ArrayCollection = new ArrayCollection([
                            {FileName: 'Acme', ContactPerson: 'Bob Jones', dfcp_name_pattern: "bizarre"},
                            {FileName: 'Allied', ContactPerson: 'Jane Smith', dfcp_name_pattern: "racous"}
                        ]);
                           
                   public function folderpatternimagclick():void
                   {
                   
                   }         

                ]]>    
                </mx:Script>    
                <mx:DataGrid id="dg_curtainmanager" dataProvider="{fileListArray}"  rowCount="{fileListArray.length}" showHeaders="true"  editable="true"  includeInLayout="false"  variableRowHeight="true" wordWrap="true"  width="100%" >
                  <mx:columns>
                   <mx:DataGridColumn color="black" dataField="dfcp_name_pattern" editorDataField="editedPattern" headerText="Folder Pattern"   minWidth="150" sortable="true">
                    <mx:itemRenderer>
                                    <mx:Component>
                                        <mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle">
                                            <mx:Image source="{'images/edit_16.gif'}"  buttonMode="true"  toolTip="Edit the Folder Pattern" click="outerDocument.folderpatternimagclick()"/>
                                            <mx:Label text="{data.dfcp_name_pattern}" color="black"  />                           
                                        </mx:HBox>
                                    </mx:Component>
                                </mx:itemRenderer>
                                <mx:itemEditor>
                                    <mx:Component>
                                        <mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle">
                                         <mx:Script>
                                                <![CDATA[
                                                    [Bindable]public var editedPattern:String="";
                                                   
                                                    public function textInputChangeHandler():void
                          {
                          editedPattern=textInput.text;          
                          }
                          public function textInputFocusOutHandler():void
                          {
                          editedPattern=textInput.text;          
                          }
                                                ]]>    
                                            </mx:Script>
                                            <mx:TextInput id="textInput" click="textInput.setFocus()" text="{data.dfcp_name_pattern}" change="textInputChangeHandler()" focusOut="textInputFocusOutHandler();"/>                          
                                        </mx:HBox>
                                    </mx:Component>
                                </mx:itemEditor>
                            </mx:DataGridColumn>
                  </mx:columns> 
                </mx:DataGrid>
                </mx:Application>

                • 5. Re: flex datagrid issue?
                  welcomecan Level 1

                  i got error at runtime

                  Property text not found on com.istmanagement.views.Filelist_foldercutrain_managerInnerClass4 and there is no default value.

                  • 6. Re: flex datagrid issue?
                    BhaskerChari Level 4

                    At which line you are getting error..??

                     

                     

                    Thanks,

                    Bhasker

                    • 7. Re: flex datagrid issue?
                      welcomecan Level 1

                      when i click column data


                      • 8. Re: flex datagrid issue?
                        BhaskerChari Level 4

                        Can you post your total code you are working now..??

                         

                        Thanks,

                        Bhasker

                        • 9. Re: flex datagrid issue?
                          welcomecan Level 1

                                     import com.istmanagement.views.*;
                                     
                                      import flashx.textLayout.edit.EditingMode;
                                     
                                      import flexlib.mdi.containers.MDICanvas;
                                     
                                      import mx.collections.ArrayCollection;
                                      import mx.controls.Alert;
                                      import mx.controls.Text;
                                      import mx.core.IFlexDisplayObject;
                                      import mx.events.CloseEvent;
                                      import mx.events.DataGridEvent;
                                      import mx.events.ListEvent;
                                      import mx.managers.PopUpManager;
                                      [Bindable] 
                                      private var fileListArray:ArrayCollection ;

                           

                              <mx:Panel id="pnl_curtain" cornerRadius="6"    headerHeight="0"   width="100%"  borderColor="#080808"   borderAlpha="1.0"  chromeColor="#B7B7B7" backgroundColor="#DEDEDE">
                                     
                                      <mx:DataGrid id="dg_curtainmanager" showHeaders="true"  editable="true"  includeInLayout="false" dataProvider="{fileListArray}"  creationComplete=""  variableRowHeight="true"   wordWrap="true"  rowCount="{fileListArray.length}"  width="100%"  >


                                          <mx:columns>
                                              <mx:DataGridColumn id="dgclum_depth" headerText="Depth"  editable="false" width="110" minWidth="65" >

                           

                          <mx:DataGridColumn    color="black" headerText="Folder Pattern"  editorDataField="text"  minWidth="150" sortable="true"   >
                                                  <mx:itemRenderer>
                                                      <fx:Component >
                                                          <mx:HBox width="100%"
                                                                   horizontalAlign="left" verticalAlign="middle">
                                                              <mx:Image source="{'images/edit_16.gif'}"  buttonMode="true"  toolTip="Edit the Folder Pattern" click="outerDocument.folderpatternimagclick()"/>
                                                              <mx:Label text="{data.dfcp_name_pattern}" color="black"  />
                                                          </mx:HBox>
                                                      </fx:Component>
                                                     
                                                  </mx:itemRenderer>
                                                  <mx:itemEditor>
                                                      <fx:Component>
                                                         
                                                          <mx:HBox width="100%"
                                                                   horizontalAlign="left" verticalAlign="middle">
                                                              <fx:Script>
                                                                  <![CDATA[
                                                                      [Bindable]
                                                                      public var editedPattern:String="";
                                                                     
                                                                      public function textInputChangeHandler():void
                                                                      {
                                                                          editedPattern=textInput.text;         
                                                                      }
                                                                      public function textInputFocusOutHandler():void
                                                                      {
                                                                          editedPattern=textInput.text;         
                                                                      }
                                                                  ]]>
                                                              </fx:Script>
                                                          <mx:TextInput  id="textInput"  change="textInputChangeHandler()"  focusOut="textInputFocusOutHandler();" text="{data.dfcp_name_pattern}" />
                                                              </mx:HBox>
                                                      </fx:Component>
                                               
                                                                      
                                                          </mx:itemEditor>

                           

                                                  </mx:DataGridColumn>

                          </mx:Datagrid>

                          </mx:panel>

                           

                           

                          i am getting error when i click the column data

                          • 10. Re: flex datagrid issue?
                            welcomecan Level 1

                            i think textInput id is problem

                            • 11. Re: flex datagrid issue?
                              BhaskerChari Level 4

                              @WelcomeCan,

                               

                              The problem is not with the texinout id but ...the editorDataField...

                               

                              In my code I have set editorDataField="editedPattern" but you have changed it to editorDataField="text" that is the reason the error is coming..

                               

                              You also missed another one which is setting dataField property for your DataGrid Column....So set dataField="dfcp_name_pattern" also on

                              DataGridColumn..

                               

                              So your DataGrid column should look like as below..

                               

                               

                              <mx:DataGridColumn color="black" headerText="Folder Pattern" dataField="dfcp_name_pattern" editorDataField="editedPattern"  minWidth="150" sortable="true">

                              Thanks,

                              Bhasker

                               

                               

                              • 12. Re: flex datagrid issue?
                                welcomecan Level 1

                                ok thats correct.but my question

                                 

                                when i click column data that time display one image and beside one text box editable.

                                 

                                but now display only textbox editable where is image??????????

                                • 13. Re: flex datagrid issue?
                                  BhaskerChari Level 4

                                  You cannot display image when you edit...You can only edit text property...but noit images.

                                   

                                  However I dont think you want to edit image as well...However we can edit image name but we can't show image and textInput while editing..

                                   

                                  Hope this is clear.

                                   

                                  Thanks,

                                  Bhasker

                                  1 person found this helpful
                                  • 14. Re: flex datagrid issue?
                                    welcomecan Level 1

                                    ok.thanks for replay

                                    • 15. Re: flex datagrid issue?
                                      BhaskerChari Level 4

                                      @welcomecan,

                                       

                                      You can display the Image along with the TextInput you just include the image tag in the itemEditor as well..

                                       

                                      Replace your itemEditor with the below one..

                                       

                                      <mx:itemEditor>
                                                   <fx:Component>
                                                       <mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle">
                                                           <fx:Script>
                                                               <![CDATA[
                                                                   [Bindable]
                                                                   public var editedPattern:String="";
                                                                  
                                                                   public function textInputChangeHandler():void
                                                                   {
                                                                       editedPattern=textInput.text;         
                                                                   }
                                                               ]]>
                                                           </fx:Script>
                                                       <mx:Image source="{'images/edit_16.gif'}"  buttonMode="true"  toolTip="Edit the Folder Pattern" click="outerDocument.folderpatternimagclick()"/>
                                                       <mx:TextInput  id="textInput"  change="textInputChangeHandler()"  text="{data.dfcp_name_pattern}" />
                                                           </mx:HBox>
                                                   </fx:Component>
                                            </mx:itemEditor>

                                       

                                       

                                      Thanks,

                                      Bhasker

                                      • 16. Re: flex datagrid issue?
                                        welcomecan Level 1

                                        now i got thanks