Expand my Community achievements bar.

Grow datagrid when row added

Avatar

Level 1
Hi,



I have been trying for a few days now with no success; to
customise a datagrid so as that it grows in height when a new row
of data is added.



For example, if the datagrid has only 2 rows in it, I want it
to auto-size so that you only see those two rows, and no blank rows
below it. When I add a row of data, it should grow to allow for
that row. I also want to set a maximum height so that a scroll bar
comes in to play when there are too many rows for the window.



Thanks Patrick
4 Replies

Avatar

Level 1
Try triggering a function on the datagrid's change event. In
the function, count the rows from the datagrid's dataprovider and
set the datagrid's rowCount property to match. You can also change
the height in the function to match, or just don't give it a height
at all and it should adjust to it's contents

Avatar

Level 1
You don't say so specifically, but I think the datagrid is
intended to represent a resultset. If the user adds a row to the
datagrid, don't you want to add it to the database, also, or
actually first. Then let's say you load the datagrid in the
initApplication function that's called when the App starts up. If
the user adds another row to the database(?), just call the
initApplication function. Otherwise, you spend a lot of time coding
to do things that should happen automatically.

Avatar

Level 1
Hey camfieldaj,



Thanks for your response - this is how I am currently doing
it.

The problem however isnt that the data is added to the data
grid - but that the datagrid viewing size is not adjusted to fit.
Ie when I add a new row of data, this works fine but the data grid
stays the same size. I really want it to grow as it gets bigger,
and then say max out at 10 rows and a scroll bar is introduced.



I may try your suggestion DaNall, although I think i tried
something like this but had issues because some of the rows text
had to be wrapped.



Cheers,

Pat

Avatar

Level 1
:) well i'm solved the problem in two different ways but i
still don't like the solution. Anyways here is where i got to so
far

1- handle the resize event of the datagrid's container. you
can inherit the datagrid and addlisteners to its parent.

There you should check the total size of the rows + the
header. If the rowsTotal > containerheight you set the
grid.percentHeight = 100 else if the container height >
rowsTotal you set the grid.height = rowsTotal



2- This one is neat , but seems adobe didn't fulfill the
implementation ..it has some bugs .. not exactly obvious

You need to extend the datagrid and override
makeRowsandColumns ..



override protected function makeRowsAndColumns(left:Number,
top:Number,

right:Number, bottom:Number,

firstCol:int, firstRow:int,

byCount:Boolean = false, rowsNeeded:uint = 0):Point

{

var bottomTemp:Number =bottom;

var calculatedHeight:Number ;

//method a)

if (!cme_fullheight && dataProvider!=null) //only
draw rows as the need arrises

{ calculatedHeight =
measureHeightOfItems(-1,super.dataProvider.length + (headerVisible
? 1:0)) + (horizontalScrollBar != null &&
horizontalScrollBar.visible ? horizontalScrollBar.height : 0 );

if (height > calculatedHeight )

bottomTemp = calculatedHeight;

}



//method b)

// byCount = true; //for some reason adobe left this out
from public datagrid attributes donno why .. probably its buggy

//rowsNeeded = dataProvider.length ;



return
super.makeRowsAndColumns(left,top,right,bottomTemp,firstCol,firstRow,byCount,rowsNeeded)
;



}