Column Width of DataGrid

Hi All,
How to calculate width of invisible and invisible columns ? How do we set the width so the visible columns so that width of invisible columns are not incuded in the layout.?
Ia there anything like includeInLayout for DataGridColumn >
Thanks,
Shweta

You can manually manipulate the columns used in a datagrid by using the "columns" property on the the Datagrid. Then you can add, move and reorder them to your liking.

Similar Messages

Flex 3: DataGrid Column width on resize

Hello experts,
I am facing an issue with width of DataGrid columns. We are using Flex 3.2.
I am setting the widths for columns in creationComplete handler of DataGrid. When the browser window is resized, say restore down and then maximize,
the column widths are changing. Please find the code below:
<?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;
        [Bindable]
        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="80%" 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="{isVisible}"/>
         <mx:DataGridColumn id="Price" dataField="Price" />
      </mx:columns>
   </mx:DataGrid>
</mx:Application>
Is there anything wrong i am doing here? Please help me in resolving this.
Thanks,
Srilatha

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

DataGrid: column width to content

Hi all.
I have some DataGrid, filled from array or from external
source - it's not matter.
Headers of columns can have different length, and I need to
implement columns resizing depends of header length.
I understand, that I must use some custom headerRenderer, but
I am flex newbie and have not used renderers earlier, so my test
was not sucessfull.
I've configired my DataGrid as in the attached code..
and how must I implement my renderer? should I override "set
data function" or some other method?
how can I get header lentgh in pixels?
and then how can I set column width?
Thanks and best regards.

Should I use a Label, or I need another component?
For example, can I use such renderer format?

Spark DataGrid with Dynamic Column Width

Lets suppose I have a Spark Datagrid with no explicit typicalItem. When the Datagrid is initialized, the column widths are calcualted correctly based on the contents of the dataprovider. However if I add/remove an item from the dataprovider, or modify the one of the objects in the dataprovider, the column widths never update to reflect the change. Is the the correct behavior for a DataGrid? If so, is there any method I can call to force the DataGrid to recalculate and redraw the column widths?

When Spark DataGrid doesn't have a typicalItem, it uses the first dataProvider item as the typicalItem. If you change that, the DataGrid won't pick it up immediately. You can invalidate the current typicalItem using dataGrid.invalidateTypicalItem().

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

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.

How to avoid that the last column in a datagrid increase the width out of the window?

I have a datagrid with this configuraction:
<DataGrid.Columns>
<DataGridTextColumn Header="Column01" Binding="{Binding Property1, Mode=OneWay}"/>
<DataGridTextColumn Header="Column02" Binding="{Binding Property2, Mode=OneWay}"/>
<DataGridTextColumn Header="Column03" Binding="{Binding Property3, Mode=OneWay}"/>
</DataGrid.Columns>
The last column is a description, so the text can be a bit large. so I would like that the width don't be wnough greater than makes the datagrid has a width out side the window.
For this, I have read that I can use Width="Auto" in all the columns and in the last column width="*", but in this case all the coloumns has a very low width so I can't read anything.
The code that I have used in this case is:
<DataGrid.Columns>
<DataGridTextColumn Header="Column01" Binding="{Binding Property1, Mode=OneWay}" Width=""Auto"/>
<DataGridTextColumn Header="Column02" Binding="{Binding Property2, Mode=OneWay}" Width=""Auto"/>
<DataGridTextColumn Header="Column03" Binding="{Binding Property3, Mode=OneWay}" Width=""*"/>
</DataGrid.Columns>
I am using visual studio community edition and wpf 4.5.1.
Thank so much,

>>For this, I have read that I can use Width="Auto" in all the columns and in the last column width="*", but in this case all the coloumns has a very low width so I can't read anything.
Can't you just set an explicit width for the first two columns then?, e.g.:
<DataGrid.Columns>
<DataGridTextColumn Header="Column01" Binding="{Binding Property1, Mode=OneWay}" Width="100"/>
<DataGridTextColumn Header="Column02" Binding="{Binding Property2, Mode=OneWay}" Width="100"/>
<DataGridTextColumn Header="Column03" Binding="{Binding Property3, Mode=OneWay}" Width=""*"/>
</DataGrid.Columns>
There is also a MinWidth property that you can use to prevent the columns from being to narrow:
<DataGrid.Columns>
<DataGridTextColumn Header="Column01" Binding="{Binding Property1, Mode=OneWay}" Width="Auto" MinWidth="100"/>
<DataGridTextColumn Header="Column02" Binding="{Binding Property2, Mode=OneWay}" Width="Auto" MinWidth="100"/>
<DataGridTextColumn Header="Column03" Binding="{Binding Property3, Mode=OneWay}" Width=""*"/>
</DataGrid.Columns>
Hope that helps.
Please remember to mark helpful posts as answer to close your threads and then start a new thread if you have a new question.

