8 Replies Latest reply on Jan 21, 2011 4:39 PM by Flex harUI

    DataGrid issue

    jfb00 Level 3

      Hi all,

      In my example below, if a user type "Actual" amount grater than "Estimate" amount I move the cursor to "Comment" field but I want the user not to leave the grid until something is type in the comment field. It works for few clicks but eventually it release the cursor from the "Comment" field.

      1. Why I cannot prevent the user to leave a field when it's empty?

      If I click  directly to the "Comment" field.

      2. How I can prevent to show the error? Only validate if "Actual" amount is grater than "Estimate" amount field.

      Any ideas?

      Thanks

       

      Johnny

       

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.controls.TextInput;
                  import mx.controls.dataGridClasses.DataGridColumn;
                  import mx.events.DataGridEvent;
                  import mx.events.DataGridEventReason;
                  import mx.formatters.DateFormatter;
                  
                  [Bindable]
                  private var dpFlat:ArrayCollection = new ArrayCollection([
                      {Territory:"Arizona", Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                      {Territory:"Arizona", Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
                      {Territory:"Central California", Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
                      {Territory:"Nevada", Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
                      {Territory:"Northern California", Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                      {Territory:"Northern California", Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
                      {Territory:"Southern California", Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                      {Territory:"Southern California", Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
                  ]);
                  
                  private function update_DG_values(event:DataGridEvent):void{
                      var grid:DataGrid = event.target as DataGrid; 
                      var rowIndex:Number = Number(event.rowIndex); 
                      var arrayLength:Number = dpFlat.length;
                      dpFlat.refresh();
                      myDG.validateNow();
                      if(event.dataField=="Actual"){
                          var newVal:Number = Number(TextInput(event.currentTarget.itemEditorInstance).text);
                          var oldVal:Number = Number(event.itemRenderer.data[event.dataField]); 
                          var estimateVal:Number = Number(event.currentTarget.editedItemRenderer.data["Estimate"]);
                          if (event.reason == DataGridEventReason.CANCELLED || event.reason == DataGridEventReason.OTHER || oldVal == newVal) {
                              event.preventDefault();
                              grid.destroyItemEditor();
                              return;
                          }
                          if (newVal > estimateVal){
                              grid.editedItemPosition = {rowIndex: rowIndex, columnIndex: 4};
                          }
                      }
                      if(event.dataField=="Comments"){
                          var newCom:String= TextInput(event.currentTarget.itemEditorInstance).text;
                          var oldCom:String = event.currentTarget.editedItemRenderer.data[event.dataField];
                          if (event.reason == DataGridEventReason.CANCELLED && newCom != " ") {
                              event.preventDefault();
                              grid.destroyItemEditor();
                              return;
                          }
                          if (newCom == " "){
                              event.preventDefault();
                              TextInput(grid.itemEditorInstance).errorString="Enter a valid string.";
                              return;
                          }
                      }
                  }
                  
              ]]>
          </mx:Script>
          <mx:DataGrid id="myDG" editable="true" width="100%" height="100%" dataProvider="{dpFlat}"
                       itemEditEnd="update_DG_values(event)">        
              <mx:columns>
                  <mx:DataGridColumn dataField="Territory" editable="false" />
                  <mx:DataGridColumn dataField="Territory_Rep" headerText="Territory Rep" editable="false"  />
                  <mx:DataGridColumn dataField="Actual" editable="true"  />
                  <mx:DataGridColumn dataField="Estimate" editable="false" />
                  <mx:DataGridColumn dataField="Comments" editable="true" />
              </mx:columns>
          </mx:DataGrid>
      </mx:Application>
      
      
        • 1. Re: DataGrid issue
          Flex harUI Adobe Employee

          Try setting editedItemPosition

          • 2. Re: DataGrid issue
            jfb00 Level 3

            How?

             

                                if (newCom == " "){
                                    event.preventDefault();
                                    TextInput(grid.itemEditorInstance).errorString="Enter a valid string.";
                                    grid.editedItemPosition = {rowIndex: rowIndex, columnIndex: 4};
                                    return;
                                }
            

             

            I try this and it is not working.

            Thanks for you reply Alex.

             

            Johnny

            • 3. Re: DataGrid issue
              Flex harUI Adobe Employee

              For keyboard navigation, I found that it is best to test for both "" and " "

              (blank and a single space).

               

              For mouse navigation, you may need to add some logic to reset the

              editedItemPosition in ITEM_EDIT_BEGINNING.  In the "Actual" case, you don't

              want to call preventDefault and will need to redirect there using

              ITEM_EDIT_BEGINNING, so I'd do the same to try to deal with any issues with

              blank comment fields.

              • 4. Re: DataGrid issue
                jfb00 Level 3

                Thanksfor your reply and help Alex.

                Got it, i will check for "" and " ".

                 

                I don't understand the second part.I can use ITEM_EDIT_BEGINNING. Why do i need to reset the editedItemPosition?

                When I set the editedItemPosition in "Actual" (if the Amount is grater then) it moves the cursor to the column 4 but I have to redirect using ITEM_EDIT_BEGINNING.??

                Can you explain this more please? I don't understand this behaviors.

                Thanks

                 

                Johnny

                • 5. Re: DataGrid issue
                  Flex harUI Adobe Employee

                  For me, your code did not work when clicking with the mouse.  If I enter a

                  large number in Actual and click in the Actual column on the next row, the

                  editor did not jump to the Comment because your code doesn't (and probably

                  shouldn't) call preventDefault.  I would try to remedy that by using

                  ITEM_EDIT_BEGINNING.

                  • 6. Re: DataGrid issue
                    jfb00 Level 3

                    Ups, my bad.

                    Ok, let me fix that first.

                    This is what I have in my itemEditBeginning

                    private function itemEditBeginning_Handler(event:DataGridEvent):void{
                                    var grid:DataGrid = event.target as DataGrid;
                                    var rowIndex:Number = Number(event.rowIndex); 
                                    
                                   if(event.dataField == "Actual" && event.reason != null){
                                       if (event.reason == DataGridEventReason.NEW_ROW){
                                            grid.editedItemPosition = {rowIndex: rowIndex, columnIndex: 4};
                                            //callLater(keepEdit, fCell);
                                       }
                                    }
                                }
                    

                     

                    Now in my itemEdit End I have:

                     private function update_DG_values(event:DataGridEvent):void{
                                    var grid:DataGrid = event.target as DataGrid; 
                                    var rowIndex:Number = Number(event.rowIndex); 
                                    var arrayLength:Number = dpFlat.length;
                                    var fCell:Array=[4, rowIndex];
                                    if(event.dataField=="Actual"){
                                        var newVal:Number = Number(TextInput(event.currentTarget.itemEditorInstance).text);
                                        var oldVal:Number = Number(event.itemRenderer.data[event.dataField]); 
                                        var estimateVal:Number = Number(event.currentTarget.editedItemRenderer.data["Estimate"]);
                                        
                                         if (event.reason == DataGridEventReason.CANCELLED || event.reason == DataGridEventReason.OTHER 
                                             || event.reason == DataGridEventReason.NEW_ROW) {
                                             if (newVal > estimateVal){
                                                 itemEditBeginning_Handler(event);
                                             }else {
                                                 grid.editedItemPosition = null;
                                             }
                                        } 
                                    }
                                }
                    

                     

                    I just trying to see if I can fix the issue when you click in the same column. It fires the itemEditBeginning but it doesn't fire the editedItemPosition, I try using callLater but still not working. Why is not setting editedItemPosition?

                    Thanks

                     

                    Johnny

                    • 7. Re: DataGrid issue
                      jfb00 Level 3

                      I am back to this issue. I try different things without luck.

                      Anybody else has an idea or maybe a link that I can see examples.

                      Thanks

                       

                      Johnny

                      • 8. Re: DataGrid issue
                        Flex harUI Adobe Employee

                        The below test case seems to be working ok for me:

                         

                        <?xml version="1.0"?>

                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

                            <mx:Script>

                                <![CDATA[

                                    import mx.collections.ArrayCollection;

                                    import mx.controls.TextInput;

                                    import mx.controls.dataGridClasses.DataGridColumn;

                                    import mx.events.DataGridEvent;

                                    import mx.events.DataGridEventReason;

                                    import mx.formatters.DateFormatter;

                                     

                                   

                                    private var dpFlat:ArrayCollection = new ArrayCollection([

                                        ,

                                        ,

                                        ,

                                        ,

                                        ,

                                        ,

                                        ,

                                         

                                    ]);

                                     

                                    private var expectedEditPosition:Object;

                                     

                                    private function update_DG_values(event:DataGridEvent):void{

                                        var grid:DataGrid = event.target as DataGrid;

                                        var rowIndex:Number = Number(event.rowIndex);

                                        var arrayLength:Number = dpFlat.length;

                                        dpFlat.refresh();

                                        myDG.validateNow();

                                        if(event.dataField=="Actual"){

                                            var newVal:Number =

                        Number(TextInput(event.currentTarget.itemEditorInstance).text);

                                            var oldVal:Number =

                        Number(event.itemRenderer.data[event.dataField]);

                                            var estimateVal:Number =

                        Number(event.currentTarget.editedItemRenderer.data["Estimate"]);

                                            if (event.reason == DataGridEventReason.CANCELLED ||

                        event.reason == DataGridEventReason.OTHER || oldVal == newVal) {

                                                event.preventDefault();

                                                grid.destroyItemEditor();

                                                return;

                                            }

                                            if (newVal > estimateVal){

                                                expectedEditPosition = grid.editedItemPosition =

                        {rowIndex: rowIndex, columnIndex: 4};

                                            }

                                        }

                                        if(event.dataField=="Comments"){

                                            var newCom:String=

                        TextInput(event.currentTarget.itemEditorInstance).text;

                                            var oldCom:String =

                        event.currentTarget.editedItemRenderer.data[event.dataField];

                                            if (event.reason == DataGridEventReason.CANCELLED &&

                        !(newCom == " " || newCom == "")) {

                                                event.preventDefault();

                                                grid.destroyItemEditor();

                                                return;

                                            }

                                            if (newCom == " " || newCom == ""){

                                                event.preventDefault();

                                            

                        TextInput(grid.itemEditorInstance).errorString="Enter a valid string.";

                                                expectedEditPosition = grid.editedItemPosition =

                        {rowIndex: rowIndex, columnIndex: 4};

                                                return;

                                            }

                                        }

                                    }

                                     

                                    private function

                        doubleCheckEditPosition(event:DataGridEvent):void

                                    {

                                        if (expectedEditPosition)

                                        {

                                            if (event.rowIndex != expectedEditPosition.rowIndex ||

                                                event.columnIndex !=

                        expectedEditPosition.columnIndex)

                                            {

                                                myDG.editedItemPosition = expectedEditPosition;

                                                event.preventDefault();

                                            }

                                            expectedEditPosition = null;

                                        }

                                    }

                                ]]>

                            </mx:Script>

                            <mx:DataGrid id="myDG" editable="true" width="100%" height="100%"

                        dataProvider=""

                                         itemEditEnd="update_DG_values(event)"

                        itemEditBeginning="doubleCheckEditPosition(event)">

                                <mx:columns>

                                    <mx:DataGridColumn dataField="Territory" editable="false" />

                                    <mx:DataGridColumn dataField="Territory_Rep"

                        headerText="Territory Rep" editable="false"  />

                                    <mx:DataGridColumn dataField="Actual" editable="true"  />

                                    <mx:DataGridColumn dataField="Estimate" editable="false" />

                                    <mx:DataGridColumn dataField="Comments" editable="true" />

                                </mx:columns>

                            </mx:DataGrid>

                        </mx:Application