1 Reply Latest reply on Aug 7, 2013 7:41 AM by Ajay Prabhakar Barokar

    Enlarging a Flex DataGrid cell on RollOver

    CMB998877

      Hi, I have a DataGrid which has a column named Hyperlinks where I show useful hyperlinks for the user. Sincce typically Hyperlinks are too big to show in a DataGrid cell, I need to have the column width at max 100px to be able to fit other columns in the Grid.

      What I am looking for is a way to show content of the cell when the user mouse over the cell. May be when user rollover, the cell shows the content increasing its size overlapping on the adjucent cells.

      Can anyone pls give me some suggestion on this? a code snippet would be very helpful if possible...

       

      Thanks in advance, Bose.

        • 1. Re: Enlarging a Flex DataGrid cell on RollOver
          Ajay Prabhakar Barokar Level 1

          Hi

          Instead of enlarging a cell you can display data using showDataTips="true" for the respective column.

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" minWidth="955" minHeight="600" applicationComplete="initData()">

              <fx:Script>

                  <![CDATA[

                      import mx.collections.ArrayCollection;

                      private var DGArray:Array = [

                          {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},

                          {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];

                     

                      [Bindable]

                      public var initDG:ArrayCollection;

                 

                      public function initData():void {

                          initDG=new ArrayCollection(DGArray);

                      }

                     

                  ]]>

              </fx:Script>

              <mx:DataGrid id="myGrid" dataProvider="{initDG}" >

                  <mx:columns>

                      <mx:DataGridColumn dataField="Album" dataTipField="Album" showDataTips="true" />

                      <mx:DataGridColumn dataField="Price" />

                  </mx:columns>

              </mx:DataGrid>

          </mx:Application>