Flex datagrid automatic width?

Hello,
I'm currently attempting to use the datagrid component to
display some information. This information will be pulled in
externally, and I will not know the length of the content that will
be in each row. Is there a way that I can get the width of the
datagrid to automatically be the width of the row that has the most
content? For example, if my data grid displays:
this is row one
this is row two
this is row three... is has the most content....
I would like the datagrid to be the width of row three
(without scrollbars). I can't specifiy a width because I don't know
how long the content will be, and specifying a width of 100% makes
the datagrid wider than it needs to be. Any ideas?
Thanks in advance for any advice.

Hi Srilatha,
DataGrid width is 100% and the main application width also 100%, So the
DataGrid will try to occupy the whole window, when you do "restore down" &
"maximize" Application width will change.. and it will effect DataGrid and
its columns also. Try to give some fixed width for dataGrid and you can
expect the result.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
height="100%" width="100%">
    <mx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
            private var isVisible:Boolean = true;
            private function creationCompleteHandler():void
                dataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
                artist.width = dataGrid.width * 0.40;
                album.width = dataGrid.width * 0.50;
                Price.width = dataGrid.width * 0.10;
                dataGrid.horizontalScrollPolicy = ScrollPolicy.OFF;
        ]]>
    </mx:Script>
    <mx:DataGrid id="dataGrid" width="500" height="100%"
creationComplete="creationCompleteHandler()">
        <mx:ArrayCollection>
            <mx:Object Artist="Pavement" Price="11.99"
                       Album="Slanted and Enchanted" />
            <mx:Object Artist="Pavement"
                       Album="Brighten the Corners" Price="11.99" />
        </mx:ArrayCollection>
        <mx:columns>
            <mx:DataGridColumn id="artist" dataField="Artist"/>
            <mx:DataGridColumn id="album" dataField="Album"
visible=""/>
            <mx:DataGridColumn id="Price" dataField="Price" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
Thanks
Pradeep Reddy

