1 Reply Latest reply on Feb 15, 2008 12:43 PM by faboratory

    DataGrid Bug?

    faboratory
      Hi Everyone,

      I am creating a shopping cart in Flex for a new site and I have run across a problem that I just can't find an answer to, so I am hoping that someone on here will be kind enough to point me in the right direction. Thank you in advance.

      Problem: I am using states to simulate a rollover shopping cart image (ie. when the user hovers the mouse over my shopping bag, a Panel pops up with a cart summary) My expanded summary panel has a control bar on it with some buttons and, correctly, looks like this in the Design View of Flex Builder.

      Design View image

      However, when I run the project and roll over the link, the style of my control bar dissappears and I end up with this.

      Browser View

      As you can see, the control bar now appears to be floating outside of the panel. I have tried everything I can think of, including using different layout options, absolute and relative dimensions, and using styles to control my panels properties and nothing works. What's even wierder is that if I take the DataGrid control out of the panel and replace it with any other control, everything works fine. Which leads me to believe that it might be a rendering bug with the DataGrid.

      Has anyone experienced anything like this? Any suggestions would be much appreciated.
      Thank you,
      Ryan
        • 1. Re: DataGrid Bug?
          faboratory Level 1
          Here is the code to the above problem, maybe it will help in answering the question.

          <mx:State name="Bag Open">
          <mx:SetProperty target="{bagUp}" name="visible" value="false"/>
          <mx:SetProperty target="{bagOver}" name="visible" value="true"/>
          <mx:SetProperty name="width" value="575"/>
          <mx:AddChild position="lastChild">
          <mx:Panel width="100%" layout="vertical" id="pnlBagSummary" title="Bag Summary">
          <mx:DataGrid dataProvider="{this.bagData}" width="100%" height="250">
          <mx:columns>
          <mx:DataGridColumn headerText="Item" dataField="item" width="150" itemRenderer="components.ProductView"/>
          <mx:DataGridColumn headerText="Qty" dataField="qty" width="50"/>
          <mx:DataGridColumn headerText="Description" dataField="description" width="200"/>
          <mx:DataGridColumn headerText="Price" dataField="price" width="75"/>
          <mx:DataGridColumn headerText="Actions" dataField="action" width="75"/>
          </mx:columns>
          </mx:DataGrid>
          <mx:ControlBar>
          <mx:Text text="Checkout will take you to our secure ordering page." fontSize="12" fontWeight="bold" textAlign="left" color="#191919"/>
          <mx:Button label="Checkout"/>
          <mx:Button label="Clear Cart"/>
          </mx:ControlBar>
          </mx:Panel>
          </mx:AddChild>
          </State>