12 Replies Latest reply on Jun 11, 2008 6:56 PM by MayLam18

    Advanced DataGrid question

    MayLam18

      Hi everyone,

      When the user click on the "View Basket" button. Then the Advanced DataGrid gets the data from the database and show two columns (in the Advanced DataGrid) such as Product Name and Quantity (TextInput). Now the user can make change on the Quantity. And then click on the Update button (at the bottom of the Advanced DataGrid). Now in the Update function, how to loop through the Quantity column? (and then update the database).

      Please help. Thanks.

      May
        • 1. Re: Advanced DataGrid question
          ntsiii Level 3
          You must loop over the dataProvider.

          How to loop depends on the data type of the data Provider.

          Consider storing a "dirty" flag for records that have been updated, so you do not have to update the entire table.

          I use XML and set an attribute when a piece of data is updated. When user clicks save, I look for rows with this attribute="true" and build my update message.

          There are other ways, such as using an associative array to store references to updated items.

          Tracy
          • 2. Re: Advanced DataGrid question
            MayLam18 Level 1
            quote:

            Originally posted by: ntsiii
            You must loop over the dataProvider.

            How to loop depends on the data type of the data Provider.

            Consider storing a "dirty" flag for records that have been updated, so you do not have to update the entire table.

            I use XML and set an attribute when a piece of data is updated. When user clicks save, I look for rows with this attribute="true" and build my update message.

            There are other ways, such as using an associative array to store references to updated items.

            Tracy



            Hi Tracy,

            Thanks for you help. How can I get the value of the Quantity (TextInput) inside the Advanced DataGrid if loop through the dataProvider if the user change the Quantity?

            Thanks,
            May
            • 3. Re: Advanced DataGrid question
              ntsiii Level 3
              Your itemRenderer must update the dataProvider item.

              ItemRenderers are recycled and do not retain any state of their own. In fact, only the visible rows even exist.

              If your DG has enough rows to show a scrollbar, then you will notice that the cell values are not retained when you scroll.

              How have you implemented you item renderer?

              Tracy
              • 4. Re: Advanced DataGrid question
                MayLam18 Level 1
                quote:

                Originally posted by: ntsiii
                Your itemRenderer must update the dataProvider item.

                ItemRenderers are recycled and do not retain any state of their own. In fact, only the visible rows even exist.

                If your DG has enough rows to show a scrollbar, then you will notice that the cell values are not retained when you scroll.

                How have you implemented you item renderer?

                Tracy


                Hi Tracy,

                No I don't know how to implement the item renderer. Because I am new to Flex 3. Tracy, please show me the code using two columns such as the "Product Name" and "Quantity" in the DataGrid or Advanced DataGrid. And a Update button. After the user make changes on the Quantity, then the user click the Update button. Then a Update function is called and loop through the (updated) Quantity (textinput) column.

                Hope to see your code. Thanks.

                May
                • 5. Re: Advanced DataGrid question
                  ntsiii Level 3
                  How far have you gotten? What is working, what is not?
                  Tracy
                  • 6. Re: Advanced DataGrid question
                    MayLam18 Level 1

                    Hi Tracy,

                    So far, I got the datagrid working. But I still don't know how to get the Quantity (after the user make changes) values.

                    <mx:DataGrid id="dgShoppingCard" width="700" dataProvider="{_myShoppingCardArrayCollection}">
                    <mx:columns>
                    <mx:DataGridColumn headerText="Product Name" dataField="ProductName" textAlign="left" wordWrap="true" />
                    <mx:DataGridColumn headerText="Quantity" id="txtQty" textAlign="center">
                    <mx:itemRenderer>
                    <mx:Component> <mx:TextInput text="{data.Quantity}" editable="true" />
                    </mx:Component>
                    </mx:itemRenderer>
                    </mx:DataGridColumn>
                    </mx:columns>
                    </mx:DataGrid>

                    <mx:Button label="Update" click="updateQuantity()" x="1092" y="583"/>

                    And I don't know what to put inside the updateQuantity() function.

                    Thanks for your time and help.

                    May
                    • 7. Re: Advanced DataGrid question
                      ntsiii Level 3
                      Ok, why are you not just using the default renderer and setting the editable="true"? This will update the dataProvider automatically.

                      Set editable="true" on both the DataGrid and on the DataGridColumn.

                      private function updateQuantity():void {
                      var iQty:int = 0;
                      for (var i:int=0;i<myShoppingCardArrayCollection.length;i++) {
                      iQty += myShoppingCardArrayCollection.getItemAt(i).Quantity;
                      }
                      trace("Qty:" + iQty)
                      }

                      Tracy
                      • 8. Re: Advanced DataGrid question
                        MayLam18 Level 1
                        quote:

                        Originally posted by: ntsiii
                        Ok, why are you not just using the default renderer and setting the editable="true"? This will update the dataProvider automatically.

                        Set editable="true" on both the DataGrid and on the DataGridColumn.

                        private function updateQuantity():void {
                        var iQty:int = 0;
                        for (var i:int=0;i<myShoppingCardArrayCollection.length;i++) {
                        iQty += myShoppingCardArrayCollection.getItemAt(i).Quantity;
                        }
                        trace("Qty:" + iQty)
                        }

                        Tracy



                        It is not working as what I expect. Because the code only read the quantity values from the db. I mean after I make changes on the quantity values inside the textinput boxes. And then click the the update button. And the updateQuantity() is called. Now inside this function, it loop through the quantity values from the db. And not loop through the quantity values inside the textinput boxes.

                        Am I doing something wrong? Or missing something? Or this is how it works. If so, then thanks a lot for your time and help Tracy. I really appreciate your help Tracy.

                        May
                        • 9. Re: Advanced DataGrid question
                          MayLam18 Level 1
                          I did not use the default renderer. Maybe that's why it did not work.

                          I have just search the internet and could not find the default renderer in datagrid in flex. How can I put a default renderer inside the datagrid in order to solve my problem. Please give me the sample code. Thanks.

                          May
                          • 10. Re: Advanced DataGrid question
                            ntsiii Level 3
                            You are making this too complicated. Use an editable DataGrid. Do not use a custom itemRenderer. Set editable="true" on the DataGrid and on any column you want to edit.

                            Loop using the function I posted. Everything will work as you want.

                            Tracy

                            • 11. Re: Advanced DataGrid question
                              May 2008
                              quote:

                              Originally posted by: ntsiii
                              You are making this too complicated. Use an editable DataGrid. Do not use a custom itemRenderer. Set editable="true" on the DataGrid and on any column you want to edit.

                              Loop using the function I posted. Everything will work as you want.

                              Tracy




                              Hi Tracy, it does not work. Please see my code below. In fact, I cannot compile the code without using custom itemRenderer. Thanks.

                              <mx:DataGrid id="dgShoppingCard" width="700" dataProvider="{_myShoppingCardArrayCollection}" editable="true">
                              <mx:columns>
                              <mx:DataGridColumn headerText="Product Name" dataField="ProductName" textAlign="left" wordWrap="true" />
                              <mx:DataGridColumn headerText="Quantity" textAlign="center" editable="true">

                              <mx:TextInput text="{data.Quantity}" />

                              </mx:DataGridColumn>
                              </mx:columns>
                              </mx:DataGrid>

                              Thanks,

                              May
                              • 12. Re: Advanced DataGrid question
                                MayLam18 Level 1
                                quote:

                                Originally posted by: ntsiii
                                You are making this too complicated. Use an editable DataGrid. Do not use a custom itemRenderer. Set editable="true" on the DataGrid and on any column you want to edit.

                                Loop using the function I posted. Everything will work as you want.

                                Tracy





                                Sorry Tracy. I just got the datagrid working now. Below is the datagird. Now I can continue to work on my project.
                                Thanks for your help again Tracy.

                                <mx:DataGrid id="dgShoppingCard" width="700" dataProvider="{_myShoppingCardArrayCollection}" editable="true">
                                <mx:columns>
                                <mx:DataGridColumn headerText="Product Name" dataField="ProductName" textAlign="left" wordWrap="true" />

                                <mx:DataGridColumn headerText="Quantity" dataField="Quantity" textAlign="center" editable="true">

                                </mx:columns>
                                </mx:DataGrid>

                                Cheers,

                                May