13 Replies Latest reply on Apr 20, 2006 3:17 PM by ntsiii

    Help with datagrid and form

    alfie9 Level 1
      Hi everyone, I need help with my datagrid and form. I have two datagrids. The first datagrid is populated by different hardware types. The second datagrid is for when a hardware type is selected from the first datagrid (hardware type datagrid) the second datagrid is populated by the type of hardware selected from first datagrid. The second datagrid is also used to populate the form (text inputs) with informations according to selected hardware model. Everything works fine, until I select another type of hardware from the first datagrid, my form suddenly gets populated with an "undefined" (in my textinputs). I don't know why i'm getting the "undefined" in my textinputs. If someone could help me please, I would really appreciate it.

      Thanks in advance
      alfie
        • 1. Re: Help with datagrid and form
          TIPLVinay
          if u r populating the sec DG and form at once. then there should not be any problem if ur using binding.

          If form is populated from server.then use binding.
          else selected DG item.

          If form is populated from second DG then clear the Form when user clicks first DG.
          • 2. Help with datagrid and form
            alfie9 Level 1
            I bind the hardware type and hardware type id with the first datagrid and everything else in second datagrid.

            I tried to clear the form when user clicks the first DG. I did this by doing mouseDown="resetSpecs()" but with no luck. I put my application in the testing server, maybe you can check it out and maybe you can tell me what is wrong with it. I would really appreciate any help. Here is the link flex99.onepos.com/Flex/Hardware/index.mxml


            thanks
            -a
            • 3. Re: Help with datagrid and form
              ntsiii Level 3
              Post a minimal, working sample, I'll take a look.

              Tracy
              • 4. Re: Help with datagrid and form
                alfie9 Level 1
                Tracy, here is the link flex99.onepos.com/Flex/Hardware/indexsample.mxml.

                POS Terminal has data on it. So, if you click on POS Terminal and select an item...everything works fine. But when you click on the first datagrid to select another harware type that's when i get my textfields populated with undefined.

                Thanks in advance
                -a
                • 5. Re: Help with datagrid and form
                  ntsiii Level 3
                  The link throws a license exception, but I believe you.

                  I need a minimal, working sample app to see what you are doing.

                  Tracy
                  • 6. Help with datagrid and form
                    alfie9 Level 1
                    Tracy here is a minimal sample code of my application. This is how I set it up.

                    ****************************
                    indexsample.mxml
                    ****************************
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.macromedia.com/2003/mxml" verticalAlign="middle" width="100%" height="100%" xmlns="*" marginTop="8" verticalGap="0" pageTitle="Manufacturer" creationComplete="initApp()">

                    <!-- ACTIONSCRIPT -->
                    <mx:Script source="index_script_sample.as" />

                    <!-- STYLE SHEET USED IN THE APPLICATION -->
                    <mx:Style source="styles.css"/>

                    <!-- The Hardware Types, Manufactuer Informations is retrieved using a remote object service. -->
                    <mx:RemoteObject id="hardwareSvc" endpoint=" http://localhost/flashservices/gateway?" source="Manuf_CFC.ws.hardware" showBusyCursor="true" >
                    <mx:method name="GetHwTypes" result="selectedItem=hardwareSvc.GetImage.result; selectedHardware=hardwareSvc.GetHwTypes.result; selectedHwType=hardwareSvc.GetHwId.result" />
                    <mx:method name="GetHardware" result="selectedModel=hardwareSvc.GetHardware.result" />
                    </mx:RemoteObject>

                    <mx:Model id = "hardware">{hardwareSvc.GetHwTypes.result}</mx:Model>
                    <mx:Model id = "myhardware">{hardwareSvc.GetHardware.result}</mx:Model>

                    <!-- START PAGE -->
                    <mx:VBox width="1150" >
                    <mx:HBox id = "hb" horizontalGap="4" height="100%" width="100%">
                    <mx anel id = "main" title="Hardware Form" width="500" height="600" >
                    <!-- A CUSTOM COMPONENT (ADDEDITHWFORM.MXML) -->
                    <local:addedithardwaresample xmlns:local="*" hwChoice="{selectedModel}" hwType="{selectedHardware}" editaddObject="{hardware}" myHardwareObject="{myhardware}" change= "hardwareSvc.GetHardware(event.target.hwTypeDG.selectedItem.Hardware_Types)"
                    changes ="selectedModel=event.target.hwDG.selectedItem" myHTypeChanges="selectedHardware=event.target.hwTypeDG.selectedItem" />
                    </mx anel>
                    </mx:HBox>
                    </mx:VBox>
                    </mx:Application>

                    ***************************************************
                    addedithardwaresample.mxml
                    ***************************************************
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:VBox xmlns:mx=" http://www.macromedia.com/2003/mxml" width="100%" height="100%">

                    <mx:Metadata>
                    [Event("changeHwInfo")]
                    [Event("changeMyHwInfo")]
                    [Event("change")]
                    [Event("changes")]
                    [Event("myHTypeChanges")]
                    </mx:Metadata>

                    <mx:RemoteObject id="hardwareSvc" endpoint=" http://localhost/flashservices/gateway?" source="Manuf_CFC.ws.hardware" showBusyCursor="true" ></mx:RemoteObject>

                    <mx:Script>
                    <![CDATA[

                    var hwChoice: Object;
                    var hwType: Object;
                    var editaddObject;
                    var myHardwareObject;
                    var dataObject;
                    var dataHwTypeId;
                    var selectedModel;
                    var selectedHardware;

                    ]]>
                    </mx:Script>

                    <mx:VBox width="100%" height="100%">

                    <!-- Preview -->
                    <mx anel width="100%" height="100%" title="Add/Edit Hardware" styleName="panelstyle" >

                    <mx:HBox width="100%" height="200" horizontalAlign="center">
                    <mx ataGrid id = "hwTypeDG" alternatingRowColors="[0x336699,0x4885B7]" width="100%" height="100%" styleName="dgstyle" dataProvider="{editaddObject}" change="selectedHardware=event.target.hwTypeDG.selectedItem.Hardware_Types; dispatchEvent({type: 'change'}); dispatchEvent({type: 'myHTypeChanges'})" >
                    <mx:columns>
                    <mx:Array>
                    <mx ataGridColumn columnName="ID" headerText="Id" width="80" />
                    <mx ataGridColumn columnName="Hardware_Types" headerText="Hardware Types" />
                    </mx:Array>
                    </mx:columns>
                    </mx ataGrid>
                    <mx:VRule height="100%" />
                    <mx ataGrid id ="hwDG" alternatingRowColors="[0x336699,0x4885B7]" dataProvider="{myHardwareObject}" change="selectedModel=event.target.hwDG.selectedItem.MODEL; dispatchEvent({type: 'changes'})" width="100%" height="100%" styleName="dgstyle" >
                    <mx:columns>
                    <mx:Array>
                    <mx ataGridColumn columnName="MODEL" headerText="Model" width="80"/>
                    <mx ataGridColumn columnName="DESC" headerText="Desc" width="80" /> </mx:Array>
                    </mx:columns>
                    </mx ataGrid>
                    </mx:HBox>

                    <mx:HRule width="100%" ></mx:HRule>
                    <mx:Form label="Hardware Informations" width="100%" height="100%" id="form" >
                    <mx:FormItem label="Hardware ID: "><mx:Label id="hwid" text="{hwType.ID}" /></mx:FormItem>
                    <mx:FormItem label="Hardware Type: " ><mx:Label id="hwtype" text="{hwType.Hardware_Types}" /></mx:FormItem>
                    <mx:FormItem label="Company ID: "><mx:Label id="compid" text="1" /></mx:FormItem>
                    <mx:FormItem label="Model: " ><mx:TextInput id="model" text="{hwChoice.MODEL}" /></mx:FormItem>
                    <mx:FormItem label="Description: "><mx:TextArea id="desc" text="{hwChoice.DESC}" width="160" height="100" /></mx:FormItem>
                    </mx:Form>
                    <!-- ################ CONTROL BAR ################################# -->
                    <mx:ControlBar width="100%" horizontalAlign="center" >
                    <mx:Button label="Submit" />
                    <mx:Button label="Reset" />
                    </mx:ControlBar>
                    </mx anel>
                    </mx:VBox>
                    </mx:VBox>

                    *************************************
                    hardware.cfc
                    *************************************

                    <cfcomponent>
                    <cffunction name="GetHwTypes" access="remote" returntype="query">
                    <cfset myQuery = QueryNew("Hardware_Types, ID")>
                    <cfset newRow = QueryAddRow(MyQuery, 2)>
                    <cfset temp = QuerySetCell(myQuery, "ID", "100", 1)>
                    <cfset temp = QuerySetCell(myQuery, "Hardware_Types", "POS Terminal", 1)>
                    <cfset temp = QuerySetCell(myQuery, "ID", "200", 2)>
                    <cfset temp = QuerySetCell(myQuery, "Hardware_Types", "Bar Code Scanner", 2)>
                    <cfreturn myQuery>
                    </cffunction>

                    <cffunction name="GetHardware" access="remote" returntype="query">
                    <cfargument name="hw_type" required="yes" type="string">
                    <cfset myQuery = QueryNew("MODEL, DESC")>
                    <cfif hw_type EQ "POS Terminal">
                    <cfset newRow = QueryAddRow(MyQuery, 2)>
                    <cfset temp = QuerySetCell(myQuery, "MODEL", "PT-5500", 1)>
                    <cfset temp = QuerySetCell(myQuery, "DESC", "It's the Best", 1)>
                    <cfset temp = QuerySetCell(myQuery, "MODEL", "PT-6800", 2)>
                    <cfset temp = QuerySetCell(myQuery, "DESC", "Very good terminal", 2)>
                    <cfelseif hw_type EQ "Bar Code Scanner">
                    <cfset newRow = QueryAddRow(MyQuery, 2)>
                    <cfset temp = QuerySetCell(myQuery, "MODEL", "BCS-9900", 1)>
                    <cfset temp = QuerySetCell(myQuery, "DESC", "Awesome scanner", 1)>
                    <cfset temp = QuerySetCell(myQuery, "MODEL", "BCS-8900", 2)>
                    <cfset temp = QuerySetCell(myQuery, "DESC", "Great Scanner!!!!", 2)>
                    </cfif>
                    <cfreturn myQuery>
                    </cffunction>
                    </cfcomponent>

                    **************************************************
                    index_script_sample.as
                    ************************************************

                    // ActionScript Document for "index.mxml"

                    //Hardware
                    var selHwInfo;
                    var selHwTypeId;
                    var myHardInfo;
                    var hwDG;

                    var selectedItems;
                    var selectedItem;
                    var selectedModel;
                    var selectedHardware;
                    var selectedImage;
                    var availHw;
                    var hwTypesGrid;
                    var HwTypeDG;

                    var selectedHwType;
                    var selectedHwTypeId;

                    function initApp()
                    {
                    hardwareSvc.GetHwTypes.send();
                    }

                    I'm so sorry for such long codes. I hope this helps.

                    thanks
                    -a
                    • 7. Re: Help with datagrid and form
                      ntsiii Level 3
                      I can't run that because I don't have CF. Create some sample data in-line. Get rid of the stylesheet. Put the external script code in the main file.

                      Use the "Atach Code" to attach the code.
                      • 8. Re: Help with datagrid and form
                        alfie9 Level 1
                        Hi Tracy,

                        I attach my code with in-line data. But i am getting confuse (with in-line data) on how to populate my second grid based on selected hardware on first datagrid (Ex. if i selected "Bar Code Scanner" from first datagrid, it should only give me BS-7000.). I really appreciate you spendng some time helping me. Thank you!!!
                        • 9. Re: Help with datagrid and form
                          ntsiii Level 3
                          Try this modified code below. I have set it up so you can modify it for use with the data service calls, but the example uses the inline data to simulate the data service call. I added a couple more hardware info nodes, so that there is a list on the right.

                          Tracy
                          • 10. Re: Help with datagrid and form
                            alfie9 Level 1
                            Hi Tracy,

                            Thanks for quick responses. But, i have one more question, I hope this is the last. When i changed the Label field to a textinput, why is it giving me "undefined" on my textfields? When i selected a hardware type (first datagrid), it populates the hardware info grid (second datagrid) with the appropriate data, then I selected a model and it populates my textinput with correct data, which is all great! But then when i try selecting a different type of hardware, it populates my textinput with an "undefined". Why is this? Is there a way to get around this? Again, thank you very much for all your help.

                            thanks
                            -a
                            • 11. Re: Help with datagrid and form
                              ntsiii Level 3
                              It is undefined because it is bound to the selectedItem in the info dataGrid, and there is no selectedItem because changing the hardware type causes the Info dataProvider to be reloaded.

                              One way to correct this is to use a "ternary" expression. Change the binding to this:
                              text="{(hwInfoGrid.selectedItem.model == undefined) ? '' : hwInfoGrid.selectedItem.model}"

                              This is an inline way to say "if model is undefined then display an empty string, else display model"
                              • 12. Re: Help with datagrid and form
                                alfie9 Level 1
                                Tracy,

                                Thank you! thank you! very very much. For your time and all your help. Everything works perfectly. I really appreciate it.

                                Thank you,
                                -a
                                • 13. Re: Help with datagrid and form
                                  ntsiii Level 3
                                  Happy to help.

                                  When you are able, just help someone else.

                                  Tracy