Similar Messages

  • Changing dataGrid column width with actionScript

    Having a strange change when trying to change any dataGrid column width with this code:
    dataGrid.columns[ 5 ].width = 200;
    It do changes the width of column number 6 to 200, but strangely it's also changes the width of the preceding columns (0-4). Every preceding column automatically increases a little bit than its' existing width without having me any idea.
    Any idea anyone have!
    Thanks..!
    SK

    Hi,
    See if this thread helps:
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1237299
    Cheree

  • 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 data on datachange

    Hi all,
    I am using an extended datagrid which takes its height on the basis of measured height of items. Item renderer for datagrid is a canvas. Which holds one more canvas(header for item renderer) and a text area. The problem I am facing is with the header canvas in item renderer. Header canvas has one label which diaplay a name of user. On the basis of data provider for the current item visibility of this label in header canvas is set as true or false. issue is when it set to false it repaints(on data change event) all the previous header canvas label also to visible false. And just the last item has the data. Rather it should set its visiblity false only for the current item and rest items sholud behave as value set for them.
    Thanks in advance.

    Adobe Newsbot hopes that the following resources helps you.
    NewsBot is experimental and any feedback (reply to this post) on
    its utility will be appreciated:
    Flex 3 - Handling service results:
    Flex interprets the XML data that a web service or HTTP
    service returns to ..... a DataGrid control with DataTable data
    returned from a .NET web service.
    Link:
    http://livedocs.adobe.com/flex/3/html/data_access_6.html
    Flex cookbook beta - Building Flex Applications with SOAP Web
    Services:
    Mar 3, 2008 ... If you are using web services technologies
    then it is usually ... The DataGrid tag instanciates an instance of
    the DataGrid Flex control.
    Link:
    http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=7863
    Flex 3 - Using WebService components:
    The Flex web service API generally supports Simple Object
    Access Protocol (SOAP) ... property of a DataGrid control and
    displayed in the DataGrid control.
    Link:
    http://livedocs.adobe.com/flex/3/html/data_access_3.html
    Adobe - Flex General Discussion:
    Flex datagrid data column / webservice - justneed2know -
    08/27/2008 ... I use a web service to populate a datagrid and its
    columns (on of which is date).
    Link:
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1388794&enterthread=y
    All Classes (Flex 3):
    mx.rpc.soap, AbstractWebService is an abstract base class for
    implementations that provide RPC access to SOAP-based web services.
    Link:
    http://livedocs.adobe.com/flex/3/langref/class-summary.html
    Adobe - Developer Center : Using Flex Builder to Create Web:
    Using Flex Builder to Create Web ServiceBased Flex
    Applications ... The web service result data needs to flow to the
    DataGrid. Select the 'Data will flow
    Link:
    http://www.adobe.com/devnet/flex/articles/flexbuilder_ws_04.html
    Disclaimer: This response is generated automatically by the
    Adobe NewsBot based on Adobe
    Community
    Engine.

  • Flex datagrid data column / webservice

    I use a web service to populate a datagrid and its columns
    (on of which is date). The web services sources the data from a sql
    server database and thru ASP.net to the Flex application. I've been
    seeing strange things. During testing, database records such as
    "8/27/2008 8:58:00 PM " correctly shows up as 8/27/2008 in the Flex
    application, but records after 9PM such as "8/27/2008 9:01:21 PM"
    shows up as 8/28/2008 (the next days) .. seems like after 9 throws
    off the data rendering.. please suggest.

    Adobe Newsbot hopes that the following resources helps you.
    NewsBot is experimental and any feedback (reply to this post) on
    its utility will be appreciated:
    Flex 3 - Handling service results:
    Flex interprets the XML data that a web service or HTTP
    service returns to ..... a DataGrid control with DataTable data
    returned from a .NET web service.
    Link:
    http://livedocs.adobe.com/flex/3/html/data_access_6.html
    Flex cookbook beta - Building Flex Applications with SOAP Web
    Services:
    Mar 3, 2008 ... If you are using web services technologies
    then it is usually ... The DataGrid tag instanciates an instance of
    the DataGrid Flex control.
    Link:
    http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=7863
    Flex 3 - Using WebService components:
    The Flex web service API generally supports Simple Object
    Access Protocol (SOAP) ... property of a DataGrid control and
    displayed in the DataGrid control.
    Link:
    http://livedocs.adobe.com/flex/3/html/data_access_3.html
    Adobe - Flex General Discussion:
    Flex datagrid data column / webservice - justneed2know -
    08/27/2008 ... I use a web service to populate a datagrid and its
    columns (on of which is date).
    Link:
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1388794&enterthread=y
    All Classes (Flex 3):
    mx.rpc.soap, AbstractWebService is an abstract base class for
    implementations that provide RPC access to SOAP-based web services.
    Link:
    http://livedocs.adobe.com/flex/3/langref/class-summary.html
    Adobe - Developer Center : Using Flex Builder to Create Web:
    Using Flex Builder to Create Web ServiceBased Flex
    Applications ... The web service result data needs to flow to the
    DataGrid. Select the 'Data will flow
    Link:
    http://www.adobe.com/devnet/flex/articles/flexbuilder_ws_04.html
    Disclaimer: This response is generated automatically by the
    Adobe NewsBot based on Adobe
    Community
    Engine.

  • DataGrid Column Width Issues (Bug?)

    I have a couple datagrid with three columns, one column in
    each grid has width="50". I've noticed some odd behavior with this.
    First, in Flex Builder, the width of those columns randomly change
    in Design view. If I go and change the width setting to something
    else and back to 50 or refresh the display it goes back to
    displaying correctly.
    Second, when I actually run the project, it seems that my
    contraint layout settings expand my 50 pixels significantly. It
    certainly doesn't evenly split my three columns if I have a width
    setting, but it is far bigger than 50 pixels.
    These could be completely unrelated, but are both
    unexpected.

    I haven't set the horizontalScrollPolicy, so I'm assuming
    it's the default. The way you described it is the way I understand
    it would work, however, it seems that when I use contraint layout
    to stretch it to nearly 100% across the screen, the 50 pixels is
    not kept. That one column is certainly narrower that the remaining
    two columns, but it is far bigger that 50 pixels. It's more like
    100 or 150. It's more an annoyance than anything. I have a column
    with a Checkbox in this disproportionally large column. Visually,
    it looks odd.

  • 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

  • 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

  • DataGrid column width is not set properly

    Hi,
            In the below example I has called the OptimizeDataGrid method on Button Click event to resize the Column according to the data. First time of the button click event it called the function whereas the Datagrid Column width alone is not set properly.whereas on second time it is working properly.
    For Eg : In the below statement the text value is coming as 55 and widthPadding is comes as 25. but the sum of these two value is not in the dg.columns[col].width.
    dg.columns[col].width = text + widthPadding;
    But the same is working on the second time of the Button click event. is any help me out to resovle this issue. Thanks in Advance.
    <?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        width="100%" height="100%" >
        <mx:Script>
            <![CDATA[
                import mx.utils.ObjectUtil;
                import mx.collections.ArrayCollection;
                import mx.core.UITextField;
                import mx.events.AdvancedDataGridEvent;
                import mx.binding.utils.BindingUtils;
                import mx.controls.Alert;           
                import mx.controls.AdvancedDataGrid;
                import mx.controls.advancedDataGridClasses.*;
                import mx.controls.DataGrid;
                import mx.controls.dataGridClasses.*;
                [Bindable]
                private var dpFlat:ArrayCollection = new ArrayCollection([            
                  {Region:"aabbCC", Territory:"Central Californiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
                      Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}, 
                  {Region:"AAbbcc", Territory:"Nevada",
                      Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}
                private function optimizeDataGrid(dg:Object,widthPadding:uint = 0,heightPadding:uint = 0):void
                    if ((!dg is DataGrid))
                        return;
                    var col:uint;
                    var colWidth:uint;
                    var tf:TextFormat;
                    var renderer:UITextField;
                    var widths:Array = new Array(dg.columnCount);
                    var height:uint = 0;
                    var dgCol:Object;
                    var text:uint = 0;
                    if (dg.columnCount > 0 && dg.dataProvider != null)
                        for (col = 0; col < dg.columnCount; ++col)
                            widths[col] = 0;
                        for each (var item:Object in dg.dataProvider)
                            for (col = 0; col < dg.columnCount; ++col)
                                renderer = new DataGridItemRenderer();
                                dg.addChild(renderer);
                                dgCol = dg.columns[col];
                                renderer.text = dgCol.itemToLabel(item);
                                widths[col] = Math.max(renderer.measuredWidth, widths[col]);
                                height = Math.max(renderer.measuredHeight, height);
                                dg.removeChild(renderer);
                        for (col = 0; col < dg.columnCount; ++col)
                            dg.addChild(renderer);
                            renderer.text = dg.columns[col].headerText;
                            widths[col] = Math.max(renderer.measuredWidth,widths[col]);
                            dg.removeChild(renderer);
                            text = widths[col];
                            dg.columns[col].width = text + widthPadding;
                        if (height != 0)
                            dg.rowHeight = height + heightPadding;
            ]]>
        </mx:Script>
        <mx:DataGrid id="myADG"
               dataProvider="{dpFlat}" rowCount="{dpFlat.length}" sortableColumns="false">       
                 <mx:columns>
                    <mx:DataGridColumn dataField="Region" />              
                    <mx:DataGridColumn dataField="Territory_Rep" headerText="Territory Rep" />
                     <mx:DataGridColumn dataField="Territory" />
                    <mx:DataGridColumn dataField="Actual" />
                    <mx:DataGridColumn dataField="Estimate" />
                </mx:columns>
       </mx:DataGrid>
       <mx:Button label="click" id="click" click="optimizeDataGrid(myADG,25,5);"/>
    </mx:Application>
    Regards
    Harikumar

    With horizontalScrollPolicy="off" (the default), it is hard to control
    column widths because the columns are sometimes overridden to make sure they
    fit on the screen.

  • 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 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?

  • 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?

Maybe you are looking for

  • FLV components work one at a time, but not in unison!

    I've done this before so I don't know why it's happening. I have an FLV component and 3 other FLV player components: Volume bar, play/pause button, and seek bar. They all have instance names and control the FLV correctly, but the seek bar and volume

  • Updating Bios

    Hello, I am trying to upgrade the bios on a friends motherboard. MSI 6787 ver:2 with an Award Bios V6.00PG. I have found the file AWFL826B.exe and W6787VMS.260 I think these are the correct files. With the files came a Word document telling you haw t

  • How to handle resize events of JSplitPane?

    Hi all, I have been looking up and down for how to be notified when a split pane is resized (or moved). That is, the bar is moved by the user. I tried adding a component listener, property change listener and action listener. None seem to get called

  • Message no F5836

    Hi, I am unable to create a goods receipt with respect to PO, as i am getting an error "field status group not defined in field status variant". Error Message no F5836. Should I create a field status variant/field status group and assign it to compan

  • Jittery, poor quality, final product

    I have been using FCP through Versions 2,3,4,4.5 and now I am on 5. The quality of my latest project looked awful on the TV screen - both when viewed directly from the FCP timeline (all rendered with blue/gray lines above the timeline) playing throug