6 Replies Latest reply on May 12, 2009 1:08 PM by Fredy Gadotti

    Editable Datagrid with LabelFunction Problems

    Fredy Gadotti

      Hi,

       

      I'm having problems with a datagrid with editable columns and labelFunctions.

      The problem is that when i leave the editable field by a way that wasnt with Escape Key, the datagrid apply again the labelFunction and destroy the number formattion adding a lot of numbers.

      When the field is filled with 0000,00 he just adds more zeros, like 0.000.000,0000 and keep going after do the same process.

      And when the field has a number different of zero, he apply the labelFunction then after he remove the labelFunction. After few times it just make the number vanish and the cell goes empty.

       

      I read the documentation about editing cell and tryed to implement a solution to prevent the cell be edited, without sucess.

       

      The source code goes attached for some advice on my problem.

       

      Thanks, Fredy.

        • 1. Re: Editable Datagrid with LabelFunction Problems
          Barna Biro Level 3

          Hi Fredy,

           

          I did not run over this problem before. Could you maybe replicate the problem in a new Flex project and post the source code so we can take a look at it? I've been working with stuff like this quite intensely the couple of weeks and I didn't have "the luck" to run over this issue.

           

          With best regards,

          Barna Biro

          • 2. Re: Editable Datagrid with LabelFunction Problems
            Fredy Gadotti Level 1

            Well,

             

            the source code to test the problems is this.

            Quite simple, just to simulate the problem.

            I might this is the information necessary.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                 layout="vertical"
                 backgroundColor="white">
            
                 <mx:Script>
                      <![CDATA[
                           import mx.events.DataGridEventReason;
                           import mx.controls.TextInput;
                           import mx.controls.dataGridClasses.DataGridColumn;
                           import mx.formatters.NumberFormatter;
                           import mx.events.DataGridEvent;
                           import mx.collections.ArrayCollection;
                           
                           [Bindable] private var collection:ArrayCollection = new ArrayCollection([
                                {code:1, description:"Item 1", value:0000},
                                {code:2, description:"Item 2", value:0000},
                                {code:3, description:"Item 3", value:0000},
                                {code:4, description:"Item 4", value:0000},
                                {code:5, description:"Item 5", value:0000},
                                {code:6, description:"Item 6", value:0000},
                                {code:7, description:"Item 7", value:0000}
                           ]);
                           
                           private function formatter(item:Object, column:DataGridColumn):String {
                              var nf:NumberFormatter = new NumberFormatter();
                              nf.decimalSeparatorTo = ",";
                              nf.thousandsSeparatorTo = ".";
                              nf.precision = 4;
                              return nf.format(item[column.dataField]);
                         }
                         
                         private function editEndHandler(event:DataGridEvent):void {
                            var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);
                            var newVal:String = myEditor.text;
                            var oldVal:String = event.currentTarget.editedItemRenderer.data[event.dataField]; 
                        
                             if (event.reason == DataGridEventReason.CANCELLED ||
                                  event.reason == DataGridEventReason.OTHER) {
                                return;
                            }
            
                        
                                if (oldVal == newVal) event.preventDefault();
                        }
                      ]]>
                 </mx:Script>
                 
                 <mx:Label text="Bug datagrid editavel com labelFunction"
                      fontSize="16" 
                      fontWeight="bold" />
                      
                 
                 <mx:DataGrid dataProvider="{collection}" 
                      editable="true"
                      itemEditEnd="editEndHandler(event)">
                      <mx:columns>
                           <mx:DataGridColumn headerText="Código"
                                dataField="code" 
                                editable="false"/>
                           <mx:DataGridColumn headerText="Descrição"
                                dataField="description" 
                                editable="false"/>
                           <mx:DataGridColumn headerText="Valor"
                                width="300"
                                dataField="value" 
                                labelFunction="formatter"
                                editable="true"/>
                      </mx:columns>
                 </mx:DataGrid>
            </mx:Application>
            
            
            • 3. Re: Editable Datagrid with LabelFunction Problems
              Flex harUI Adobe Employee

              If you have a labelfunction you will usually need an ITEM_EDIT_END handler that customizes writing the edited data back to the data object.

               

              If you don't want that item to be editable, you can turn it off by handling ITEM_EDIT_BEGINNING or setting editable=false on the column.

               

              Also note that any custom handling of ITEM_EDIT_* events usually requires a call to event.preventDefault().

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Editable Datagrid with LabelFunction Problems
                Fredy Gadotti Level 1

                Hi,

                 

                I solved a part of problem with some changes that i've made.

                Now there is no problem with values different of zero, when i got just number, its fine, but still have problems with zero values.

                The snippet code goes next, the bold part that was modified from the last sample.

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                     layout="vertical"
                     backgroundColor="white">
                
                     <mx:Script>
                          <![CDATA[
                               import mx.controls.Alert;
                               import mx.events.DataGridEventReason;
                               import mx.controls.TextInput;
                               import mx.controls.dataGridClasses.DataGridColumn;
                               import mx.formatters.NumberFormatter;
                               import mx.events.DataGridEvent;
                               import mx.collections.ArrayCollection;
                               
                               [Bindable] private var collection:ArrayCollection = new ArrayCollection([
                                    {code:1, description:"Item 1", value:4564654},
                                    {code:2, description:"Item 2", value:00000000},
                                    {code:3, description:"Item 3", value:00000000},
                                    {code:4, description:"Item 4", value:00000000},
                                    {code:5, description:"Item 5", value:00000000},
                                    {code:6, description:"Item 6", value:00000000},
                                    {code:7, description:"Item 7", value:00000000}
                               ]);
                               
                               private var formatter:NumberFormatter;
                               
                               private function formatterFunction(item:Object, column:DataGridColumn):String {
                                  if (formatter == null){
                                       formatter = new NumberFormatter();
                                       formatter.decimalSeparatorTo = ",";
                                       formatter.thousandsSeparatorTo = ".";
                                       formatter.decimalSeparatorFrom  = ",";
                                       formatter.thousandsSeparatorFrom = ".";
                                       formatter.useThousandsSeparator = true;
                                       formatter.precision = 4;
                                  }
                
                                  return formatter.format(item[column.dataField]);
                             }
                             
                             private function editEndHandler(event:DataGridEvent):void {
                                var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);
                                var newVal:Number = isNaN(Number(myEditor.text)) ? myEditor.text as Number : 0.0000;
                                var oldVal:Number = Number(event.currentTarget.editedItemRenderer.data[event.dataField]); 
                            
                                 // it solves the partial part of the problem, but still have some errors
                                 if (event.reason == DataGridEventReason.CANCELLED || event.reason == DataGridEventReason.OTHER) {
                                    return;
                                }
                                
                                if (oldVal == newVal ) {
                                         // i've tryed this, but the itemEditor still open
                                         event.preventDefault();
                                         // if I just put 'return', still have the same problem
                                         // return;
                                    }
                            }
                          ]]>
                     </mx:Script>
                     
                     <mx:Label text="Bug datagrid editavel com labelFunction"
                          fontSize="16" 
                          fontWeight="bold" />
                     
                     <mx:DataGrid dataProvider="{collection}" 
                          editable="true"
                          itemEditEnd="editEndHandler(event)">
                          <mx:columns>
                               <mx:DataGridColumn headerText="Código"
                                    dataField="code" 
                                    editable="false"/>
                               <mx:DataGridColumn headerText="Descrição"
                                    dataField="description" 
                                    editable="false"/>
                               <mx:DataGridColumn headerText="Valor"
                                    width="300"
                                    dataField="value" 
                                    labelFunction="formatterFunction"
                                    editable="true"/>
                          </mx:columns>
                     </mx:DataGrid>
                </mx:Application>
                
                

                 

                @Alex

                Thanks for the answer.

                I want to edit this column, but if there is no 'change' i dont want to apply again the label function and close the itemEditor.

                I've tryed to call event.preventDefault() but i dont know what to do next.

                Do you have some advice how to solve my problem?

                This is just happening when i got zero values on my datagrid =/

                 

                Thanks all for the answers.

                • 5. Re: Editable Datagrid with LabelFunction Problems
                  Flex harUI Adobe Employee

                  You may need to call destroyItemEditor when you call preventDefault()

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 6. Re: Editable Datagrid with LabelFunction Problems
                    Fredy Gadotti Level 1
                     private function editEndHandler(event:DataGridEvent):void {
                              var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);
                              var newVal:Number = isNaN(Number(myEditor.text)) ? myEditor.text as Number : 0.0000;
                              var oldVal:Number = Number(event.currentTarget.editedItemRenderer.data[event.dataField]); 
                                
                              if (event.reason == DataGridEventReason.CANCELLED || event.reason == DataGridEventReason.OTHER || oldVal == newVal) {
                                event.preventDefault();
                                grid.destroyItemEditor();
                              return;
                         }
                                    
                    }
                    

                     

                    Problem solved.

                    After call preventDefault, I destroy the item editor.

                     

                    Thanks, Fredy.