6 Replies Latest reply on Nov 8, 2009 6:51 AM by virkof25

    Dragging a component to a Datagrid

    virkof25 Level 1

      Hi Everyone

       

      I am trying to to create a Datagrid which allows me to drop a label or a botton to a particular cell of the grid. Any ideas how can I do that?

       

      At the moment whenever I try to drop a label to the Datagrid a new empty row is created.

       

      Thanks!

        • 1. Re: Dragging a component to a Datagrid
          salem_b_a

          Hi,

          i think you have to create your own item rendrer for datagrid rows!

           

           

          hope this helps

           

          Salem Ben Afia

          • 2. Re: Dragging a component to a Datagrid
            virkof25 Level 1

            Sorry, I don't understand what you mean.

            • 3. Re: Dragging a component to a Datagrid
              salem_b_a Level 2

              ok,

               

              your datagrid seems to miunderstand the components you want to drag because the default type is Text i think,

              so you have to change the item renderer of your rows:

               

              here is a sample from the "Tour de Flex" :

              <!-- Another example of an inline component used as the ItemRenderer-->
                          <mx:DataGridColumn>
                              <mx:itemRenderer>
                                  <mx:Component>
                                      <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                          <mx:CheckBox label="Triband" selected="{data.triband}"/>
                                          <mx:CheckBox label="Camera" selected="{data.camera}"/>
                                          <mx:CheckBox label="Video" selected="{data.video}"/>
                                      </mx:VBox>
                                  </mx:Component>
                              </mx:itemRenderer>
                         </mx:DataGridColum/>

               

              now this column will receive a custom component like this vbox,

              in your case if you want to fill the same column with diffrent components, i suggest you make a canvas with all the types of components you want to drag, in the same place (for example x=0, y=0) and when dragging select the one you want to fill,

               


              i can't explain so clear, but i suggest you paste your code, and will try together, else try to look on itemRendrer usage

               

              Salem

              • 4. Re: Dragging a component to a Datagrid
                virkof25 Level 1

                Thank you!!

                 

                I  just copy that code to one of the columns to see how it works but it gives and error:

                 

                "Could not resolve <mx:Component> to a component implementation> "

                • 5. Re: Dragging a component to a Datagrid
                  Gregory Lafrance Level 6

                  Check your code, or better yet post it here.

                   

                  <mx:Component> must be inside the <mx:itemRenderer> tag.

                   

                  If this post answered your question or helped, please mark it as such.


                                    

                  • 6. Re: Dragging a component to a Datagrid
                    virkof25 Level 1

                    Hi Greg,

                     

                    This is the code. It stills gives me an error

                     

                    <mx:DataGrid x="113" y="52" id="dataGrid" dropEnabled="true" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getEmployeesResult.lastResult}" width="586" height="270" editable="false" variableRowHeight="true">
                              <mx:columns>
                                   <mx:DataGridColumn headerText="Staff" dataField="user_name" wordWrap="true" fontSize="12" fontWeight="bold" resizable="false" sortable="false"/>
                                   <mx:DataGridColumn headerText="Monday" dataField=""  />
                                   <mx:DataGridColumn headerText="Tuesday" dataField=""/>
                                   <mx:DataGridColumn headerText="Wednesday" dataField=""/>
                                   <mx:DataGridColumn headerText="Thursday" dataField=""/>
                                   <mx:DataGridColumn headerText="Friday" dataField=""/>
                                   <mx:DataGridColumn headerText="Saturday" dataField=""/>
                                   <mx:DataGridColumn headerText="Sunday" dataField=""/>
                                   <mx:DataGridColumn>
                                        <mx:itemRenderer>
                                             <mx:Component>
                                                  <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                                       <mx:CheckBox label="Triband" selected="{data.triband}"/>
                                                       <mx:CheckBox label="Camera" selected="{data.camera}"/>
                                                       <mx:CheckBox label="Video" selected="{data.video}"/>
                                                  </mx:VBox>
                                             </mx:Component>
                                        </mx:itemRenderer> 
                                   </mx:DataGridColumn>
                              </mx:columns>
                         </mx:DataGrid>