19 Replies Latest reply on Jun 29, 2010 9:17 AM by bocode3

    dropdownlist in datagrid

    bocode3

      Hello All,

       

      I'm a noob in flex. I'm trying to embed dropdownlist in datagrid cell. here's my code:

       

      [Bindable]

      private var employeeList:ArrayCollection;

      ]]>

      </fx:Script>

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

       

      <s:HTTPService id="employeeService"

         url="http://abc.com/abc/emp.xml"

         result="employeeList=employeeService.lastResult.employees.employee"/>

      </fx:Declarations>

      <mx:DataGrid  dataProvider="{employeeList}" width="300" editable="true">

      <mx:columns>

      <mx:DataGridColumn headerText="Reportees" dataField="loginid"/>

      <mx:DataGridColumn headerText="Projects" >

      <mx:itemRenderer>

      <fx:Component>

                  <s:DropDownList dataProvider="{employeeList}" >

       

      </s:DropDownList>

      </fx:Component>

      </mx:itemRenderer>

      </mx:DataGridColumn>

      </mx:columns>

       

      The xml that am requesting as follows:

      <?xml version="1.0" ?>

      <employees>

      <employee>

        <loginid>rambo</loginid>

        <name>ramboman</name>

        <projects>

         <project>

          <name>ATN</name>

          <id>34</id>

         </project>

         <project>

          <name>DTN</name>

          <id>43</id>

         </project>

         <project>

          <name>XTN</name>

          <id>54</id>

         </project>

        </projects>

        </employee>

      </employees>

       

      I want the projects to appear as a dropdown in the second column. How do i do that?

       

      Thanks in advance

      Bo

        • 1. Re: dropdownlist in datagrid
          rootsounds Level 4

          Looks like you've got the right approach. In what way is it failling? I suggest testing with a hard-coded data provider to remove a layer of complexity.

          • 2. Re: dropdownlist in datagrid
            VRPDeveloper Level 3

            Do you want project name to be appear in second column... Then you can specify in HTTPService resultformat="e4x" and in dropdownlist you have to specify

             

                  <s:DropDownList dataProvider="{employeeList.projects.project.name}" >

             

            Hope you got my point!!!

            • 3. Re: dropdownlist in datagrid
              bocode3 Level 1

              VRPdeveloper,

               

              Thank you for your reply. Yes i want the projects for each employee to appear in the second column as a dropdown list.

               

              I tried what you suggested and when i give the dataprovider value in the dropdownlist as you suggested, flex is not compiling and says that "1120: Access of undefined property employeeList" in the data provider.

               

              I simply changed the resultformat as e4x in the httpservice tag and changed the dataprovider in the dropdownlist tag. Doesn't work though.

               

              What do i do?

               

              Thank you very much for your help.

              Bo

              • 4. Re: dropdownlist in datagrid
                bocode3 Level 1

                RootSounds,

                 

                Thank you for your reply. This is the error i get when i try to create the dropdownlist for the projects in the second column for each employee:

                 

                "1120: Access of undefined property employeeList"

                 

                I tried giving the dropdownlist manually and it works but i want it create the dropdownlist dynamically for each employee.

                 

                Thank you very much for your help.

                Bo

                • 5. Re: dropdownlist in datagrid
                  rootsounds Level 4

                  Bind the DataGrid's dataProvider to {employeeService.lastResult.employees.employee}.

                  • 6. Re: dropdownlist in datagrid
                    VRPDeveloper Level 3

                    In HttpService result would be employeeService.lastResult.

                     

                    Take

                      [Bindable]

                    private var employeeList:XML;

                     

                    Now use in dropdownlist dataprovider as employeeList.employee.projects.project.name

                     

                    Also check using Charles or Fiddler, in what format you are getting response from HTTPService.

                    • 7. Re: dropdownlist in datagrid
                      bocode3 Level 1

                      Hi rootSounds,

                       

                      I did what you asked me to and this damn thing now says that employeeService is undefined property.

                       

                      What do i do now?

                       

                      Thanks for your help,

                      Bo

                      • 8. Re: dropdownlist in datagrid
                        bocode3 Level 1

                        Hello VRPDeveloper,

                         

                        Just did what you suggested. It still gives me the same error "1120:Access to undefined property employeeList". Am getting the data in XML format.

                         

                        What else could go wrong?

                         

                        Thanks for your help,

                        Bo

                        • 9. Re: dropdownlist in datagrid
                          rootsounds Level 4

                          Bind the DataGrid.dataProvider={employeeService.lastResult.employees.employee}.

                          Bind the DropDownList.dataProvider={data.projects.project.name}.

                          • 10. Re: dropdownlist in datagrid
                            bocode3 Level 1

                            Nope doesn't work :-(.

                             

                            Here is my current flex code. The xml remains as it is.

                             

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

                            <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" minWidth="955" minHeight="600"

                               creationComplete="employeeService.send()">

                            <fx:Declarations>

                            <!-- Place non-visual elements (e.g., services, value objects) here -->

                             

                            <s:HTTPService id="employeeService" url="http://abc.com:7500/emp.xml"/>

                            </fx:Declarations>

                            <mx:DataGrid  dataProvider="{employeeService.lastResult.employees.employee}" width="300" editable="true">

                            <mx:columns>

                            <mx:DataGridColumn headerText="Reportees" editable="false">

                            <mx:itemRenderer>

                            <fx:Component>

                            <mx:HBox>

                            <mx:Image source="http://abc.com:7500/add.png" />

                            <s:Label text="{data.loginid}"/>

                            </mx:HBox>

                            </fx:Component>

                            </mx:itemRenderer>

                            </mx:DataGridColumn>

                            <mx:DataGridColumn headerText="Projects" editable="false">

                            <mx:itemRenderer>

                            <fx:Component>

                             

                            <s:DropDownList dataProvider="{data.projects.project}" labelField="name"/>

                            </fx:Component>

                            </mx:itemRenderer>

                            </mx:DataGridColumn>

                            </mx:columns>

                             

                            </mx:DataGrid>

                            </s:Application>

                            The above code doesn't compile and gives the same error as it has been giving "1120:Access to undefined property data". I put data.projects.project.name without labelfield and data.projects.project and labelfield as name. Both of them dont work. Funnily enough, <s:Label text="{data.loginid}"/>, this is one the tags present in the above code,  works without an issue.
                            Thanks for your help,
                            Bo

                            • 11. Re: dropdownlist in datagrid
                              VRPDeveloper Level 3

                              You bind the data in datagrid as employeeService.lastResult

                               

                                  <mx:datagrid dataProvider={employeeService.lastResult}>

                               

                              Bind the DropDownList.dataProvider={data.employees.employee.projects.project.name}.

                               

                                or  <mx:datagrid dataProvider={employeeService.lastResult.employees.employee}>

                               

                                Bind the DropDownList.dataProvider={data.projects.project.name}.

                               

                              Now you will definately get it....

                               

                               

                               

                               

                              • 12. Re: dropdownlist in datagrid
                                VRPDeveloper Level 3

                                Don't use <s:DropDownList dataProvider="{data.projects.project}" labelField="name"/>

                                 

                                 

                                instead go for <s:DropDownList dataProvider="{data.projects.project.name}"/>

                                 

                                you will get it

                                1 person found this helpful
                                • 13. Re: dropdownlist in datagrid
                                  bocode3 Level 1

                                  VRPDeveloper, rootSounds,

                                   

                                  I was just going thru the one week adobe flex4 training hosted on the flex site and it says that i cannot use the <s:DropDownList> tag directly in the <mx:itemRenderer>. they are suggesting to use <s:MXDataItemRenderer> inside the <fx:component>, which is inside the <mx:itemrenderer> tag.

                                   

                                  So i did something like this:

                                   

                                  <mx:DataGridColumn headerText="Projects" editable="false">

                                  <mx:itemRenderer>

                                  <fx:Component>

                                  <s:MXDataGridItemRenderer>

                                   

                                  <s:DropDownList dataProvider="{data.projects.project}" labelField="name"/>

                                  </s:MXDataGridItemRenderer>

                                   

                                  </fx:Component>

                                   

                                  </mx:itemRenderer>

                                  </mx:DataGridColumn>

                                   

                                  and now it WORKS!! (though am yet to understand how).

                                   

                                  I'll now try VRPDeveloper's suggestions as well to see if they work.

                                   

                                  Thank you for your sustained help. You guys JUST ROCK!!!!

                                   

                                  Bo

                                  • 14. Re: dropdownlist in datagrid
                                    rootsounds Level 4

                                    Had a feeling that there might be an issue with the mashup of Flex3 and Spark components. Glad to hear that you figured it out.

                                    • 15. Re: dropdownlist in datagrid
                                      bocode3 Level 1

                                      Refer to the final post by me to get the correct answer. There was a mashup between mx and spark which led to the confusion and errors. Now it has been solved.

                                       

                                       

                                      • 16. Re: dropdownlist in datagrid
                                        rootsounds Level 4

                                        I saw. Was just saying that the possibility had come to mind, but the data provider issue was also present. Haven't made the move to Flex 4 yet, so I'm not too wise on all the details of it.

                                        1 person found this helpful
                                        • 17. Re: dropdownlist in datagrid
                                          VRPDeveloper Level 3

                                          Did you try what I suggest in my last post....

                                           

                                          Thats good that you figure out.

                                           

                                          Any helpful Answer should be marked as helpful so....

                                          • 18. Re: dropdownlist in datagrid
                                            bocode3 Level 1

                                            VRPDeveloper,

                                             

                                            I tried your suggestions and changed the code to the following:

                                             

                                            <mx:DataGrid  dataProvider="{employeeService.lastResult}" width="300" editable="true">

                                            <mx:columns>

                                            <mx:DataGridColumn headerText="Reportees" editable="false">

                                            <mx:itemRenderer>

                                            <fx:Component>

                                            <mx:HBox>

                                            <mx:Image source="http://sv-swtools:7500/rosy/add.png" />

                                            <s:Label text="{data.loginid}"/>

                                             

                                            </mx:HBox>

                                            </fx:Component>

                                            </mx:itemRenderer>

                                            </mx:DataGridColumn>

                                            <mx:DataGridColumn headerText="Projects" editable="false">

                                            <mx:itemRenderer>

                                            <fx:Component>

                                             

                                            <s:DropDownList dataProvider="{data.projects.project.name}" />

                                             

                                            </fx:Component>

                                            </mx:itemRenderer>

                                            </mx:DataGridColumn>

                                            </mx:columns>

                                             

                                            </mx:DataGrid>

                                             

                                            but it kept on flagging the code as "1120:Access to the undefined property data". This was before i tried the <s:MXDataItemRenderer> tag.

                                            • 19. Re: dropdownlist in datagrid
                                              bocode3 Level 1

                                              rootSounds/VRPdeveloper,

                                               

                                              The above post by me (the penultimate one) was not intended to you or VRPdeveloper. It was just for posterity sake :-), when somebody comes to this post looking for answers. I now need to flag you and VRP developer's post as helpful.

                                               

                                              Its because of people like you and VRPdeveloper, forums like these become popular :-).

                                               

                                              Thank you very very much

                                              Bo