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?
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..!
SKHi,
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
HarikumarWith 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 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,
SrilathaHi 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 -
Autosize column width to contents
Hello,
I'm using WAD 7 and trying to set up the 0ANALYSIS_PATTERN template to automatically adjust the column width to the contents of the cells. Is there such functionality? I tried using the ColumnWidth mod to set up the default width, but all that does is adjusting all columns to a set width which doesn't look good.
Any suggestions would be greatly appreciated.
Thanks!
MiluThere is a checkbox in the table inspector to auto-resize to fit content. Unfortunately, that only seems to work with rows, not columns.
-
Setting datagrid column width according to itemrenderer.
Hi all,
This is my first question ever in any forum i have visited, so if you find anything stupid about my way of asking question then Pls ignore.
I have taken a datagrid and for one of the datagrid column I have an itemrendere which is an HBOX. THe Hbox contains 3 buttons Edit, Update, cancel. At first only Edit button is visible and on click of it, It is removed from the Hbox and 2 other buttons i.e. Update and Cancel are added in the Hbox. what i want is when i add these 2 buttons the size of the datagrid column should get adjusted accordingly.
I have serached a lot abt this but couldnt find a solution. Please help.
Happy new year to all.....@Pramod :
(listdata.owner as datagrid) .validateNow();
// thats wat i did. but not working.
@John : TypicalItem may work but I am using Flex Builder 3 and i think it does not provide the typicalItem class in it. -
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. -
I have 3 grids and they each have 5 columns that are a fixed
width and a different number of other columns for each grid that
are not fixed. I try width and minWidth in the DataGridColumn but I
can only make one grid fill 100% across. Im sure its a bug. I would
think the grid would streatch the widths to make 100%. any
thoughts?Can you please put a code snippet? It would be easier to
analyze that way!
Thanks! -
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().
-
Autofit column width to table cell content in Pages
Hello,
Would anyone know how to autofit the column width of a table cell in Pages '09?
I have searched Pages Help to no avail.
Thank you very much in advance.There is a checkbox in the table inspector to auto-resize to fit content. Unfortunately, that only seems to work with rows, not columns.
-
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,
AprilIf 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. -
Fix ALV column width independent of content
Hi All,
I need to fix ALV column width independent of content. If I set the width of column as 10 and when the content is 20 characters long, the column expands to 20. I want the width of column to be fixed irrespective of content. I tried all properties available for ALV column and table but couldn't figure it out. We are on ECC 6.0 ENHP4. Any ideas how to achieve this.
Thanks,
TomI believe that I have done this setting fixed layout to true, and then manually setting the column widths in the code.
lo_model->if_salv_wd_table_settings~set_fixed_table_layout( abap_true )
lt_alv_column_table = lo_alv_model->if_salv_wd_column_settings~get_columns( ).
LOOP AT lt_alv_column_table INTO ls_alv_one_column.
ls_alv_one_column-r_column->set_width( '90' ). -
How can I update a Site Column with the content of an array with javascript CSOM?
I'm relative new to Sharepoint 2013, I'm trying to update the content of a Site column with the content of an array, I can retrieve and visualize the content of my site column, the user is able to change and save the necessary part and the changes are
saved into an array, now I have to update the content of the site column with the content of the array, but for some kind of reasons I can't accomplish that, any suggestion/example? This is my code so far to retrieve, visualize the site column and store the
mofication into my array.
<body>
<select id="dropdown" name="dropdown" onchange="optSelect()">
<option value="EngineType_Cylinders">EngineType_Cylinders</option>
<option value="EngineType_EngineCycle">EngineType_EngineCycle</option>
<option value="EngineType_EngineFamily">EngineType_EngineFamily</option>
<option value="EngineType_Euro">EngineType_Euro</option>
<option value="EngineType_FamilyEvolution">EngineType_FamilyEvolution</option>
<option value="EngineType_GasEmissionLevel">EngineType_GasEmissionLevel</option>
<option value="EngineType_Power">EngineType_Power</option>
<option value="EngineType_PowerSupply">EngineType_PowerSupply</option>
<option value="EngineType_Use">EngineType_Use</option>
</select><br />
<textarea id="textareadisplay" rows="25" cols="23"></textarea><br />
<input type ="button" value="Update values" onclick="addItemsToColumns()" />
</body>
My Javascript
$(function () {
SP.SOD.executeOrDelayUntilScriptLoaded(Function.createDelegate(this, function () {
var select = document.getElementById('dropdown').value;
console.log(select);
getSiteColumns(select);
}), 'SP.js');
var fieldChoice;
var choices;
var addFields = [];
var slc;
var clientContext;
function optSelect() {
slc = document.getElementById('dropdown').value;
getSiteColumns(slc);
function getSiteColumns(selection) {
clientContext = SP.ClientContext.get_current();
if (clientContext != undefined && clientContext != null) {
var web = clientContext.get_web();
fieldChoice = clientContext.castTo(web.get_availableFields().getByTitle(selection), SP.FieldChoice);
clientContext.load(this.fieldChoice);
clientContext.executeQueryAsync(Function.createDelegate(this, this.OnLoadSuccess), Function.createDelegate(this, this.OnLoadFailed));
function OnLoadSuccess(sender, args) {
choices = fieldChoice.get_choices();
var textarea = document.getElementById("textareadisplay");
textarea.value = choices.join("\n");
function OnLoadFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
function addItemsToColumns() {
clientC = SP.ClientContext.get_current();
var arrayForUpdate = $('#textareadisplay').val().split('\n');
fieldChoice.set_item(, arrayForUpdate);
fieldChoice.update();
clientContext.executeQueryAsync(function () { }, function () { });
function OnUpdateSuccess(sender, args) {
var newchoices = fieldChoice.get_choices();
My problem is on the function addItemsToColumns() please help! Thanks in advance.Let's look at your stylesheet -
<style type="text/css">
body {
background-image: url(assets/images/Business%20Men%20In%20Reception%20Col.2.jpg);
background-repeat: no-repeat;
background-color: #003;
margin-left:auto;
margin-right:auto;
position: relative;
width: 960px;
It's a good idea not to use spaces or any punctuation in your filenames when working for the web.
#header {
margin-left:auto;
margin-right:auto;
position: relative;
width: 960px;
#heading {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
font-style: italic;
font-variant: normal;
margin-left:auto;
margin-right:auto;
There's no need to specify the default values (font-variant:normal) or to specify auto margins for any block element without an explicitly defined width. And wouldn't it make more sense to put the font style on the body tag, where it will inherit into the rest of the page than to restate it as you have done in the next rule?
#bodytext {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
line-height: 25px;
font-variant: normal;
width: 300px;
#container {
width: 960px;
position: relative;
margin-left:auto;
margin-right:auto;
.rightimg {
float: right;
margin-left: auto;
padding-right: 40px;
#heading #navbar ul li {
padding: 30px;
</style>
Margin-left:auto can't work without knowing what the width of the element is.... Keep your CSS lean and targeted - it will help you to debug your layouts. -
Column width in finder LIST view
I am using Yosemite. This issue has been driving me mad for years and try as I may I cannot find the solution.
How do you set a default column width in Finder LIST view for all folders? Whatever I do (for example VIEW OPTIONS, USE AS DEFAULTS) does not work.
Can anybody help? I would use third party plugins if I could find something that controls this. Please note: I am using LIST view NOT column view.
Many thanksLike Jim, I also generally use Icon view for folders containing images, and have the View Option to show item info selected. Column view will also show image dimensions (both of these work, provided the folder has been indexed by Spotlight).
If you want to see the dimensions, but also want to view the folder contents in List view, the best you can do is bring up the Inspector (Command-Option-i), expand the More Info section, then move down the list using the arrow key. The Inspector pane's contents change with each new selected item, and the More Info section includes the dimensions.
Francine
Francine
Schwieder -
How do you change the column widths in a master-detail input form?
I have changed several columns to af:inputText so that the field contents can be modified, but this defaults the column width to a huge size, way past the size of the actual data field itself. Modifying the width attribute is ignored and dragging the column dividers is also ignored.
How do I reduce the widths of these columns?
ThanksHi,
maybe this blog entry "Referencing Maximum Length of an Attribute in an EL Expression" by Steve Muench helps
http://radio.weblogs.com/0118231/2007/06/04.html#a839
Frank
Maybe you are looking for
-
my friend found an iPhone 5 ; he plugged it in the computer willing to restore when the restore was succesfull he was ready to set it up on his way to do it , icloud ask him for a password from certain email he doesnt know, is there any way you could
-
Hi, all. Is it just me, or does anyone else see a problem loading the iPhoto category or any other forum? I refreshed the page today and it was twice as wide as it should be. I figured I needed to freshen up my browser, so I quit Firefox and tried ag
-
Changing the Database characterset
Hi, My oracle 9i database characterset is AL32UTF8. I wanted to change this to UTF8 for some testing purpose... After few days i need to reset this characterset back to AL32UTF8. how should i proceed on this? Plz adivice..... Regards, Ashok Kumar.G
-
Can't new iTunes/Quicktime - Error Message
Hi, I've done this in a separate post b/c I didn't see anyone else with this error message. ITunes starts to download normally, but then I get this message: "Errors encountered while performing the operation. Look at the information window for more d
-
Upgrade Mac OS 10.5 not to Maverics
I've an iMac 7,1 with Mac OS 10.5. I'd like to upgrade my OS as much as possible, but not to Maverics. Can I purchase Mountain Lion or should I fist get Snow Leopard? Thanks!