20 Replies Latest reply on Nov 21, 2011 10:11 AM by Flex harUI

    Datagrid and selectedItem

    jfb00 Level 3

      Hi,

      I have select an item using itemClick event of an advanced data grid like:

      my_adg.selectedItem = my_adg.dataProvider[event.rowIndex];

       

      If I check later my_adg.selectedIndex I see the index value but if i check a property like:

      my_adg.selectedItem.CUSTOMER_ID; 

      The result of the debugger of my_adg.selectedItem is null.

      Any ideas why? It should have the item object.

      Thanks!

        • 1. Re: Datagrid and selectedItem
          jfb00 Level 3

          Hi,

          I have two datagrids and I want to sync the scroll in both datagrids and also the item selected.

          Here are my funcitons:

           

          private function select_adg_row(event:ListEvent):void{

                          var rowIndex:Number = event.rowIndex;

           

                          first_dg.selectedIndex = rowIndex;

                          first_dg.validateNow();

           

                          second_dg.selectedItem = second_dg.dataProvider[rowIndex];

                          second_dg.validateNow();

                      }

           

                      private function dg_scrollHandler(event:ScrollEvent):void

                      {

                          if (event.currentTarget.name == "first_dg"){

                              second_dg.validateNow();

                              second_dg.verticalScrollPosition = first_dg.verticalScrollPosition;

                              second_dg.horizontalScrollPosition = first_dg.horizontalScrollPosition;

           

                          }

                          if (event.currentTarget.name == "second_dg"){

                              first_dg.validateNow()

                              first_dg.verticalScrollPosition = second_dg.verticalScrollPosition;

                              first_dg.horizontalScrollPosition = second_dg.horizontalScrollPosition;

                          }

                      }

           

          Like I said before, the item is not selected and now the scrolls disappear.

          Any body had the same experience before?

          Thanks

          • 2. Re: Datagrid and selectedItem
            Flex harUI Adobe Employee

            Might be rowIndex + verticalScrollPosition.

            • 3. Re: Datagrid and selectedItem
              jfb00 Level 3

              What do you mean Alex?

              I dont understand.

              Thanks

              • 4. Re: Datagrid and selectedItem
                Flex harUI Adobe Employee

                I don’t think rowIndex is the position in the datagrid, I think it is the row on the screen.  Actually, I think there is a reference to the itemRenderer in the event, and its data property should be what you want.

                • 5. Re: Datagrid and selectedItem
                  jfb00 Level 3

                  I use this:

                  my_adg.selectedItem = event.itemRenderer.data;

                  The same issue, still null.

                  Any other property? Maybe I need to do this in different way?

                  Why the scrollbars doesn't show in the target datagrid after I use the scroll in the source or first datagrid?

                  Thanks

                  • 6. Re: Datagrid and selectedItem
                    Zolotoj Level 3

                    Did you try my_adg.selectedItem.@CUSTOMER_ID;

                    • 7. Re: Datagrid and selectedItem
                      jfb00 Level 3

                      I try different ways and still not working. I don't know why selectedItem doesn't accept any values.

                       

                      Best

                      • 8. Re: Datagrid and selectedItem
                        Flex harUI Adobe Employee

                        Is the object you are assigning actually in the dataProvider?  Or is it a clone or copy?

                        • 9. Re: Datagrid and selectedItem
                          jfb00 Level 3

                          Yes, It is in the dataprovider. This is itemClick event from the datagrid.

                          In event.itemRenderer.data I can see the data.

                          Thanks

                          • 10. Re: Datagrid and selectedItem
                            Flex harUI Adobe Employee

                            Is it in the destination dataProvider?

                             

                            Post a simple test case.

                            • 11. Re: Datagrid and selectedItem
                              jfb00 Level 3

                              Alex,

                              Doing my test case i found that the issue is doing a sort on the datagrid. If I don't perform the sort it works fine.

                              Why is the sort affecting the array?

                               

                              Here is my sort funciton:

                              second_dg.dataProvider = acSample;

                              sortADG(second_dg, "Fname");

                               

                              private function sortADG(adg:AdvancedDataGrid, field:String):void{

                                              var sort:Sort = new Sort();

                                              sort.fields = [new SortField(field)];

                                              sort.fields[0].numeric = false;

                                              adg.dataProvider.sort = sort;

                                              adg.dataProvider.refresh();

                                          }

                               

                              Thanks

                              • 12. Re: Datagrid and selectedItem
                                Flex harUI Adobe Employee

                                Don’t know for sure.  I’d have to see a test case.  I do know that a sort changes the way we try to find an object in the dataProvider, and setting selectedItem is therefore going to go down a different code path.

                                • 13. Re: Datagrid and selectedItem
                                  jfb00 Level 3

                                  Also, when i jump from one tab to the other, the scroll bar disappear ot it is cut off. Any ideas?

                                  Thanks!

                                  Here is my test sample:

                                  <?xml version="1.0" encoding="utf-8"?>

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

                                                  layout="vertical"

                                                  verticalAlign="middle"

                                                  backgroundColor="white"

                                                  initialize="getData()">

                                     

                                      <mx:Script>

                                          <![CDATA[

                                              import mx.collections.ArrayCollection;

                                              import mx.collections.Sort;

                                              import mx.collections.SortField;

                                              import mx.controls.AdvancedDataGrid;

                                              import mx.controls.Alert;

                                              import mx.events.ListEvent;

                                              import mx.events.ScrollEvent;

                                              import mx.rpc.events.FaultEvent;

                                              import mx.rpc.events.ResultEvent;

                                             

                                              [Bindable] private var acSample:ArrayCollection = new ArrayCollection([

                                                  {Fname: "Kranthi", Lname:"Kata", dob:"21/10/1972", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Vasanth", Lname:"Lola", dob:"12/01/1980", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Vasanth", Lname:"Lola", dob:"12/01/1980", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Sample1", Lname:"Lola", dob:"12/01/1982", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Basanth", Lname:"Viola",dob:"5/01/1980",  Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Basanth", Lname:"Chuck",dob:"5/01/1980",  Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Sample2", Lname:"Viola",dob:"2/06/1985",  Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Manoj",   Lname:"Pat",  dob:"16/09/1978", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "John M",  Lname:"Mela", dob:"15/01/1974", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Kranthi", Lname:"Kata", dob:"21/10/1972", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Vasanth", Lname:"Lola", dob:"12/01/1980", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Vasanth", Lname:"Lola", dob:"12/01/1980", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Sample1", Lname:"Lola", dob:"12/01/1982", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Basanth", Lname:"Viola",dob:"5/01/1980",  Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Basanth", Lname:"Chuck",dob:"5/01/1980",  Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Sample2", Lname:"Viola",dob:"2/06/1985",  Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Manoj",   Lname:"Pat",  dob:"16/09/1978", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "John M",  Lname:"Mela", dob:"15/01/1974", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Kranthi", Lname:"Kata", dob:"21/10/1972", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Vasanth", Lname:"Lola", dob:"12/01/1980", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Vasanth", Lname:"Lola", dob:"12/01/1980", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Sample1", Lname:"Lola", dob:"12/01/1982", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Basanth", Lname:"Viola",dob:"5/01/1980",  Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Basanth", Lname:"Chuck",dob:"5/01/1980",  Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Sample2", Lname:"Viola",dob:"2/06/1985",  Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "Manoj",   Lname:"Pat",  dob:"16/09/1978", Amount_1:5000,  Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                                  {Fname: "John M",  Lname:"Mela", dob:"15/01/1974", Amount_1:10000, Amount_2:0, Amount_3:0, Rate_1:23, Rate_2:43, Rate_3:0},

                                              ]);

                                             

                                              private function getData():void{

                                                  first_dg.dataProvider = acSample;

                                                  first_dg.validateNow();

                                                  sortADG(first_dg, "Fname");

                                                 

                                                  second_dg.dataProvider = acSample;

                                                  second_dg.validateNow();

                                                  sortADG(second_dg, "Fname");

                                              }

                                             

                                              private function sortADG(adg:AdvancedDataGrid, field:String):void{

                                                  var sort:Sort = new Sort();

                                                  sort.fields = [new SortField(field)];

                                                  sort.fields[0].numeric = false;

                                                  adg.dataProvider.sort = sort;

                                                  adg.dataProvider.refresh();

                                              }

                                             

                                              private function select_adg_row(event:ListEvent):void{

                                                  var rowIndex:Number = event.rowIndex;

                                                 

                                                  first_dg.selectedIndex = rowIndex;

                                                  first_dg.validateNow();

                                                 

                                                  second_dg.selectedIndex = rowIndex;

                                                  //second_dg.selectedItem = event.itemRenderer.data; //second_dg.dataProvider[rowIndex];

                                                  second_dg.validateNow();

                                              }

                                             

                                              private function dg_scrollHandler(event:ScrollEvent):void

                                              {

                                                  if (event.currentTarget.name == "first_dg"){

                                                      second_dg.validateNow();

                                                      second_dg.verticalScrollPosition = first_dg.verticalScrollPosition;

                                                      second_dg.horizontalScrollPosition = first_dg.horizontalScrollPosition;

                                                      second_dg.validateNow();

                                                  }

                                                  if (event.currentTarget.name == "second_dg"){

                                                      first_dg.validateNow();

                                                      first_dg.verticalScrollPosition = second_dg.verticalScrollPosition;

                                                      first_dg.horizontalScrollPosition = second_dg.horizontalScrollPosition;

                                                      first_dg.validateNow();

                                                  }

                                              }

                                             

                                              private function editForm(AC:ArrayCollection, DG:AdvancedDataGrid):void{

                                                  if (AC.length == 0){

                                                      Alert.show("No rows to be edited")}

                                                  else if (DG.selectedItem == null){

                                                      Alert.show("Not row was selected")

                                                  }else{

                                                      Alert.show("Select Item: " + DG.selectedItem.Fname)

                                                  }

                                              }

                                             

                                          ]]>

                                      </mx:Script>

                                     

                                      <mx:TitleWindow x="0" width="100%" height="40%" layout="absolute" title="Sample ADG" horizontalCenter="0" verticalCenter="0" >

                                          <mx:TabNavigator id="my_tn" x="0" y="0" width="100%" height="100%" creationPolicy="all">

                                              <mx:Canvas label="FIRST" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" creationPolicy="all">

                                                  <mx:HBox>

                                                      <mx:Button label="Edit" click="editForm(acSample, second_dg)" />

                                                  </mx:HBox>

                                                  <mx:AdvancedDataGrid scroll="dg_scrollHandler(event)" id="first_dg" width="100%" top="30" bottom="10" left="10" right="10" itemClick="select_adg_row(event)"

                                                                                  editable="false" headerWordWrap="true" textAlign="left" horizontalScrollPolicy="auto"

                                                                                  sortableColumns="false" resizableColumns="true">

                                                      <mx:columns>

                                                          <mx:AdvancedDataGridColumn headerText="First Name" dataField="Fname" textAlign="left"  width="150" />

                                                          <mx:AdvancedDataGridColumn headerText="Last Name" dataField="Lname" textAlign="left"  width="150"  />

                                                          <mx:AdvancedDataGridColumn headerText="BDay" dataField="dob" textAlign="left"  width="100" />

                                                      </mx:columns>

                                                  </mx:AdvancedDataGrid>

                                              </mx:Canvas>

                                              <mx:Canvas label="SECOND" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" creationPolicy="all">

                                                  <mx:AdvancedDataGrid scroll="dg_scrollHandler(event)" id="second_dg" width="100%" top="30" bottom="10" left="10" right="10" itemClick="select_adg_row(event)"

                                                                                  editable="false" headerWordWrap="true" textAlign="left" horizontalScrollPolicy="auto"

                                                                                  sortableColumns="false" resizableColumns="true">

                                                      <mx:columns>

                                                          <mx:AdvancedDataGridColumn headerText="ID" dataField="ID" width="0" visible="false"  />

                                                          <mx:AdvancedDataGridColumn headerText="First Name" dataField="Fname" textAlign="left"  width="150" />

                                                          <mx:AdvancedDataGridColumn headerText="Last Name" dataField="Lname" textAlign="left"  width="150" />

                                                          <mx:AdvancedDataGridColumn headerText="BDay" dataField="dob" textAlign="left"  width="100" />

                                                      </mx:columns>

                                                  </mx:AdvancedDataGrid>

                                              </mx:Canvas>

                                          </mx:TabNavigator>

                                      </mx:TitleWindow>

                                  </mx:Application>

                                  • 14. Re: Datagrid and selectedItem
                                    Flex harUI Adobe Employee

                                    I’m not seeing any problem with your test case.  What are the steps to reproduce?

                                    • 15. Re: Datagrid and selectedItem
                                      jfb00 Level 3

                                      Hi Alex,

                                      Sorry, I forgot to explain.

                                      Please try to replace this code:

                                      second_dg.selectedIndex = rowIndex;

                                      //second_dg.selectedItem = event.itemRenderer.data; //second_dg.dataProvider[rowIndex];

                                      FOR

                                      //second_dg.selectedIndex = rowIndex;

                                      second_dg.selectedItem = event.itemRenderer.data; //second_dg.dataProvider[rowIndex];

                                       

                                      At the time of click Edit, it will show message that it was not record selected because selectedIem is null.

                                      If you comment the sort line "sortADG(first_dg, "Fname");" , it works.

                                      Thanks

                                      • 16. Re: Datagrid and selectedItem
                                        Flex harUI Adobe Employee

                                        I am not able to reproduce the problem.

                                        • 17. Re: Datagrid and selectedItem
                                          jfb00 Level 3

                                          Really, I am using Flash builder 3 and Flez SDK 3.5.

                                          What are you using?

                                          Thanks Alex

                                          • 18. Re: Datagrid and selectedItem
                                            Flex harUI Adobe Employee

                                            I generally assume folks are running the latest version.

                                             

                                            It looks like there was a bug in 3.x that is fixed in 4.

                                            • 19. Re: Datagrid and selectedItem
                                              jfb00 Level 3

                                              gggg... I need to move to 4.

                                              Can I use SDK 4.5 or the latest under FBuilder 4?

                                              Thanks!

                                              • 20. Re: Datagrid and selectedItem
                                                Flex harUI Adobe Employee

                                                I don’t think that is officially supported.