8 Replies Latest reply on Jun 13, 2008 9:52 AM by MayLam18

    Can these two functionalities work on datagrid?

    May 2008 Level 1

      Hi everyone,

      I have a datagrid (shopping card) which has 3 columns such as ProductName, Quantity, Details.
      Part 1: Once the user click on the Quantity, then the user is allowed to make changes on the quantity.
      Part 2: Once the user click on the Details, then the code will get to another state which shows the product details.

      Part 1 is done. But Part is is not done yet. Any idea how to get Part 2 done is greatly appreciated. Thanks.

      Note for Part 2. If the user click on the Details on row 1, then the code show product 1 details. If the user click on
      Details on row 2, then the code show product 2 details, ... etc.

      Thanks,

      May
        • 1. Re: Can these two functionalities work on datagrid?
          Mirza Asim Level 1
          in the 'itemEditBegin' event handler, if 'event.columnIndex' is the index of 'Detail' column, then take the row of dataProvider at the index 'event.rowIndex' and do whatever you want with it. If you want to change the state then change the state and pass this information of row data to that state.
          I tried my best to understand your question and then replied accordingly. But if my answer is not very clear to you then please tell me, what exactly you want.
          • 2. Re: Can these two functionalities work on datagrid?
            MayLam18
            quote:

            Originally posted by: Mirza Asim
            in the 'itemEditBegin' event handler, if 'event.columnIndex' is the index of 'Detail' column, then take the row of dataProvider at the index 'event.rowIndex' and do whatever you want with it. If you want to change the state then change the state and pass this information of row data to that state.
            I tried my best to understand your question and then replied accordingly. But if my answer is not very clear to you then please tell me, what exactly you want.



            Hi Mirza,

            Thanks for your help. Yes what you are saying is exactly what I want to do. But I cannot change the state (see LINE XYZ). Please see the code and error message below. Thanks.

            May



            // Handle the itemEditBegin event.
            private function modifyEditedData(event:DataGridEvent):void
            {
            // Get the name of the column being editted.
            var colName:String = myDataGrid.columns[event.columnIndex].headerText;

            if(colName=="Product Details")
            {
            trace(_myShoppingCardArrayCollection.getItemAt(event.rowIndex).ProductCode);

            _productCode_temp = _myShoppingCardArrayCollection.getItemAt(event.rowIndex).ProductCode;


            //currentState = "ProductDetailsFromShoppingCard"; //<== This line gives error (LINE XYZ).
            }

            }


            private function updateQuantity():void {
            var iQty:int = 0;
            var qty:String = "";
            for (var i:int=0;i<_myShoppingCardArrayCollection.length;i++) {
            trace(_myShoppingCardArrayCollection.getItemAt(i).Quantity);
            qty += _myShoppingCardArrayCollection.getItemAt(i).Quantity + "\r";
            iQty += parseInt(_myShoppingCardArrayCollection.getItemAt(i).Quantity);
            }
            trace("Qty:" + iQty)
            Alert.show(qty);
            }







            <mx:DataGrid id="myDataGrid" dataProvider="{_myShoppingCardArrayCollection}"
            editable="true"
            itemEditBegin="modifyEditedData(event);"
            rowHeight="60">
            <mx:columns>
            <mx:DataGridColumn headerText="Product Name" dataField="ProductName" textAlign="left" wordWrap="true" editable="false" />
            <mx:DataGridColumn headerText="Product Price" dataField="ProductPrice" textAlign="center" editable="false" />
            <mx:DataGridColumn headerText="Quantity" dataField="Quantity" editable="true" />
            <mx:DataGridColumn headerText="Product Details" dataField="ProductCode" editable="true" />
            </mx:columns>
            </mx:DataGrid>


            <mx:Button label="Update" click="updateQuantity()" />
            --------------------------------- end --------------------


            TypeError: Error #1009: Cannot access a property or method of a null object reference.
            at mx.controls::DataGrid/createItemEditor()[E:\dev\3.0.x\frameworks\projects\framework\src\m x\controls\DataGrid.as:3884]
            at mx.controls::DataGrid/itemEditorItemEditBeginHandler()[E:\dev\3.0.x\frameworks\projects\f ramework\src\mx\controls\DataGrid.as:4747]
            at flash.events::EventDispatcher/dispatchEventFunction()
            at flash.events::EventDispatcher/dispatchEvent()
            at mx.core::UIComponent/dispatchEvent()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\co re\UIComponent.as:9051]
            at mx.controls::DataGrid/commitEditedItemPosition()[E:\dev\3.0.x\frameworks\projects\framewo rk\src\mx\controls\DataGrid.as:3676]
            at mx.controls::DataGrid/updateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\ mx\controls\DataGrid.as:1498]
            at mx.controls.listClasses::ListBase/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\ framework\src\mx\controls\listClasses\ListBase.as:3281]
            at mx.managers::LayoutManager/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:602]
            at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\frame work\src\mx\managers\LayoutManager.as:675]
            at Function/ http://adobe.com/AS3/2006/builtin::apply()
            at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\sr c\mx\core\UIComponent.as:8460]
            at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src \mx\core\UIComponent.as:8403]
            at flash.utils::Timer/_timerDispatch()
            at flash.utils::Timer/tick()
            • 3. Re: Can these two functionalities work on datagrid?
              Mirza Asim Level 1
              Is this a complete code? If so then where is the state with the name 'ProductDetailsFromShoppingCard'?
              • 4. Re: Can these two functionalities work on datagrid?
                Mirza Asim Level 1
                It will be very helpful for me if you can send the complete code. I am unable to figure out the exact problem
                • 5. Re: Can these two functionalities work on datagrid?
                  MayLam18 Level 1
                  quote:

                  Originally posted by: Mirza Asim
                  It will be very helpful for me if you can send the complete code. I am unable to figure out the exact problem



                  Sorry, the complete code is very long. I am sending you the code for states as shown below. Thanks for you time and help again.

                  May


                  [delete some code here]


                  [Bindable]
                  private var _productCode_temp:String;

                  [delete come code here]

                  <mx:states>

                  <mx:State name="ShoppingCard">


                  <mx:AddChild>
                  <mx:Canvas x="250" y="200" width="936" height="330">

                  <mx:DataGrid id="myDataGrid" dataProvider="{_myShoppingCardArrayCollection}"
                  editable="true"
                  itemEditBegin="modifyEditedData(event);"
                  rowHeight="60">
                  <mx:columns>
                  <mx:DataGridColumn headerText="Product Name" dataField="ProductName" textAlign="left" wordWrap="true" editable="false" />
                  <mx:DataGridColumn headerText="Product Price" dataField="ProductPrice" textAlign="center" editable="false" />
                  <mx:DataGridColumn headerText="Quantity" dataField="Quantity" editable="true" />
                  <mx:DataGridColumn headerText="Product Details" dataField="ProductCode" editable="true" />
                  </mx:columns>
                  </mx:DataGrid>

                  <mx:Button id="button_updateQuantity" label="Update" click="updateQuantity()"/>


                  </mx:Canvas>
                  </mx:AddChild>

                  </mx:State>


                  <mx:State name="ProductDetailsFromShoppingCard">



                  <mx:AddChild>
                  <mx:Canvas x="250" y="200" width="936" height="330">

                  <mx:Label text="{_productCode_temp}" />

                  </mx:Canvas>

                  </mx:AddChild>



                  </mx:State>

                  </mx:states>
                  • 6. Re: Can these two functionalities work on datagrid?
                    MayLam18 Level 1
                    quote:

                    Originally posted by: MayLam18
                    quote:

                    Originally posted by: Mirza Asim
                    It will be very helpful for me if you can send the complete code. I am unable to figure out the exact problem




                    Hi Mirza,

                    The complete code is shown below. I hope that you can see why LINE XYZ does not work. Thanks,

                    May

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">


                    <mx:Script>
                    <![CDATA[
                    import mx.events.DataGridEvent;
                    import mx.collections.ArrayCollection;
                    import mx.controls.Alert;


                    private function init():void {
                    currentState = "shoppingCard";
                    }


                    [Bindable]
                    private var myDP:ArrayCollection = new ArrayCollection([
                    {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99, Quantity:2, ProductCode:1000},
                    {Artist:'Pavement', Album:'Crooked Rain, Crooked Rain', Price:10.99, Quantity:20, ProductCode:1001},
                    {Artist:'Pavement', Album:'Wowee Zowee', Price:12.99, Quantity:1, ProductCode:1002},
                    {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99, Quantity:5, ProductCode:1003},
                    {Artist:'Pavement', Album:'Terror Twilight', Price:11.99, Quantity:3, ProductCode:1004}
                    ]);

                    // Handle the itemEditBegin event.
                    private function modifyEditedData(event:DataGridEvent):void
                    {
                    // Get the name of the column being editted.
                    var colName:String = myDataGrid.columns[event.columnIndex].headerText;

                    if(colName=="Product Details")
                    {
                    trace(myDP.getItemAt(event.rowIndex).ProductCode);

                    //_productCode_temp = _myShoppingCardArrayCollection.getItemAt(event.rowIndex).ProductCode;

                    //Alert.show(_productCode_temp);
                    currentState = "productDetails"; //<== This line gives error (LINE XYZ).



                    }

                    }


                    private function updateQuantity():void {
                    var iQty:int = 0;
                    var qty:String = "";
                    for (var i:int=0;i<myDP.length;i++) {
                    trace(myDP.getItemAt(i).Quantity);
                    qty += myDP.getItemAt(i).Quantity + "\r";
                    iQty += parseInt(myDP.getItemAt(i).Quantity);
                    }
                    trace("Qty:" + iQty);
                    Alert.show(qty);
                    }

                    ]]>
                    </mx:Script>

                    <mx:states>
                    <mx:State name="shoppingCard">
                    <mx:AddChild>
                    <mx:Canvas>


                    <mx:DataGrid id="myDataGrid" dataProvider="{myDP}"
                    editable="true"
                    itemEditBegin="modifyEditedData(event);"
                    rowHeight="60">
                    <mx:columns>
                    <mx:DataGridColumn headerText="Artist" dataField="Artist" editable="false" />
                    <mx:DataGridColumn headerText="Album" dataField="Album" width="130" editable="false" />
                    <mx:DataGridColumn headerText="Price" dataField="Price" editable="false"/>
                    <mx:DataGridColumn headerText="Quantity" dataField="Quantity" editable="true"/>
                    <mx:DataGridColumn headerText="Product Details" dataField="ProductCode" editable="true"/>
                    </mx:columns>
                    </mx:DataGrid>

                    <mx:Button id="button_updateQuantity" label="Update" click="updateQuantity()" x="438" y="471"/>
                    </mx:Canvas>
                    </mx:AddChild>
                    </mx:State>

                    <mx:State name="productDetails">
                    <mx:AddChild>
                    <mx:Canvas>

                    </mx:Canvas>
                    </mx:AddChild>
                    </mx:State>
                    </mx:states>
                    </mx:Application>

                    • 7. Re: Can these two functionalities work on datagrid?
                      Mirza Asim Level 1
                      Actaully the problem is with the event propagation. In the event handler the moment you switch the state to some other state ( that does not have DataGrid ), this problem will occur. By switching the state DataGrid doesn't remain in the display list. And you are doing this in the itemEditBegin handler where event propagation is not finished yet. It has to perform itemEditBegin task ( like open an editor ). But the moment it tries to access the DataGrid it is no longer in the displayList. Thats why null point exception is being thrown.
                      So the solution is, just stop event propagation right after switching the state.

                      currentState = "productDetails"; //<== This line gives error (LINE XYZ).
                      event.stopImmediatePropagation(); // add this line to your code.
                      • 8. Re: Can these two functionalities work on datagrid?
                        MayLam18 Level 1
                        quote:

                        Originally posted by: Mirza Asim
                        Actaully the problem is with the event propagation. In the event handler the moment you switch the state to some other state ( that does not have DataGrid ), this problem will occur. By switching the state DataGrid doesn't remain in the display list. And you are doing this in the itemEditBegin handler where event propagation is not finished yet. It has to perform itemEditBegin task ( like open an editor ). But the moment it tries to access the DataGrid it is no longer in the displayList. Thats why null point exception is being thrown.
                        So the solution is, just stop event propagation right after switching the state.

                        currentState = "productDetails"; //<== This line gives error (LINE XYZ).
                        event.stopImmediatePropagation(); // add this line to your code.



                        Hi Mirza,

                        Yes your solution is working. Thanks Mirza. You save me a lot of time. I completely appreaciate your time and help. Now I can continue to work on my Shopping Card project. .....

                        May