Trouble with DataGrid's last column width

I have a datagrid with thirty columns.
When I use the mouse to drag the window and resize its size,the last column width becomes more and more wide,and the previous column width is squeezed small.
If anybody else came accross the same problem,can you share your solution?
Thanks,
April

If horizontalScrollPolicy=”off” then there is an attempt to fit all columns within the width of the DG while respecting minWidth of the columns. Make sure the minWidths allow the columns you want to shrink can shrink.
However, there is still a chance of round-off error. I think the only solution may be to set the width of each column as you want it on a resize event from the DG.

Locking middle or last column in a datagrid

Does anyone know how to lock say the middle or last column in
a datagrid. What i really need is for the first and fifth column to
be locked in a datagrid or Advanced datagrid. Is this possible or
do i need to put two datagrids next to each other and try to sync
the vertical scroll??
Thanks,
-Jay

>>For this, I have read that I can use Width="Auto" in all the columns and in the last column width="*", but in this case all the coloumns has a very low width so I can't read anything.
Can't you just set an explicit width for the first two columns then?, e.g.:
<DataGrid.Columns>
<DataGridTextColumn Header="Column01" Binding="{Binding Property1, Mode=OneWay}" Width="100"/>
<DataGridTextColumn Header="Column02" Binding="{Binding Property2, Mode=OneWay}" Width="100"/>
<DataGridTextColumn Header="Column03" Binding="{Binding Property3, Mode=OneWay}" Width=""*"/>
</DataGrid.Columns>
There is also a MinWidth property that you can use to prevent the columns from being to narrow:
<DataGrid.Columns>
<DataGridTextColumn Header="Column01" Binding="{Binding Property1, Mode=OneWay}" Width="Auto" MinWidth="100"/>
<DataGridTextColumn Header="Column02" Binding="{Binding Property2, Mode=OneWay}" Width="Auto" MinWidth="100"/>
<DataGridTextColumn Header="Column03" Binding="{Binding Property3, Mode=OneWay}" Width=""*"/>
</DataGrid.Columns>
Hope that helps.
Please remember to mark helpful posts as answer to close your threads and then start a new thread if you have a new question.

Detect Column on mx:Datagrid drop event

I've been searching for a way to detect the column index when I drop on an mx:datagrid using Flex 4. I can find the way to get the row index, but not the column. Is the only way to define an itemeditor for each column, or is there something better (cleaner).
If it must be an itemeditor, is there an example of one that handles the dropevent out there somewhere?
I'm reluctant to try the AdvancedDatagrid after seeing all the posting about bugs and poor code quality.

if it's not necessary for the user to resize the column widths, i'd say use a single column with an itemRenderer, and handle what gets shown inside that.
if you must use multiple columns, then probably you're going to blaze the trail on performance testing.
but it sounds like you are asking if you should limit the data to only 10 <items>.
if so, probably convert the xml to ArrayCollection. Large XML can freeze an app when the XML is updated.
then, if you need more optimization after that, you can disclude <items> when converting to arrayCollection

In Sales Order changing the column width to see all item desciption?

When in the sales order screen .
Expand the column width of say the item description.
How do I save the column width for all the sales documents for the field item description in sales order ?

Hi,
The column width of the Document will be defaulted to the same size at which the user has saved the last document.
So, if a user has saved the Sales Order with a big column width for the 'Item Description' then after saving and re-entering into the Sales Order, the user can see the same column width for all the Sales Order's.
I hope the above helps.
Cheers~
Jitin Chawla

Dynamically setting column width doesn't work all the time

