mardi 17 janvier 2017

Update total value datagrid when drag drop values - Adobe Flex

I have two datagrid, and each has total label. This label sums all the values of each datagrid. When I drag and drop a value from one datagrid to another, the two label total must be updated according to the values of each datagrid.

However, a sum is delayed.

The code:

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ift.tt/rYUnH9" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               width="650"
               creationComplete="initApp();">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.DataGridEvent;
            import mx.events.DragEvent;

            private function initApp():void {
                dgA.dataProvider = new ArrayCollection([
                    {Expense:'Electricity', Value:300, minNo: 100, maxNo: 500},
                    {Expense:'Phone', Value:200, minNo: 50, maxNo: 300},
                    {Expense:'Contract A', Value:5000, minNo: 4000, maxNo: 6000},
                    {Expense:'Contract B', Value:6000, minNo: 4500, maxNo: 8500},
                    {Expense:'Contract C', Value:3000, minNo: 2500, maxNo: 3500}
                ]);

                dgB.dataProvider = new ArrayCollection([]);

                sumA();
            }

            private function disableEditing(event:DataGridEvent):void {
                if(event.columnIndex==0)
                {
                    event.preventDefault(); 
                }
            }

            public function sumA():void {
                var sum:Number = 0;
                for (var k:String in dgA.dataProvider){
                    sum += dgA.dataProvider[k]['Value'];
                }
                totalA.text = sum.toString();
            }

            public function sumB():void {
                var sum:Number = 0;
                for (var k:String in dgB.dataProvider){
                    sum += dgB.dataProvider[k]['Value'];
                }
                totalB.text = sum.toString();
            }

            public function dragDropHandler(event:DragEvent):void {
                sumA();
                sumB();
            }

        ]]>
    </fx:Script>

    <s:HGroup>

        <s:VGroup>
            <s:Label text="Cost 1"/>
            <mx:DataGrid id="dgA"
                         allowMultipleSelection="true" 
                         dragEnabled="true" 
                         dropEnabled="true" 
                         dragMoveEnabled="true"
                         dragDrop="dragDropHandler(event)">
                <mx:columns>
                    <mx:DataGridColumn dataField="Expense"/>
                    <mx:DataGridColumn dataField="Value"/>
                </mx:columns>    
            </mx:DataGrid>

            <s:Form>
                <s:FormItem label="Total">
                    <s:Label id="totalA"/>
                </s:FormItem>
            </s:Form>
        </s:VGroup>

        <s:VGroup>
            <s:Label text="Cost 2"/>
            <mx:DataGrid id="dgB"
                         allowMultipleSelection="true" 
                         dragEnabled="true" 
                         dropEnabled="true" 
                         dragMoveEnabled="true"
                         editable="true"
                         itemEditBeginning="disableEditing(event);"
                         dragDrop="dragDropHandler(event)">
                <mx:columns>
                    <mx:DataGridColumn dataField="Expense"/>
                    <mx:DataGridColumn dataField="Value" editorDataField="value">
                        <mx:itemEditor>
                            <fx:Component>
                                <mx:NumericStepper stepSize="1" width="35" height="20">
                                    <fx:Script>
                                        <![CDATA[
                                            override public function set data(value:Object):void
                                            {
                                                super.data = value;

                                                if (value && value.hasOwnProperty("minNo")) {
                                                    minimum = value.minNo;
                                                }

                                                if (value && value.hasOwnProperty("maxNo")) {
                                                    maximum = value.maxNo;
                                                }
                                            }
                                        ]]>
                                    </fx:Script>
                                </mx:NumericStepper>
                            </fx:Component>
                        </mx:itemEditor>
                    </mx:DataGridColumn>
                </mx:columns>    
            </mx:DataGrid>

            <s:Form>
                <s:FormItem label="Total">
                    <s:Label id="totalB"/>
                </s:FormItem>
            </s:Form>
        </s:VGroup>

    </s:HGroup>

</s:Application>

Aucun commentaire:

Enregistrer un commentaire