Enlarging a Flex DataGrid cell on RollOver

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.

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>

Similar Messages

  • Help needed to add an image to a datagrid cell in actionscript

    Morning all,
    I am still quite new to flex development and I have an application which uses xml to populate a datagrid. One of the row columns should display a small image but I don't know how to do that.
    Can anyone show me how to add an image to a datagrid cell in actionscript?
    I've added a sample of the code I have written already below. Any help would be much appreciated.
    Thanks in advance,
    Xander
    My XM
    <?xml version="1.0" encoding="UTF-8"?>
    <dataset>
    <modules>
    <module id="1">
    <icon>assets/sample_image1.png</icon>
    <key>core</key>
    <name>Core</name>
    <description>Description of module</description>
    <installed>Wednesday, 24th June 2009 @ 15:59 UK</installed>
    </module>
    <module id="2">
    <icon>assets/sample_image2.png</icon>
    <key>webproject</key>
    <name>Web Project</name>
    <description>Description of module</description>
    <installed>Wednesday, 24th June 2009 @ 17:32 UK</installed>
    </module>
    </modules>
    </dataset>
    My Actionscript
    private function dataSetHandler(event:Event):void {
        var ds:XML = new XML(event.target.data);
        var rows:XMLList = ds.elements('modules').elements('module') as XMLList;
        var columns:Array = new Array();
        for (var i:int=0; i<rows[0].elements().length(); i++) {
            var column:DataGridColumn = new DataGridColumn();
            var tag:String = rows.*[i].name();
            column.headerText = rows.*[i].name();
            column.dataField = rows.*[i].name();
            if (tag == 'icon') {
                var img:Image = new Image();
                img.id = "iconpath";
                img.width = 23;
                img.height = 20;
                img.source = rows.*[i].name();
               column.itemRenderer = img;   <-- this line shows as an error when I try to compile
            columns[i] = column;
        mydatagrid.columns = columns;
        mydatagrid.dataProvider = rows;

    you cant just set image object to itemrenderer, you need to use classfactory.
    http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_4.html

  • How to change content of DataGrid cell on mouse over

    I am trying to change content of a datagrid cell when the mouse is over it. Changing the dataProvider does not provide immediate feedback because update is performed by renderer. I am trying to directly update content of a cell onMouseOver and restore it onMouseOut.
    I am thinking of leaving the column empty and insert content onMouseOver, cleanup onMouseOut. Alternative, may be I can populate the column and mask out all but the cell the mouse is over.
    Any suggestion on how this may be done?
    Thanks!

    I would override updateDisplayList, call isItemHighlighted and set the content of the cell accordingly
    Alex Harui
    Flex SDK Developer
    Adobe Systems Inc.
    Blog: http://blogs.adobe.com/aharui

  • Flex DataGrid Component

    Can i extend the Flex DataGrid using ActionScript and create as  Add-On Component ?

    I've been trying to get this to work.  But i'm having issues   Not sure if it's related to the Array binding limitation mentioned in the release notes.  Maybe someone else has some ideas.
    I'm trying to bind to the dataProvider property of the DataGrid.  That way when the user in Xcelsius selects a range, it will bind the data in the excel sheet to the DataGrid.
    Problem is that i'm only getting one value to update (specifically the top value).  At this time i'm only trying to bind a single column of data.
    I noted that the commitProperties function gets called whenever a cell changes that i'm bound to, but the dataProvider is only receiving the first value of the array.  Even odder is that the ArrayCollection that i receive simply looks like this:
    commitProp:dataProvider=(mx.collections::ArrayCollection)#0
      filterFunction = (null)
      length = 1
      list = (mx.collections::ArrayList)#1
        length = 1
        source = (Array)#2
          [0] 1
        uid = "A37C62CC-F3DC-E1B1-8159-CE984C2CCE33"
      sort = (null)
      source = (Array)#2
    So i see that i get an array collection of ArrayList objects, the first one of which simple contains the value in the excell sheet "1".
    I noted that the proxy.bind function has a parameter called "chain", maybe this is what i need to get multiple value binding?  The documentation for the calls are pretty basic, which is understandable as this is new technology.
    So anyone have some ideas?  Maybe someone from BO who is apart of the SDK group can comment?

  • How to disaply multiple column of a table in a single flex datagrid column

    Hi,
    I have a table in my database which has say 3 column (Firstname,LastName,Location). I wanted to display these 3 different values in a single column in flex datagrid.
    Could you please help me out in this
    Thanks,
    Pratik

    Generally, in such scenarios each column is made corresponding to the column in database only and not single column.
    However, we can setStyle of a datagrid to make it appear as if all three  columns have been populated in single.
    set verticalGridLines="false" for dataGrid. Further cosmetic changes can be made to realise the required look.
    In some cases, labelFunction of a datagridColumn also suffices the need.
    Tanu

  • How to enter a value into datagrid cell in wpf through manually?

    Hi,
        Here my datagrid rows are in readonly mode here how can i enter the values in to the datagrid cell.(means how can i edit the cell value).i am adding the value to datagrid through programetically, I think  for this reason my datagrid rows
    are visible in readonly mode. Then how can i edit. Please guide me.
    Regards,
    Bhadram

    Hi Barry,
       Thank you for your reply, Now i sending my sample please check it once and suggest me.
    MainWindow.xaml.cs
    private void Save_Click(object sender, RoutedEventArgs e)
     List<CustomerMainViewModel> customer = new List<CustomerMainViewModel>(); customerviewmodel.NameTextField = tbName.Text;
    customerviewmodel.AddressTextField = tbAddress.Text;
    customerviewmodel.CountryField = countryddl.Text;
    customerviewmodel.StateField = stateddl.Text;
    customerviewmodel.Product = customerviewmodel.Product1 + "," + customerviewmodel.Product2;
    foreach(string str in customerviewmodel.actionCollection)
    customerviewmodel.ActionColl.Add(str);
    customerviewmodel.actionCollection.Clear();
    customer.Add(customerviewmodel);
    dataGrid1.Items.Add(customer);
    MessageBox.Show("Data Successfully Saved", " MessageBox", MessageBoxButton.OK, MessageBoxImage.Asterisk);
    clearValues();
    MainWindow.xaml
    <DataGrid
    Height="144"
    HorizontalAlignment="Left"
    Margin="79,447,0,0"
    Name="dataGrid1"
    VerticalAlignment="Top" CanUserAddRows="True"
    Width="399" Grid.RowSpan="2" IsReadOnly="False">
    <DataGrid.Columns>
    <DataGridTextColumn Header="NAME" Binding="{Binding NameTextField,Mode=TwoWay}" Width="Auto" IsReadOnly="False" />
    <DataGridTextColumn Header="ADDRESS" Binding="{Binding AddressTextField,Mode=TwoWay}" Width="Auto" IsReadOnly="False"/>
    <DataGridTextColumn Header="GENDER" Binding="{Binding GenderField,Mode=TwoWay}" Width="Auto" IsReadOnly="False"/>
    <DataGridTextColumn Header="COUNTRY" Binding="{Binding CountryField,Mode=TwoWay}" Width="Auto" IsReadOnly="False"/>
    <DataGridTextColumn Header="STATE" Binding="{Binding StateField,Mode=TwoWay}" Width="Auto" IsReadOnly="False"/>
    <DataGridTextColumn Header="PRODUCT" Binding="{Binding Product,Mode=TwoWay}" Width="Auto" IsReadOnly="False"/>
    <DataGridTemplateColumn Header="ACTION" MinWidth="140" IsReadOnly="False">
    <DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
    <ComboBox x:Name="actionddl" ItemsSource="{Binding ActionColl}"/>
    </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    </DataGrid.Columns>
    </DataGrid>
    In the above "xaml" file i am using the attribute "Readonly="False"" but its not effected on my code still my datagrid is in readonly mode, i don't know why it happens. 
    And I am adding data to my datagrid through "Wpf controls (TextBox,CheckBox,ComboBox and etc...)"  while click on "save" button the data added to grid. adding to grid works properly but the entire row is in readonly mode. How can
    i solve my problem.  

  • Import CSV/Excel data into Flex Datagrid using Java/JSP

    Hi,
    Is there any way we can import excel/csv data into flex datagrid component.
    I see that is been done using php in this site. http://code.google.com/p/as3xls/
    Any help would be appreciated.
    Thanks in advance

    You can store the list of data from the Excel sheet that you have read already into an ArrayList
    Then go through the JDBC tutorial, and learn how to insert a single record into the table.
    After you understand how to insert a single record, you can iterate through the ArrayList of data and insert them into the table in the database.
    If you know JDBC, see if you can use OR Mapping frameworks like Hibernate or iBatis, they make it very easy to manage database in Java.

  • Showing multiple links from inside a flex datagrid button

    Hi,
    I have a requirement where I need to show a button inside
    flex datagrid column.Which I'm doing with custom itemrenderer.When
    the User clicks on a particular button inside data grid I need to
    show him multiple links with images where user cal click on one of
    the links if he choses to do so.How do I achieve this.Any example
    is greatly appreciated.
    Regards
    mflex.

    "...show him multiple links with images ..." Where/how does
    this need to be displayed?
    Tracy

  • Flex DataGrid with Dynamic Grouping

    Does anyone know of any examples of Flex datagrids that have
    grouping features comparable to the numerous grid components
    available in the ASP.NET world? I’m thinking of .NET
    component vendors such as Telerik, Infragistics, Component Art,
    DevExpress, etc.
    The way these .NET controls generally work is that you drag
    the header of a column to a bar above the grid, which causes the
    grid to redraw based on the new grouping you just specified.
    This is an example of a grid component that I am currently
    using:
    Telerik
    Grid
    Thank you,
    Mike Chabot

    The renderer's data property is the data for the entire row so you can get the column1 data and assign the combobox's dataprovider accordingly.
    Alex Harui
    Flex SDK Developer
    Adobe Systems Inc.
    Blog: http://blogs.adobe.com/aharui

  • Moive clip in dataGrid cell.

    I want to put a movie clip into datagrid cell
    and cell data will change the color of the movie clip.
    how could I do that?
    pls help

    I think, you can use cellRenderer.
    If you want add icon something like that means, you can use
    "setPropertiesAt"

  • Combobox behavior inside a datagrid cell

    How do you control the width of a combobox that resides
    inside a datagrid cell? Merely setting cb.dropdownWidth = "some
    value" does not work.

    ok.. i got it. You can successfully modify
    dropdownWidth from withing your CellRenderer class using the 'open'
    event.

  • Flex datagrid pagination?

    Hi. Does the datagrid or AdvancedDataGrid support pagination?
    From what I've found, they don't seem to.

    "curious_Lee" <[email protected]> wrote in
    message
    news:g91nfo$nv8$[email protected]..
    > Hi. Does the datagrid or AdvancedDataGrid support
    pagination? From what
    > I've found, they don't seem to.
    http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html

  • Flex datagrid borders off by 1px?

    Is there a way to extend the datagrid component or any to her way to avoid this?
    Flex datagrid column header borders and column borders keep going off by 1px... and they randomly alternate when resized.
    I have no idea how to fix this, and it to me looks like a problem with flex, not so much what i coded
    http://screencast.com/t/NmI3Zjk0NmU
    http://screencast.com/t/YzE0NDk5 - resized
    It's like it's going off by 1px because of some rounding error... no idea why this is happening, and I'm using
    Code I'm using (a bit sloppy but still)
    http://pastebin.ca/1888773

    I could use someone's help on this... Every single datagrid i create (at least with a custom header gradient, I think), has borders off by 1px, what can I do to fix this?  I've even seen this happening on other sample flex projects. No idea how to fix this

  • Flex Datagrid Issue

    Hi
    I am using a flex datagrid component which has around 48 columns.
    There is a option for the user to select which columns he wish to see.
    Based on the user's selection the visible columns will be 1-50.
    The Datagrid is inside a Vbox container.
    The issue is, based on the screen resolution and the number of columns selected extra scroll bars(horizontal and vertical) appears
    for the whole Vbox in addition to the Datagrid's scrollbars.
    i.e if resolution is high and user selects more than 46 columns extra scroll bar appears.
    If resolution is low the extra scroll bars appears as soon as the visible columns is more than 20.
    Please help me if there is any resolution in preventing the extra scroll bars from appearing.Ideally, Since datagrid has its own scroll bars making more columns visible should not increase the width of datagrid.
    Any help will be appreciated

    Have you hard-coded the height and width of both the VBox and the Datagrid? If you set the datagrid height and width 40 pixels or so less than the VBox it should solve that problem, I'd think.
    Or, you could set your DataGrid height and width to 90%.
    Sorry if you've already tried this. Another option is to set your datagrid's scroll policy to "off" and just leave the VBox's scroll bars available.
    -John

  • Flex datagrid french sorting

    Hi,
    I am using flex datagrid to develop an application in french,
    as french is having special character in it,
    i need to sort datagrid column in french. Flex datagrid
    unable to sort data in french. i need french sorting,
    if somebody has solution of this please help me to get out of
    this.
    If possible please reply me on
    [email protected]

    i am using inbuilt flex sorting, i am not using sortcompare()
    function.
    its just a string sorting but as its in french ,character
    &quot;
    É&quot; is comig after character &quot;
    V&quot; , because flex treated it as a special character
    . it should come before &quot;
    V&quot;. so do we need to change character set for
    flex?

Maybe you are looking for

  • Can multiple Apple IDs that are linked with Family Sharing all share one "family" iCloud photo library?

    We have a family library of thousands of photos. Currently, we are using iPhoto to manage all of these photos, which  We each have our own apple ID, and each take pictures on our own devices, and have just been manually importing them all into the sa

  • Avoid billing split for different partners

    Dear all, I'd like to avoid invoice split for 2 billing items whose partner function (VE) in a sales order are different. I tried to create a routine in the copy control in VOFM, but it seems that the value of the partner (VBPA-PERNR) could not be pa

  • How to view the schema of a table?

    Hi, I have a table and would like to use the schema as a base to create other similar tables, however I couldn't find much information on how to retrieve the schema of a table in windows azure database. Could anyone shed some light?  Thank you!

  • If argument with a tiny indexOf problem

    These values get through the argument: may may/jun and get separated This does not: may/jun/jul What am I doing wrong here? function Blomstring(ar){ var newAr = []; var newData = []; var findEl = false; var el = ""; for(var i=0; i<ar.length; i++){ fi

  • Formula help in Numbers

    First of all, thanks in advance.  This forum has been a great asset to all of us novice users. I have a spreadsheet with many sheets within.  What I am trying to do is pull info from all sheets into a table so that it makes for a more automated syste