I wanted to dynamically set the width of a column in a JTable to be half of the width of a another column. This should happen whenever the frame is resized. But somehow I need to tell this twice to Java. If I don't then sometimes the column width isn't set new.
Is this a Java bug or what?
public void componentResized(ComponentEvent ce)
     try
          ref.table.getColumn(ref.rsmd.getColumnLabel(5)).setMaxWidth(ref.table.getColumn(ref.rsmd.getColumnLabel(1)).getWidth() / 2);
          ref.table.getColumn(ref.rsmd.getColumnLabel(5)).setMinWidth(ref.table.getColumn(ref.rsmd.getColumnLabel(1)).getWidth() / 2);
          // Again, or it won't work:
          ref.table.getColumn(ref.rsmd.getColumnLabel(5)).setMaxWidth(ref.table.getColumn(ref.rsmd.getColumnLabel(1)).getWidth() / 2);
          ref.table.getColumn(ref.rsmd.getColumnLabel(5)).setMinWidth(ref.table.getColumn(ref.rsmd.getColumnLabel(1)).getWidth() / 2);
     catch(SQLException e)
}

Is it possible that your call to
ref.table.getColumn(ref.rsmd.getColumnLabel(5)).setMinWidth(ref.table.getColumn(ref.rsmd.getColumnLabel(1)).getWidth() / 2);
is altering the response created by
ref.table.getColumn(ref.rsmd.getColumnLabel(5)).setMaxWidth(ref.table.getColumn(ref.rsmd.getColumnLabel(1)).getWidth() / 2);
? Have you tried calling them once but in the other order? Or just calling the "setMaxWidth" call twice and leaving out the second "setMinWidth"?
Good luck... :)

How to extract the column width in ALv report if its executed in background

I am executing an ALV report in background , in front end i am getting data properly, in back end for some columns some of the digits are missing.For example if PO no is of 10 digits it will display only 8 becos column size is like that , how to extract coulmns in back ground.
I have executed in background and checked the spool and for some of the columns width is not sufficient to display comeplete data so please suggest how to extract the columns sizes if executed inj background for an ALV

Hi Deepthi,
you can try with the above mentioned suggestions ,if its worked its fine ,
If not use Docking container instead of custom container, For ALV in back ground jobs, its suggest to use docking container instead of custom container , below you can find the declaration for docking container and code to use docking and custom container in your program for fore and back ground.
or you can use docking container alone for both operations.
Data : G_DOCK1 TYPE REF TO CL_GUI_DOCKING_CONTAINER,
IF CCON IS INITIAL. (ccon is container name )
*Check whether the program is run in batch or foreground
    IF CL_GUI_ALV_GRID=>OFFLINE( ) IS INITIAL.
*Run in foreground
      CREATE OBJECT CCON
        EXPORTING
          CONTAINER_NAME = 'CON1'.
    CREATE OBJECT GRID1
        EXPORTING
          I_PARENT = parent_1.
ELSE.
*Run in background
      CREATE OBJECT GRID1
        EXPORTING
          I_PARENT = G_DOCK1.
    ENDIF.
ENDIF.
B&R,
Saravana.S

How to set dynamic column width for analysis item

Dear Experts,
I have a query view which is added in the web template as an analysis item. The web item properties on width is not working - I tried entering a value in the width but when I execute the template, the query view's width still stays the same.
Module com.sap.ip.bi.rig.ColumnWidth don't seem correct because I don't want the column width to be static. As my number of columns may change, I wanted the overall width of my query view to stay the same.
Appreciate any ideas which can solve this issue
Thanks and Regards,
huimin
BW newbie

Hi Huimin,
I don't think it is possible to fix the width of the Analysis webitem since it dynamically adjusts its width based on the text maxlength within its cells. Unless you use com.sap.ip.bi.rig.ColumnWidth where the cols are static, you cannot achieve this.
Even if you do override the css settings using a cell padding or something, the portal settings would override the same. How about using a Report webitem to insert tables/charts & check if the width can be adjusted here - just a thought.
--Priya

Web Application Designer: Column width on analysis_item with BW 7.0

Hi,
I'm new to SAP world and I have found a problem I'm not able to solve. I'm working with the Web Application Designer and I want to modify the cell properties (such as cell width) for aligning different queries. In fact, my question are:
<b>
1. Is it possible to hard-code/specify column widths of the analysis_item?
2. The property width of the analysis_item doesn't work, does it?
</b>
Thanks for your time and efforts.
Message was edited by:
Daniel Rubio

Hi,
I have just discovered the capability of modifying columns widths with css properties.
So if I add to the head section of the html:
div.prueba2 .urSTTDBdr1
div.prueba2 .urSTTDBdr
div.prueba2 .urSTTDBdr2
And later I put the AnalysisItem between a div class="prueba2" and /div, the columns widths are changed.
Do you know where can I find all the style properties (such as urSTTDBdr1) and its functions?
Thanks

Column Width of DataGrid

Similar Messages

Maybe you are looking for