5 Replies Latest reply on Jun 22, 2009 8:01 AM by *Prashant Shelke*

    DataGrid with Custom Component not showing sub-components

    mrog70

      I'm hoping someone can enlighten me on this issue.

       

      I have a datagrid with one column which has an item renderer. It doesn't matter if the "text" data comes from a dataProvider or is static.

       

      If I do the following, only the first label will show up.


      <mx:DataGridColumn headerText="Column Title">
           <mx:itemRenderer>
                 <mx:Component>
                     <mx:VBox>

                          <mx:Label text="{data.data1}" />
                          <mx:Label text="{data.data2}" />
                     </mx:VBox>
                </mx:Component>
           </mx:itemRenderer>
      </mx:DataGridColumn>

       

      However, if I change the VBox to a HBox both labels will show up.

       

      <mx:DataGridColumn headerText="Column Title">
            <mx:itemRenderer>
                  <mx:Component>
                      <mx:HBox>

                          <mx:Label text="{data.data1}" />
                           <mx:Label text="{data.data2}" />
                      </mx:HBox>
                 </mx:Component>
            </mx:itemRenderer>
      </mx:DataGridColumn>

       

      I'm using:

       

      Flex Builder 3 Standalone
      Version: 3.0.214193

      OS: Vista

       

      Any ideas or comments would be appreciated.

        • 1. Re: DataGrid with Custom Component not showing sub-components
          KomputerMan.com Level 1

          Just a guess here... but is it possible that with that the whole VBox is not being displayed in the datagrid row due to the datagrid's row height?  If that is the case if you force your row height bigger do both controls show up?

           

          Now if you ever put radio buttons in there please let me know how you did it!!!  I would LOVE a working example of radio buttons in a datagrid!!!

           

          Have an Ordinary Day...

          KomputerMan   ~|:-)

          1 person found this helpful
          • 2. Re: DataGrid with Custom Component not showing sub-components
            *Prashant Shelke* Level 4

            set variableRowHeight="true" on dataGrid. VBox u r using is not getting properly displayed.

            • 3. Re: DataGrid with Custom Component not showing sub-components
              mrog70 Level 1

              Thanks for the reply KomputerMan.com. I've tried changing the dimensions of the VBox and no other labels appeared. Usually, when there is not enough room within the datagrid cell scrollbars will appear - you can experiment with the example below to see what I mean.

               

              As for radiobuttons in a datagrid, here you go. The DataGrid and its dataProvider are constructed in the same way you normally would.

               

              <mx:DataGridColumn headerText="Approve/Deny/Pending" width="170">
                  <mx:itemRenderer>
                      <mx:Component>
                          <mx:HBox height="27" paddingLeft="10">
                              <mx:Script>
                                  <![CDATA[
                                      private function isSelected(s:Object, val:String):Boolean {
                                         
                                          if ( s.toString() == val) {
                                              return true;
                                          } else {
                                              return false;
                                          }
                                      }
                                  ]]>
                              </mx:Script>
                              <mx:RadioButton groupName="approveType"
                                  id="approved"
                                  label="A"
                                  width="33"
                                  click="data.status='1'"
                                  selected="{isSelected(data.status, '1')}"/>
                              <mx:RadioButton groupName="approveType"
                                  id="denied"
                                  label="D"
                                  width="33"
                                  click="data.status='2'"
                                  selected="{isSelected(data.status, '2')}/>
                              <mx:RadioButton groupName="approveType"
                                  id="Pending"
                                  label="P"
                                  width="33"
                                  click="data.status='3'"
                                  selected="{isSelected(data.status, '3')}/>
                          </mx:HBox>
                      </mx:Component>
                  </mx:itemRenderer>
              </mx:DataGridColumn>