12 Replies Latest reply on Jun 4, 2010 1:32 AM by BhaskerChari

    DropDownList as renderer, how to pre-select a item from the DropDownList?

    alexlizn

      People in the original records have Height data stored as 1, 2, 3

       

      1 = Tall

      2 = Medium

      3 = Short

       

      The DropDownList in the data grid shows Height Name as options.  The requirement is when the page is first loaded, the DropDownList of each record should show the original Height Data. How to do it?

       

      Thanks for any ideas.

       

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- Simple example to demonstrate the MXDataGridItemRenderer control -->
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx">
          
          <fx:Declarations> 
              <!-- Data provider for the DataGrid -->
              <s:ArrayCollection id="dp1">
                  <fx:Object firstName="Alex" enumValue="1"/>
                  <fx:Object firstName="Britanny" enumValue="2"/>
                  <fx:Object firstName="Charlie" enumValue="3"/>
                  <fx:Object firstName="Douglas" enumValue="1"/>
                  <fx:Object firstName="Eric" enumValue="2"/>
                  <fx:Object firstName="Frank" enumValue="2"/>
              </s:ArrayCollection>        
          </fx:Declarations>
          
          <s:Panel width="75%" height="75%" title="MXDataGridItemRenderer Example" horizontalCenter="0" verticalCenter="0">
              <!-- Halo DataGrid -->
              <mx:DataGrid id="dg1" height="200" width="300" editable="true" dataProvider="{dp1}">
                  <mx:columns>            
                      <!-- Column 1 -->
                      <mx:DataGridColumn dataField="firstName" headerText="Name" />
                      <!-- Column 2 -->
                      <!-- itemRenderer used as the itemEditor via rendererIsEditor flag -->
                      <mx:DataGridColumn dataField="enumValue" headerText="Size" editorDataField="editValue" rendererIsEditor="true">
                          <mx:itemRenderer>
                              <fx:Component>                            
                                  <s:MXDataGridItemRenderer height="22" >     
                                      <!-- function to set the value selected by the user -->
                                      <fx:Script>
                                          <![CDATA[                                
                                              public function get editValue():* {
                                                  return ddl.selectedItem;
                                              }
                                          ]]>
                                      </fx:Script>
                                      <!-- DropDownList used as renderer and itemEditor -->
                                      <s:DropDownList id="ddl" width="100%" height="100%" labelField="HeightName" selectedItem="{data.enumValue}">
                                          <s:dataProvider>
                                              <s:ArrayList>
                                                  <fx:Object HeightID="1" HeightName="Tall" />
                                                  <fx:Object HeightID="2" HeightName="Medium" />
                                                  <fx:Object HeightID="3" HeightName="Short" />
                                              </s:ArrayList>
                                          </s:dataProvider>
                                      </s:DropDownList>
                                  </s:MXDataGridItemRenderer>
                              </fx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>                 
                  </mx:columns>
              </mx:DataGrid>    
          </s:Panel>          
      </s:Application>
      
        • 1. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
          BhaskerChari Level 4

          Hi,

           

          Try using the below code for the combobox:

           

          <s:DropDownList id="ddl" width="100%" height="100%" labelField="HeightName" selectedIndex="{data.enumValue-1}">
                                              <s:dataProvider>
                                                  <s:ArrayList>
                                                      <fx:Object HeightID="1" HeightName="Tall" />
                                                      <fx:Object HeightID="2" HeightName="Medium" />
                                                      <fx:Object HeightID="3" HeightName="Short" />
                                                  </s:ArrayList>
                                              </s:dataProvider>
                                          </s:DropDownList>


          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

          • 2. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
            alexlizn Level 1

            Bhasker,

            Thanks for your idea. But it doesn't work.

             

            First of all, this depends on the HeightID which is NOT likely to be 1, 2, 3. I put down 1, 2, 3 just for simple example.

             

            I'm looking forward to a general solution.  Drop Down List is very common to all web applications, I'm sure Flex can do it, but I just don't know how.

             

            Wish there are some more examples somewhere, ideally from Flex Development Team.

             

            any other ideas?

            • 3. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
              alexlizn Level 1

              I realized this has nothing to do with itemRenderer because itemRenderer controls how to show the options of the DropDownList, not which is selected option.

              • 4. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                Dajji Level 3

                Let me try to understand your requirement.

                 

                • You have a DataGrid in which one column has ComboBox as itemRenderer.
                • You fetch some data from backend when the application starts.
                • Now you want that data to be populated in the Grid which might be happening also.
                • However, you are unable to set the required item as selected in the ComboBox based on the data recieved.

                 

                Is this what the problem is?

                • 5. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                  alexlizn Level 1

                  Dajji, basically, yes.

                   

                  The dp1 is just like the ArrayCollection I get back from my database. It has this data:

                   

                          <s:ArrayCollection id="dp1">
                              <fx:Object firstName="Alex" enumValue="1"/>
                              <fx:Object firstName="Britanny" enumValue="2"/>
                              <fx:Object firstName="Charlie" enumValue="3"/>
                              <fx:Object firstName="Douglas" enumValue="1"/>
                              <fx:Object firstName="Eric" enumValue="2"/>
                              <fx:Object firstName="Frank" enumValue="2"/>
                          </s:ArrayCollection> 

                   

                   

                  within which,

                   

                  1 = Tall

                  2 = Medium

                  3 = Short

                   

                  I wanna my page to be like this after it starts:

                  Now of course, the DropDownLists are all blank after the page starts.

                   

                  target.JPG

                   

                  the question is how? I don't have enough knowledge of Flex, please help. Thanks!

                  • 6. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                    Dajji Level 3

                    To achieve this, you would need to create custom renderer. This may be an mxml component with combobox within that. Then you would need to override the data setter as shown below.

                     

                    override public function set data(value:Object):void{
                         //Your code to populate ComboBox and selecting one item
                    }
                    

                     

                    Following a a very row code snippet from my application which is used to achieve the same thing. This might not be very useful but will give you some idea.

                     

                    override public function set data(value:Object):void {
                         super.data = value;
                    
                         if (value != null){
                              _ar = String(value[_listData.dataField]).split(",");
                              for (var i:int=0; i<_ar.length; i++){
                                   _xmlDP.node.(@label == _ar[i]).@toggled = "true";
                              }
                         }
                    }
                    

                    1 person found this helpful
                    • 7. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                      BhaskerChari Level 4

                      Hi Alex,

                       

                      Your data provider for the DataGrid is having the following fields which include only firstName and enumValue attributes:

                       

                      <!-- Data provider for the DataGrid -->
                              <s:ArrayCollection id="dp1">
                                  <fx:Object firstName="Alex" enumValue="1"/>
                                  <fx:Object firstName="Britanny" enumValue="2"/>
                                  <fx:Object firstName="Charlie" enumValue="3"/>
                                  <fx:Object firstName="Douglas" enumValue="1"/>
                                  <fx:Object firstName="Eric" enumValue="2"/>
                                  <fx:Object firstName="Frank" enumValue="2"/>
                              </s:ArrayCollection>

                       

                      But for ComboBox you have the dataprovider as below which have HeightID and HeightName as atributes:

                       

                      <s:dataProvider>
                           <s:ArrayList>
                                <fx:Object HeightID="1" HeightName="Tall" />
                                <fx:Object HeightID="2" HeightName="Medium" />
                                <fx:Object HeightID="3" HeightName="Short" />
                           </s:ArrayList>
                      </s:dataProvider>

                      There are no common attributes between the two dataproviders, there should be one common field between the two so that you can set selected item in combobox based on that. I think the common field you are using is enumField.

                       

                      Write the below function in the itemrenderer script block below editValue() function you wrote and call setDDLSelectedItem() in the creationComplete event of DropDownList as shown below:(Here I have written the below function in Flex3 ---- here outerDocument is used to to  refer to outer dp1 ArrayCollection in ItemRenderer. I am not sure whether this is equivalent in Flex4)

                      private function setDDLSelectedItem():void
                                     {
                                      var dp1:ArrayCollection = outerDocument.dp1;
                                      for(var intLoop:int=0;intLoop<dp1.length;intLoop++)
                                      {
                                       if(data.enumValue == dp1.getItemAt(intLoop))
                                       {
                                        ddl.selectedIndex = intLoop;
                                        break;
                                       }
                                      }
                                     }

                       

                      <s:DropDownList id="ddl" width="100%" height="100%" labelField="HeightName" creationComplete="setDDLSelectedItem();">
                                    <s:dataProvider>
                                                              <s:ArrayList>
                                                                  <fx:Object HeightID="1" HeightName="Tall" />
                                                                  <fx:Object HeightID="2" HeightName="Medium" />
                                                                  <fx:Object HeightID="3" HeightName="Short" />
                                                              </s:ArrayList>
                                                          </s:dataProvider>
                                                      </s:DropDownList>

                       

                       

                      If this post answers your question or helps, please kindly mark it as such.


                      Thanks,

                      Bhasker Chari

                      1 person found this helpful
                      • 8. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                        alexlizn Level 1

                        I thought about that too when I read this article on itemRenderer

                         

                        http://www.adobe.com/devnet/flex/articles/itemrenderers_pt2_02.html

                         

                         

                        but I'm not sure if i can access DropDownList options' 'selected' poperty. I'm not even sure about the name of the property that controls a option selected or not.

                         

                        Dajji, Thanks for the tips.

                        will look more into it first thing tomorrow morning. gotta get some sleep.

                        • 9. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                          BhaskerChari Level 4

                          Hi Alex,

                           

                          Please find the working code for your problem. I have done it in Flex3...but you can do it same in Flex4.

                           

                          Since it is just a one function in your script. Check out the code below:

                           

                          <?xml version="1.0"?>
                          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                              <mx:Script>
                                  <![CDATA[
                                           
                                  ]]>
                              </mx:Script>

                          <mx:ArrayCollection id="dp1">
                                  <mx:Object firstName="Alex" enumValue="1"/>
                                  <mx:Object firstName="Britanny" enumValue="2"/>
                                  <mx:Object firstName="Charlie" enumValue="3"/>
                                  <mx:Object firstName="Douglas" enumValue="1"/>
                                  <mx:Object firstName="Eric" enumValue="2"/>
                                  <mx:Object firstName="Frank" enumValue="2"/>
                              </mx:ArrayCollection>  
                                 
                              <mx:Panel height="75%" width="75%"
                                  paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
                                  <mx:DataGrid width="100%" dataProvider="{dp1}">
                                   <mx:columns>
                                    <mx:DataGridColumn dataField="firstName" headerText="Name" />
                                    <mx:DataGridColumn>
                                     <mx:itemRenderer>
                                      <mx:Component>                        
                                       <mx:ComboBox creationComplete="setDDLSelectedItem();" width="100%" height="100%" labelField="HeightName" selectedItem="{data.enumValue}">
                                        <mx:dataProvider>
                                            <mx:Array>
                                                <mx:Object HeightID="1" HeightName="Tall" />
                                                <mx:Object HeightID="2" HeightName="Medium" />
                                                <mx:Object HeightID="3" HeightName="Short" />
                                            </mx:Array>
                                        </mx:dataProvider>
                                        <mx:Script>
                                        <![CDATA[
                                         import mx.collections.ArrayCollection;
                                        
                                         private function setDDLSelectedItem():void
                                         {
                                          var ddlDP:ArrayCollection = this.dataProvider as ArrayCollection;
                                          for(var intLoop:int=0;intLoop<ddlDP.length;intLoop++)
                                          {
                                           var v1:int = data.enumValue;
                                           var v2:int = ddlDP.getItemAt(intLoop).HeightID
                                          
                                           if(data.enumValue == ddlDP.getItemAt(intLoop).HeightID)
                                           {
                                            this.selectedIndex = intLoop;
                                            break;
                                           }
                                          }
                                         }
                                        ]]>
                                       </mx:Script>
                                    </mx:ComboBox>
                                      </mx:Component>
                                     </mx:itemRenderer>
                                    </mx:DataGridColumn>
                                   </mx:columns>
                                  </mx:DataGrid>
                              </mx:Panel>
                          </mx:Application>

                           

                          If this post answers your question or helps, please kindly mark it as such.


                          Thanks,

                          Bhasker Chari

                          • 10. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                            alexlizn Level 1

                            Bhaske,

                            good point, I didn't know DropDownList has creationComplete too.

                             

                            Well, I understand Flex more now. Everything is a component/object.

                             

                            Will try it out tomorrow.

                            Thanks!

                            • 11. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                              alexlizn Level 1

                              Bhasker,

                              didn't know you had a new post.

                               

                              I just tried it, and it works great!

                               

                              Thanks very much for rolling out this working code, I appreciate it very much!

                              • 12. Re: DropDownList as renderer, how to pre-select a item from the DropDownList?
                                BhaskerChari Level 4

                                Hi Alex,

                                 

                                I am glad that the solution worked for you...

                                 

                                All the best for rest of your work...

                                 

                                Happy Coding..

                                 

                                Thanks,

                                Bhasker Chari