Flex DataGrid last empty column dynamic width

Goal: have a blank right-most column in a DataGrid that takes
up the slack in case the other columns do not total 100% of the
overall grid width.
This is what I have, which seems to work:
<mx:DataGridColumn editable="false" sortable="false"
minWidth="0"/>
I am wondering if there is a best-practice way of specifying
such a last column that is better than the above tag.
Flex SDK 3.2
Thank you,
Mike Chabot

It worked!!!!!!! Thank you!! What you mentioned was indeed the problem!
Here is the custom item renderer's set data function
Before
Now
override public function set data(value : Object):void{
                  super.data = text;
                  this.txt.text = (value as Slide).text ; //txt is the Label control
override public function set data(value : Object):void{
                  super.data = value;
                  this.txt.text = (value as Slide).text ; //txt is the Label control
oh man, this is such a stupid mistake. I think I was confused with having three text properties - one inherited from MXDataGridItemRenderer, one in my txt Label control and one on my slide.
I had no idea that sending the value up to the super class was so important. None of the docs I read seemed to give much importance to this statement.
thanks so much and sorry for taking up so much of your time. I guess it is uncessary to post any more code.

Similar Messages

  • Why the last column change width automaticlly?

    a datagrid has 3 columns,
    set horizontalScrollPolicy="auto"
    I stretch first or second column, the third(last) column will
    change width automaticlly. If I wanna fix the width of last column,
    what should I do?
    thanks....

    I don't think there is way to do this. This seems to be
    hard-coded -- thru a private function called calculateColumnSizes()
    -- in the DataGrid class.
    So you're essentially out of luck! Unless, of course, you
    decide to subclass the DataGrid class, override updateDisplayList
    method and provide your own implementation of calcualte column
    size!
    Or maybe, logging a change request for Flex team.
    ATTA

  • 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

  • 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

  • Hide or Delete Empty columns in dynamic internal table

    Hi,
                                I am having an dynamic internal table which contains more than 100 columns.
             I need to delete empty column from that table, can any one help this.

    Hello,
    If you are talking about ALV then you can just the the table for empty columns before populating fieldcataloge and hide the columns.
    If your query is still not answered please provide a detail requirement.

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

  • 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

  • Sorting columns in a flex datagrid

    The datagrid gets its data from a back end database which has records like
         RecordID           Division     Department      Date_Report_Submitted
        1.                 Finance      Accounting        11/1/2010
        2.                 Engineering  Design            4/2/2011
        3.                 Engineering  Implementation    4/2/2011
        4.                 Support      Chat_Support      2/4/2010
    Clicking on the headers in the Datagrid column(Department) results in a sort based on recordID like
                Division     Department      Date_Report_Submitted
                Finance      Accounting        11/1/2010
                Engineering  Design            4/2/2011
                Engineering  Implementation    4/2/2011
                Support      Chat_Support      2/4/2010
    whereas I want it to be sorted alphabetically for the Datagrid column(Department) like
                Division     Department      Date_Report_Submitted
                Finance      Accounting        11/1/2010
                Support      Chat_Support      2/4/2010
                Engineering  Design            4/2/2011
                Engineering  Implementation    4/2/2011
    since Accounting should come before Chat_Support as per lexicographical order.
    Looked at http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-fl ex/#more-590 and have something like
             <mx:DataGrid id="myRecords"  dataProvider="{myRecords_dp}" width="810" height="274"                        
        itemClick="getRecordData(event)">
            <mx:columns>
                <mx:DataGridColumn id="firstCol" width="180" fontFamily="Arial" fontSize="12"
                                   wordWrap="true" />
                <mx:Button label="Click to Sort" click="mysort()" />
            </mx:columns>
        </mx:DataGrid>
    and
                private function mysort():void
                   var sortField:SortField = new SortField();
                   sortField.compareFunction = mycompare;
                   sortField.descending = false;
                   var sort:Sort = new Sort();
                   sort.fields = [sortField];
                   myRecords.sort = sort;
                   myRecords.refresh();
                            private function mycompare(lhs:Object, rhs:Object):int
                    var valueA:String = lhs.text();
                    var valueB:String = rhs.text();
                    return ObjectUtil.stringCompare(valueA, valueB);
    I get errors like
    1061: Call to a possibly undefined method refresh through a reference with static type mx.controls:DataGrid.   
    for myRecords.refresh();
    and
    Access of possibly undefined property sort through a reference with static type mx.controls:DataGrid.   
    for myRecords.sort
    Any suggestions would be appreciated.

    I should have clarified this from the start itself. The backend database has few tables. One is Divisions which has some fields like
    Division ID Division Name. Another is Department which has fields like RecID, Division ID, Department Name. What is being retrieved from the dataprovider(myRecords_dp) is Rec ID, then a labelfunction converts the Rec ID into Department name by looping over the department table and displays it. So, if Implementation has a recID of 3 and Chat_Support of 4, Implementation will come before Chat_support when I click on the header so it will not be in lexicographical order.

  • DropDownList ItemRenderer within Flex Datagrid Not Refreshing

    I have a datagrid which contains a Spark dropdownlist that needs to  obtain dynamic data.
    The datagrid uses a separate dataProvider.
    When I use a static ArrayCollection within my ItemRenderer, it works (please see listing 1).
    However, when I use Swiz to mediate a 'list complete' event to load  the ArrayCollection, the dropdownlist does not show the new data (please  see listing 2).
    Using the debugger, I inspected the dropdownlist ItemRenderer and  have confirmed the new data is being loaded into the ArrayCollection.
    The new data is not shown in the UI control. I have tried  invalidateProperties() + validateNow() and dispatching events on both  the control and the renderer (this), but nothing seems to make the new  data appear in the control on the datagrid.
    Please help !!!
    Listing 1: Datagrid and static ArrayCollection (this works)
    <mx:DataGrid x="10" y="25" width="98%" id="dgInventory" paddingLeft="25" paddingRight="25" paddingTop="25" paddingBottom="25"
                         editable="true"
                         itemClick="dgInventory_itemClickHandler(event)" dataProvider="{acInventory}"
                         creationComplete="dgInventory_creationCompleteHandler(event)"
                         height="580">
                <mx:columns>
                    <mx:DataGridColumn headerText="Item" dataField="itemName" itemRenderer="components.ItemRendererItem"
                                       rendererIsEditor="true" editorDataField="selection" editable="true"/>
                    <mx:DataGridColumn headerText="Quantity Required" dataField="quantityReq" itemRenderer="components.ItemRendererQuantityRequired"
                                       rendererIsEditor="true" editorDataField="selection" editable="true"/>
                </mx:columns>
    </mx:DataGrid>
    <fx:Script>
        <![CDATA[      
            import mx.collections.ArrayCollection;
            import spark.events.IndexChangeEvent;
            public var selection:int;
            [Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection(
                [   { itemName: "Item1"},
                    { itemName: "Item2"},
                    { itemName: "Item3"},
            protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
                selection = e.newIndex;
        ]]>
    </fx:Script>
    <s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                    selectedIndex="{int(dataGridListData.label)}"
                    change="dropdownlist1_changeHandler(event)"
                    width="80%" top="5" bottom="5" left="5" right="5"/>
    Listing 2: Dynamic ArrayCollection (does not work):
    <?xml version="1.0" encoding="utf-8"?>
    <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                              xmlns:s="library://ns.adobe.com/flex/spark"
                              xmlns:mx="library://ns.adobe.com/flex/mx"
                              focusEnabled="true">
        <fx:Script>
            <![CDATA[      
                import event.ItemEvent;
                import mx.collections.ArrayCollection;
                import mx.events.FlexEvent;
                import spark.events.IndexChangeEvent;
                public var selection:int;
                [Bindable]
                protected var acItem:ArrayCollection = new ArrayCollection();
                protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
                    selection = e.newIndex;
                protected function ddlItem_creationCompleteHandler(event:FlexEvent):void
                    var eve : ItemEvent = new ItemEvent( ItemEvent.LIST_ITEM_REQUESTED );
                    dispatchEvent( eve );
                [Mediate( event="ItemEvent.LIST_ITEM_COMPLETE", properties="acItem" )]
                public function refreshness( _acItem : ArrayCollection ):void
                    acItem.removeAll();
                    var len:int = _acItem.length;
                    if (len > 0)
                        for (var i:int=0; i < len; i++)
                            var newItem:Object = new Object;
                            newItem["itemName"] = _acItem[i].itemName;
                            acItem.addItem(newItem);
                    this.invalidateProperties();
                    this.validateNow();
                    //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
            ]]>
        </fx:Script>
        <s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                        selectedIndex="{int(dataGridListData.label)}"
                        creationComplete="ddlItem_creationCompleteHandler(event)"
                        change="dropdownlist1_changeHandler(event)"
                        width="80%" top="5" bottom="5" left="5" right="5"/>
    </s:MXDataGridItemRenderer>

    After re-reading Peter Ent's ItemRenderer series, this turned out to be quite simple.
    I extended DataGrid to have the ArrayCollection property I needed, then added this to my renderer:
    [Bindable]
                protected var acItem:ArrayCollection = new ArrayCollection();
                override public function set data( value:Object ) : void
                    super.data = value;
                    acItem = (listData.owner as MyDataGrid).itemList; // get the data from the renderer's container (by extending it to add a property, if necessary)

  • Flex datagrid with complex data item - drag doesnt start sometimes

    Hi,
    my project has a datagrid which is rendering complex data item. I need to drag one row from the grid and drop it into the same grid but in a different position.
    I have enabled drag, drop and dragMove.I am able to drag and drop the rows. The problem is that sometimes the drag doesnt start.
    Here are a few scenarios where drag doesnt start
    the first column is not editable. if I start my drag by doing a mouse down on the frist cell of the row, it usually drags an empty row but sometimes it drags the whole row.
    if I have dragged and droped a row in position i(say). Then sometimes the row at position i-1 or i+1 doesnt get dragged no matter how many times i try to do mouse down and drag. However, if I drag some other row (not necessarily drop it elsewhere) and then try this row, it works.
    any pointers would be helpful.
    thanks in advance

    Update on item 4a -
    This was a major issue (the main reason for opening this thread really) and I managed to resolve it!
    As part of my application, I override the default DataGrid behavior for column selection (headerRelease event).
    Instead of sorting, I change the column's header looks and define it as Selected (for showing its dynamic properties and enable its deletion).
    At first I did this by setting styles, but the look didn't refresh unless I created a new instance of the header renderer.
    Later I changed thi behavior to work with states, but I left the new header renderer instance creation commands and those lines created all the mess!
    Conclusion -
    If you define a custom header renderer for your datagrid column and then a custom item renderer, don't create a new instance of your header renderer!
    It would still be nice to get some response for the other issues I raised.
    Thanks and have a nice week.

  • Datagrid last row flickering problem.

    Hi,
        I used flex 3.5 datagrid. It is a complex datagrid with lot of itemrenderers and itemeditors.when my datagrid has vertical scroll and when i scroll datagrid, last row keep on flickering.
         any idea or solution for this problem?   

    my grid contains 6 columns. Among 6, some of the column texts are  visible some of them hided.
    it is only happens to last row of the Datagrid.
    This is happened when i scroll my datagrid vertically.

  • Flex datagrid help

    Hi,
    I have a datagrid which is showing the products and their
    decsription , price etc. I want to do this: When a user select one
    item in the datagrid it will show the components in a small window
    or something , those are not showing in the datagrid. I populate
    the datagrid from a sql server table by remote object. How can I do
    this ? Please help. I am a newbe.. Thanks in advance.

    Right. Here's my DataGrid:
    <mx:DataGrid width="876" height="264" id="myDataGrid"
    dataProvider="{userRequest.lastResult.enter.reg}">
    <mx:columns>
    <mx:DataGridColumn headerText="Last Name"
    dataField="lName" width="150"/>
    <mx:DataGridColumn headerText="First Name" id="fName"
    dataField="fName" width="150"/>
    <mx:DataGridColumn headerText="Phone" dataField="Phone"
    width="150"/>
    <mx:DataGridColumn headerText="Vehicle"
    dataField="Vehicle"/>
    </mx:columns>
    </mx:DataGrid>
    You'll notice the
    dataProvider="{userRequest.lastResult.enter.reg} which is where you
    get the data from the SQL database.
    Now, you'll see this:
    <mx:TextArea x="103" y="9" width="177" height="19"
    id="fNameText" text="{myDataGrid.selectedItem.fName}"/>
    <mx:TextArea x="103" y="35" height="19" width="177"
    id="lNameText" text="{myDataGrid.selectedItem.lName}"/>
    <mx:TextArea x="103" y="61" height="19" id="phoneText"
    text="{myDataGrid.selectedItem.Phone}"/>
    <mx:TextArea x="103" y="87" height="19" width="177"
    id="emailText" text="{myDataGrid.selectedItem.Email}"/>
    <mx:TextArea x="344" y="9" height="19" width="209"
    text="{myDataGrid.selectedItem.Address}" id="addressText"/>
    <mx:TextArea x="344" y="35" height="19" width="209"
    text="{myDataGrid.selectedItem.City}" id="cityText"/>
    <mx:TextArea x="344" y="61" height="19" width="209"
    text="{myDataGrid.selectedItem.State}" id="stateText"/>
    <mx:TextArea x="344" y="87" height="19" width="82"
    text="{myDataGrid.selectedItem.Zip}" id="zipText"/>
    <mx:TextArea x="605" y="10" height="18" width="109"
    text="{myDataGrid.selectedItem.Date}" id="dateText"/>
    <mx:TextArea x="605" y="35" height="19" width="109"
    text="{myDataGrid.selectedItem.Time}" id="timeText"/>
    Notice the {myDataGrid.selectedItem.****}, the ****'s are the
    name of the database field you passed in from SQL.
    Basically what that did was I had a DataGrid with only 4 of
    the values showing that I wanted, then had a separate panel where
    the other fields displayed.

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

  • JSF rich:dataGrid - display empty cells

    Hi,
    I created a rich:dataGrid with 5 columns but when the arraylist has about only 2 rows of data, the data grid displays empty cells.
    How do I get rid of the empty cells? border=0 did not solve the problem.
    Thanks in advance.

    apply simple table CSS dear.
    Here is one sample style css you can modify as per your need
    <style>
    .myDataGrid thead th {     
         background: #ffffff; /*change as per your need*/
         text-align: center;
         font-size: small;
         font-weight: normal;
         padding: 5px;
         border : 1px solid #ffffff; /*change as per your need*/
         border-bottom: 1px solid;
    .myDataGrid tbody td {
         font-size: small;
         padding-right: 10px;
         text-align: left;
         border : 1px solid #ffffff; /*change as per your need*/
         padding-left: 5px;
    .myDataGrid {
         width: 100%;
         border : 1px solid #ffffff; /*change as per your need*/
         border-collapse: collapse;
         margin: 10px;
    .myDataGrid caption {
         text-align: left;
         font-weight: normal;
         padding: 5px;
    </style>and apply it in datagrid
    <rich:dataGrid  columns="3"  value="#{orderBean.orderItems}" var="item"  styleClass="myDataGrid" >
           <h:outputText value=" #{item.description}" />
         <h:outputText value=" #{item.qty}" />
    </rich:dataGrid>

Maybe you are looking for