DataGrid's last row hangs out

Question

Hi,
Has anybody else came accross the same problem I have currently? If yes can you share your solution? If you need more details, code snippets let me know.
Thanks,
    Daniel

Answer 1

Hi,
Actually there are 4 files involved.The upper grid is Main->RightTabPanels->WorkingOrders, the lower grid is  Main->OpenedPositions(I highlight those that are on the screen). The rest are not important to quote i think because they have the same problem. I also quote an example on how i refresh them.
Main.mxml
<mx:VDividedBox width="490" height="431" x="505" y="299">
    <mx:VBox width="100%" height="58%">
        <mx:Spacer height="18"/>
        <!-- right top panels -->
        <righttabpanels:RightTabPanels width="100%" height="100%"/>
    </mx:VBox>
    <mx:VBox width="100%" height="42%">
        <!-- right bottom panels -->
        <openedpositions:OpenedPositions />
    </mx:VBox>
</mx:VDividedBox>
RightTabPanels.mxml
<mx:TabNavigator id="tabNavigatorRightTabPanels" x="0" y="0" width="480" height="100%" styleName="tabNavigatorRightTabPanels">
    <mx:Canvas id="tabWorkingOrdersRightTabPanels" label="{expressions['RightButtonGroup_OrdersButton_Label']}" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
       <workingorders:WorkingOrders />
    </mx:Canvas>
    <mx:Canvas id="tabTradeHistoryRightTabPanels" label="{expressions['RightButtonGroup_TradeHistoryButton_Label']}" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
        <tradehistory:TradeHistoryPanel />
    </mx:Canvas>
    <mx:Canvas id="tabMyAccountRightTabPanels" label="{expressions['RightButtonGroup_MyAccountButton_Label']}" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
        <myaccount:MyAccount />
    </mx:Canvas>
    <mx:Canvas id="tabPromotionsRightTabPanels" label="{expressions['RightButtonGroup_PromotionsButton_Label']}" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
    </mx:Canvas>
</mx:TabNavigator>
WorkingOrders.mxml
<mx:DataGrid id="dataGridOrderBook"
    toolTipCreate="createTooltip(event)" itemRollOver="getHighlightedItem(event)"
    itemRollOut="itemRolledOut(event)" itemClick="itemClicked(event)" styleName="dataGridWorkingOrders" x="0" y="0" width="480" height="100%">
    <mx:columns>
        <mx:DataGridColumn dataField="direction" textAlign="center" headerText="{expressions['WorkingOrders_Table_Header_Direction_Label']}" width="45" />
        <mx:DataGridColumn dataField="size" textAlign="right" paddingRight="3" headerText="{expressions['WorkingOrders_Table_Header_Size_Label']}" width="45"/>
        <mx:DataGridColumn dataField="product" textAlign="center" headerText="{expressions['WorkingOrders_Table_Header_Product_Label']}" width="90"/>
        <mx:DataGridColumn dataField="price" textAlign="right" paddingRight="3" headerText="{expressions['WorkingOrders_Table_Header_Price_Label']}" width="55"/>
        <mx:DataGridColumn dataField="type" textAlign="center" headerText="{expressions['WorkingOrders_Table_Header_Type_Label']}" width="55"/>
        <mx:DataGridColumn dataField="validity" textAlign="center" headerText="{expressions['WorkingOrders_Table_Header_Validity_Label']}"/>
        <mx:DataGridColumn dataField="orderRef" textAlign="center" headerText="{expressions['WorkingOrders_Table_Header_OrderRef_Label']}" width="65"/>
        <mx:DataGridColumn dataField="" width="30">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox horizontalAlign="center">
                        <mx:Script>
                            <![CDATA[
                                private function clicked(event:MouseEvent):void {
                                    CommonProject.requests.sendCancelRequest(data.orderRef);
                            ]]>
                        </mx:Script>
                        <mx:Button id="buttonClose" styleName="buttonCloseOrderBook" click="clicked(event)" x="0" y="0" />
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>
OpenedPositions.mxml
<mx:VBox x="0" y="0" width="480" height="100%" verticalGap="0">
    <mx:Canvas width="100%" height="100%">
        <mx:Image id="imageOpenedPositionsHeader" styleName="imageOpenedPositionsHeader" x="0" y="0" width="100%" height="26" source="{imageOpenedPositionsHeader.getStyle('img')}" />
        <mx:TabNavigator id="tabNavigatorOpenedPositions" x="0" y="0" width="100%" height="100%" styleName="tabNavigatorOpenedPositions">
            <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" label="{expressions['Positions_OpenSummary_Label']}" width="100%" height="100%" id="tabOpenSummary">
                <tradehistory:RowColorDataGrid id="dataGridOpenedPositions" x="0" y="0" width="100%" height="100%" styleName="dataGridOpenedPositions">
                    <tradehistory:columns>
                        <mx:DataGridColumn dataField="direction" textAlign="center" headerText="{expressions['Positions_Table_Header_Direction_Label']}" width="45" />
                        <mx:DataGridColumn dataField="size" textAlign="right" paddingRight="3" headerText="{expressions['Positions_Table_Header_Size_Label']}" width="45" />
                        <mx:DataGridColumn dataField="product" textAlign="center" headerText="{expressions['Positions_Table_Header_Product_Label']}" width="90"/>
                        <mx:DataGridColumn dataField="price" textAlign="right" paddingRight="3" headerText="{expressions['Positions_Table_Header_Price_Label']}" width="55"/>
                        <mx:DataGridColumn dataField="market" textAlign="center" headerText="{expressions['Positions_Table_Header_Market_Label']}" width="55"/>
                        <mx:DataGridColumn dataField="timestamp" textAlign="center" headerText="{expressions['Positions_Table_Header_Timestamp_Label']}"/>
                        <mx:DataGridColumn dataField="pnl" textAlign="right" itemRenderer="screens.openedpositions.PNLItemRenderer" paddingRight="3" headerText="{expressions['Positions_Table_Header_PNL_Label']}" width="55"/>
                        <mx:DataGridColumn dataField="" width="30">
                            <mx:itemRenderer>
                                <mx:Component>
                                    <mx:HBox horizontalAlign="center" verticalAlign="middle">
                                        <mx:Script>
                                            <![CDATA[
                                                private function clicked(event:MouseEvent):void {
                                                    CommonProject.openedTrades.closePosition(data.productReal, data.directionReal);
                                            ]]>
                                        </mx:Script>
                                        <mx:Button id="buttonClose" styleName="buttonCloseOpenedPositions" click="clicked(event)" x="10" y="2" />
                                    </mx:HBox>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
                    </tradehistory:columns>
                </tradehistory:RowColorDataGrid>
            </mx:Canvas>
            <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" label="{expressions['Positions_OpenTrades_Label']}" width="100%" height="100%" id="tabOpenTrades">
                <mx:DataGrid id="dataGridOpenedTrades" x="0" y="0" width="100%" height="100%" styleName="dataGridOpenedPositions">
                    <mx:columns>
                        <mx:DataGridColumn dataField="direction" textAlign="center" headerText="{expressions['Positions_Table_Header_Direction_Label']}" width="45" />
                        <mx:DataGridColumn dataField="size" textAlign="right" paddingRight="3" headerText="{expressions['Positions_Table_Header_Size_Label']}" width="45" />
                        <mx:DataGridColumn dataField="product" textAlign="center" headerText="{expressions['Positions_Table_Header_Product_Label']}" width="90"/>
                        <mx:DataGridColumn dataField="price" textAlign="right" paddingRight="3" headerText="{expressions['Positions_Table_Header_Price_Label']}" width="55"/>
                        <mx:DataGridColumn dataField="market" textAlign="center" headerText="{expressions['Positions_Table_Header_Market_Label']}" width="55"/>
                        <mx:DataGridColumn dataField="timestamp" textAlign="center" headerText="{expressions['Positions_Table_Header_Timestamp_Label']}"/>
                        <mx:DataGridColumn dataField="pnl" textAlign="right" paddingRight="3" itemRenderer="screens.openedpositions.PNLItemRenderer" headerText="{expressions['Positions_Table_Header_PNL_Label']}" width="55"/>
                        <mx:DataGridColumn dataField="" width="30">
                            <mx:itemRenderer>
                                <mx:Component>
                                    <mx:HBox horizontalAlign="center" verticalAlign="middle">
                                        <mx:Script>
                                            <![CDATA[
                                                private function clicked(event:MouseEvent):void {
                                                    CommonProject.openedTrades.closePosition(data.tradeRef);
                                            ]]>
                                        </mx:Script>
                                        <mx:Button id="buttonClose" styleName="buttonCloseOpenedPositions" click="clicked(event)" x="0" y="2" />
                                    </mx:HBox>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
                    </mx:columns>
                </mx:DataGrid>
            </mx:Canvas>
        </mx:TabNavigator>
        <mx:Label id="labelPnL" text="" fontFamily="{CommonProject.boldFont}" styleName="labelOpenPositionsLabel" x="250" y="3" width="220" />
    </mx:Canvas>
    <mx:Canvas width="100%" height="2" backgroundColor="#cfcfcf" />
</mx:VBox>  
refresh method for dataGridOpenedTrades and dataGridOpenedPositions
public function refresh():void {
    if (CommonProject.application.viewStack.selectedIndex == 1) {
        var vScroll:int = dataGridOpenedTrades.verticalScrollPosition;
        dataGridOpenedTrades.dataProvider = CommonProject.openedTrades.getDisplayedTrades();
        dataGridOpenedTrades.verticalScrollPosition = vScroll;  // restore scroll position
        dataGridOpenedTrades.validateNow();
        vScroll = dataGridOpenedPositions.verticalScrollPosition;
        dataGridOpenedPositions.dataProvider = CommonProject.openedTrades.getDisplayedPositions();
        dataGridOpenedPositions.verticalScrollPosition = vScroll;  // restore scroll position
        dataGridOpenedPositions.validateNow();