AdvancedDataGrid Header

Hello All,
I'm trying to add an image alongside the header text whenever
the mouse cursor moves over a field header in the AdvancedDataGrid
component. I tried to do this using this example for a DataGrid -
http://www.thebetterside.com/scrawl/srcview/index.html
, but the mouseover event is triggered only when the mouse is moved
on the first line of the grid and not the header in an
AdvancedDataGrid. Is there another way of modifying the
advanceddatagrid header display on this mouse event.
thanks
Prash

the link above should be
http://www.thebetterside.com/scrawl/ScrawlExample4.html

Similar Messages

Draw lines in AdvancedDataGrid header

Hi all,
I want to draw a vertical line in AdvancedDataGrid column header.
Can any one bring me in to that way.
Thanks in advance

Or just use a second plot with a special style.
LabVIEW Champion . Do more with less code and in less time .
Attachments:
trial 1MOD.vi ‏10 KB

How to render Controls in AdvancedDataGrid Header which represents the individual column?

I want to render different controls in advanced datagri header like in image below
Here I have two rows in the grid header. First row contains the five image icons and second row contains the header text.
On click of header text it will change into combobox which give aggregate functionality on the grid. Now I want to do aggregation on the respective columns.I am just placing the controls in the headrer renderer. But the problem is that if I hide an icon in one column then it will hide in all the columns because the controls are placed in the header renderer. So can anybody tell me the solution to how to place controls in the grid header which represents each column..
Any help is much appreciated!!!!!!!!!!!!!

Check out the rendererProviders property on AdvancedDataGrid. It lets you dynamicaly determine what renderer to use at runtime based on the data being rendered. It takes a list of AdvancedDataGridRenderer instances, and those instnces have properties for colSpan and rowSpan.

AdvancedDatagrid Header Navigation Problem

Hi, I was wondering, if it's possible not to navigate onto
the advanced datagrid header, or somehow turn off it's selection
ability. I mean if I simply use the UP arrow on the keyboard, i can
jump up to the header of the grid, and i'd like to switch off that.
Is it possible without using HeaderRenderer.ediatble = false; ???
Thanks

i guess that means there's no solution... :(

FB3 M3 Beta2- Advanceddatagrid column header multiple sort

Hello People,
Before 10-1 when the M3 B2 of FB3 comes out i had normal
columnheaders with the new beta version there are suddenly multi
sort functions added to the columnheaders of the advanced datagrid!
How can i remove those.. i have alot of columns and now is
the headertext wordwrapping like nuts!
-Sjoerd

You can set the property sortExpertMode to "true" in
AdvancedDataGrid.
The vertical line in the AdvancedDataGrid Header is not shown
when sortExpertMode="true".
Even then, if the headers does not get wordwraped, please
file a bug here -
http://bugs.adobe.com/flex
Thanks,
Sameer

AdvancedDataGrid headerrenderer children added dynamically do not display

The AdvancedDataGrid in Flex 3.x does not correctly render children of a custom headerrenderer when the children are added dynamically. This works correctly with the DataGrid.
An AdvancedDataGrid has a custom headerrenderer with one field to display the column header text.
A show button below the grid adds a text input field in the header below the column text in the header.
When the show button is selected, the AdvancedDataGrid header sizes correctly to leave space for the field but does not display the field.
If I drag the column, the text input field displays as I am dragging. See the 3 images below.
I have included the 3 source files. What is the correct way to dynamically add children to an AdvancedDataGrid header?
Thanks.
1. AdvancedDataGrid with only the column header text:
2. After Show is selected, the header is sized for the text field below:
3. Only dragging the column header temporarily shows the text field:
1. TestGrid.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onInit(event)" width="100%" height="100%">
<mx:Script>
<![CDATA[
     protected function onInit(event:Event):void {
          var cols:Array = grid.columns;
          var colWidth:int = grid.width;
          var col:AdvancedHeaderColumn = new AdvancedHeaderColumn();
          col.wordWrap = true;
          col.show = false;
          var headerRenderer:ClassFactory = new ClassFactory(AdvancedHeaderLabel);
          // Add any custom properties
          headerRenderer.properties = {text: "Column1 header that wraps", dataGridColumn: col};
          col.headerRenderer = headerRenderer;
          col.headerWordWrap = true;
          cols.push(col);
          grid.columns = cols;
          grid.measuredWidth = colWidth;
     protected function showText(event:Event):void {
          var cols:Array = grid.columns;
          for each (var col:AdvancedHeaderColumn in grid.columns) {
               col.show = show.selected;
          grid.columns = cols;
]]>
</mx:Script>
     <mx:AdvancedDataGrid id="grid" height="100%" width="100%" variableRowHeight="true" editable="true" lockedColumnCount="1"/>
     <mx:Button label="Show" id="show" click="showText(event)" selected="false" toggle="true"/>
</mx:Application>
2. AdvancedHeaderLabel.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
     import mx.controls.TextInput;
     import mx.core.UITextField;
     // properties
     public var text:String;
     public var dataGridColumn:AdvancedHeaderColumn;
     // Column header
     public var textField:UITextField;
     // Optional text input field
     public var textInput:TextInput;
     override protected function createChildren():void {
          super.createChildren();
          // Always add the header text
          textField = new UITextField();
          textField.text = text;
          textField.multiline = true;
          textField.wordWrap = true;
          textField.percentWidth = 100;
          addChildAt(textField, 0);
     override protected function commitProperties():void {
          super.commitProperties();
          // Add the text input field?
          if (dataGridColumn && dataGridColumn.show && !textInput) {
               textInput = new TextInput();
               box.addChild(textInput);
     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
          super.updateDisplayList(unscaledWidth, unscaledHeight);
          // Position and size the textInput field
          if (dataGridColumn.show && textInput) {
               textInput.y = textField.getExplicitOrMeasuredHeight();
               textInput.setActualSize(unscaledWidth, textInput.getExplicitOrMeasuredHeight());
     override protected function measure():void {
          super.measure();
          measuredWidth = textField.getExplicitOrMeasuredWidth();
          measuredHeight = textField.getExplicitOrMeasuredHeight();
          // Make room for the text input field
          if (textInput) {
               measuredHeight += textInput.getExplicitOrMeasuredHeight();
]]>
</mx:Script>
     <mx:VBox height="100%" width="100%" id="box" verticalAlign="bottom"/>
</mx:VBox>
3. AdvancedHeaderColumn.as
package {
     import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
     public class AdvancedHeaderColumn extends AdvancedDataGridColumn {
          public var show:Boolean = false;
          public function AdvancedHeaderColumn(columnName:String=null) {
               super(columnName);

Thanks Hackintosh.
It prints as it views, as a corrupt jpeg. I also dug into console and it confirmed there was an error about a corrupt jpg. The most interesting thing is if I open the bad pdf in Photoshop the whole image is there with no signs of corruption. This leads me to believe it's something with how OSx and/or Safari are rendering the jpgs. Another curious sidenote, Safari on Windows works fine but if you save the pdf, move it to a mac and open it, you get the corrupted jpg again.
I think I'm going to try and stop swimming upstream now. At the end of the day I don't care if the images are pngs, tiffs, or eps. I'm going to try feeding a few different formats and see if that doesn't fix the problem.

How to access AdvancedDatagrid column Header information?

I have an AdvancedDatagrid with custom Column header
renderers.
column = new AdvancedDataGridColumn("Header Text");
column.headerRenderer = new
ClassFactory(PE_FilterHeaderRenderer);
MyAdvancedDataGrid.columns = [column];
Within my header renderer class I have some code to implement
the children the way that I want. Now.. does anyone know how to
access those headers from the outside without storing off an
intance of the header itself within the class. Basically, I need to
get the right header and access an accessor within that header to
set something to change the header text and such if the user does
something to the datagrid. Any ideas would be helpfull..
Thanks!

Hi Michael,
If you just want to retrieve the data, you could use the following code.
//Get the node which the table is bound to
IWDNode node = wdContext.nodeTable();
//iterate thru the elements
for(int i = 0 ; i<node.size();i++)
IWDNodeElement ne = node.getElementAt(i);
Object value = ne.getAttributeValue("<column name>");
//Here you have the data in the value variable
//and you can manipulate this now
Regards,
Sudeep

Use image as header for AdvancedDataGrid column

Hi,
I would like to show an image as column header in my
AdvancedDatagrid. The attached code works but doesn't show the sort
arrows and numbes any more...
Any ideas?

Still a problem, I'll make another app demonstrating my problem...Fact is that when I click on a button in the buttonbar I can manage to set the underlying data in the dataprovider...but when I scroll the data in the datagrid and a buttonbar in a row scrolls off and then back into view I lost the toggle state of the buttonbar (no button selected but data in the dataprovider is still correct).
The dataprovider for the togglebuttonbar is contained in the dataprovider of the datagrid, but I don't think that this is part of the problem... (ie. each object in a row is a message with associated possible actions. I'd like to represent the possible actions with a togglebuttonbar.
Thanks

Detect header section in a AdvancedDatagrid

Hi,
The AdvancedDatagrid every column header having to sections. the first section is header text is displayed and other is the portion where user can click to multiple column sorting. Now I have a headerRelease event of the AdvancedDatagrid. Any of the header section is clicked headerRelease event is called but I want to know the which section is clicked in the headerRelease event. Please reply if any way is there to track.
Regards,
Susant

You need to write your own logic in that case instead of depending on the in built Export functionality in apps.
Because, if you want to export two tables data together, for ex: master record 1 and 2 has say 100 records then you may want to create 200 records etc..
I doubt if the default export functionality has that facility. I think it is simply looking at if it is a tabular form then allow the export. Not sure, may be u can check the code.
If you don't get any other way, then you should write you own logic of importing data may be using webutil.
Hope this helps.
Pradeep.

AdvancedDataGrid view Header color and text

Hi,
I want to change the color of datagrid header as well as change the color of header text(only) not entire column.
i dont know how to do this .please help me boz i m new in flex.

Nevermind, i figured out that you keep the same way of drawing for lines and ovals in graphics2d as in regular graphics...
anyways, I tried this and what happens is that everything turns black... the background does not change...
i think it has something to do with the following important lines:
metabolicImage = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
Graphics2D g;
g = (Graphics2D) metabolicImage.getGraphics();
g.setPaint(Color.white);
then later....
          if (type == 'C')
               StringTokenizer circ = new StringTokenizer(Instr, "\t");
          trash = circ.nextToken(); // get first token C1, C2, etc
          x =     Integer.parseInt(circ.nextToken()); // get circle's x location
          y = Integer.parseInt(circ.nextToken()); // circle's y location
          r = Integer.parseInt(circ.nextToken()); // circle's radius
          g.setPaint( Color.black );
          g.drawOval(x-4,y-4,2*r,2*r);
I think somehow the image has a default background... is there anyway to change the color of the image background?

How to change the order of groups in AdvancedDataGrid

Hello,
I have a dataset similar to the following:
Region   Sales
======   ======
North     10
North     15
South     5
East      20
West      5
West      4
West      3
I'd like to group by Region and sort the groups by the Sales subtotal for each group. I already have the data grouped correctly using GroupingCollection2. How can I sort the groups by the sales subtotal (it sorts by region name by default)? I've seen some posts that talk about creating a custom groupingObjectFunction and applying a group sort. But I'm still confused. Can someone give me some pointers on how to achieve this?
So ideally, the AdvancedDataGrid would end up looking like this with the regions sorted by sales subtotal;
Region    Sales
======    ======
North
          10
          15
subtotal 45
East
          20
subtotal 20
West
          5
          4
          3
subtotal 12
South
          5
subtotal 5

Thanks, I looked at that earlier but it doesn't contain the solution I was hoping to find.
I ended up not using GroupingCollection. I think GroupingCollection is cool, but it isn't really customizable to the extent I need.
I just ended up transforming my data into a hierarchical form that could be used directly by AdvancedDataGrid. At the top level of my hierarchy, I have the detail txn groups, subtotal groups, and grand total groups. To sort the groups, I use custom SortFields. So, for example, if I want to sort by group name, I add a SortField for the groupName attribute. Both the Detail Group and the Subtotal Group share the same group name. Then I add a SortField for a summaryRow attribute. Only the subtotal group has that attribute. This ensures that the Detail Group is always followed by the associated Subtotal Group after sorting. I store my groups in an XMLListCollection and then set the sort attribute, then call refresh().
Not ideal, but it works. If my requirements were more complex, perhaps my approach wouldn't have worked as well. But as it stands it works well and has good performance.
I was hoping that ADG could handle this kind of sorting for me, but after looking at the source code, it seems like this is not possible without implementing my own custom GroupingCollection class and possibly other supporting classes.
One key thing to note is that clicking the column header to sort within groups works fine. However, if you then attempt to sort at the group level, ADG hangs while trying to refresh itself. The trick is to assign the dataProvider.sort attribute to a temporary variable, then set it to null (this sort variable contains the ADG column sorts that the user clicked). Apply your group level sort and then reapply the dataProvider.sort attribute.

DataGrid header functionality to manipulate column data

I have been displaying information for individual series in a chart via a datagrid so that the user can edit it (change color, series style, etc.) And it works fine, but now I need to add in some functionality in the header of the series style column. Basically the user needs to be able to "override" each entry to make all of the series types lines or area or plot or whatever he chooses in the header. In my research on the net, it looks like I may have to use AdvancedDataGrid to do this. Does anyone know how I would do this.
Here's what I have so far. I've left out most of the other columns for simplicity.
<mx:DataGrid id="seriesTable" color="black" fontSize="9" rowHeight="30" editable="true" resizeEffect="slow" rollOverColor="#CCCCCC"
selectionColor="#999999" dataProvider="{axis.seriesList}" width="100%"
rowCount="{axis.seriesList.length > 2 ? axis.seriesList.length : 2}" >
<mx:columns>
         <mx:DataGridColumn width="40" dataField="color" headerText="Color" id="colorColumn"
                    rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.ColorPickerRenderer"/>
         <mx:DataGridColumn dataField="plotType" width="220" id="plotColumn"
                   rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.TypeBoxRenderer"/>
      </mx:columns>
</mx:DataGrid>
(I could also include TypeBoxRender code but I don't think it's really needed to understand what is going on here.)

I have been displaying information for individual series in a chart via a datagrid so that the user can edit it (change color, series style, etc.) And it works fine, but now I need to add in some functionality in the header of the series style column. Basically the user needs to be able to "override" each entry to make all of the series types lines or area or plot or whatever he chooses in the header. In my research on the net, it looks like I may have to use AdvancedDataGrid to do this. Does anyone know how I would do this.
Here's what I have so far. I've left out most of the other columns for simplicity.
<mx:DataGrid id="seriesTable" color="black" fontSize="9" rowHeight="30" editable="true" resizeEffect="slow" rollOverColor="#CCCCCC"
selectionColor="#999999" dataProvider="{axis.seriesList}" width="100%"
rowCount="{axis.seriesList.length > 2 ? axis.seriesList.length : 2}" >
<mx:columns>
         <mx:DataGridColumn width="40" dataField="color" headerText="Color" id="colorColumn"
                    rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.ColorPickerRenderer"/>
         <mx:DataGridColumn dataField="plotType" width="220" id="plotColumn"
                   rendererIsEditor="true" editorDataField="result" itemRenderer="renderer.TypeBoxRenderer"/>
      </mx:columns>
</mx:DataGrid>
(I could also include TypeBoxRender code but I don't think it's really needed to understand what is going on here.)

SortCompareFunction not working with AdvancedDataGrid

Hi,
There seems to be an issue with sortCompareFunction in the
AdvancedDataGrid. My sort function is simply not
triggered at all when I click on the header (sortable is set
to true).
Here's the relevant code, is there a problem ?

Hi,
Please try the given code which is working fine.
I have attached the sortCompareFunction for second column
i.e "Actual" column. Click on the header of this column to see the
trace statements in the console.

Has anyone got AdvancedDataGrid to work in Gumbo?

This seems like this should be a very common and discussed
problem, but I haven't seen any discussions on this.
I'm using the attached code to compile on Flex 4 SDK (build
4.0.0.4728). The AdvancedDataGrid shows up with a header and column
etc. but no data is displayed in it. Until a few days ago, when I
was using build 4.0.0.4600, nothing used to get displayed on the
screen, so its an improvement, but this code should have worked
without glitches.
The code works fine when I compile it in Flex 3.2 and view it
in the browser.
For the record, my Flash Player is 10,0,12,36.

For SDK4 you'll want to use the ADG in the new namespace:
<?xml version="1.0" encoding="utf-8"?>
<FxApplication xmlns="
http://ns.adobe.com/mxml/2009"
creationComplete="init()">
<Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dp:ArrayCollection = new ArrayCollection();
private function init():void {
var obj:Object = new Object();
obj.firstname = "John";
obj.lastname = "Smith";
dp.addItem(obj);
]]>
</Script>
<AdvancedDataGrid x="132" y="313" id="adg1"
designViewDataType="tree" dataProvider="{dp}">
<columns>
<AdvancedDataGridColumn headerText="First Name"
dataField="firstname"/>
</columns>
</AdvancedDataGrid>
<layout>
<BasicLayout/>
</layout>
</FxApplication>

Display restriction in AdvancedDataGrid

Hi All,
I am using AdvancedDataGrid for displaying information. I set
"variableRowHeight= true", so I cannot set the rowCount property I
guess.
Now my Grid is displaying information beyond the pageheight
ie., its adding number of rows as many as possible. But what I
actually want is that, before displaying each row int he grid, it
should check whether the new row is having enough display area left
in the screen to accommodate, then only it should add the row and
display the information.
so kindly give your suggestion to acheive that.
Thanks
Suren

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 - Creating inline item renderers and editors:
assets/brighten.jpg'} ]); ]]> </mx:Script>
<mx:DataGrid id='myGrid' dataProvider='{initDG}'
variableRowHeight='true'> <mx:columns>
<mx:DataGridColumn
Link:
http://livedocs.adobe.com/flex/3/html/cellrenderer_6.html
Tag Archive for datagrid.variablerowheight at Flex Examples:
Tag Archive for 'datagrid.variablerowheight' ... One of my
favorite Flex components is the the trusty DataGrid. It seems
whenever I build some sort of
Link:
http://blog.flexexamples.com/tag/datagrid.variablerowheight/
Flex 3 - List control:
Note: To use DataTips with a DataGrid control, you must set
the ... The following example sets the variableRowHeight property
for a List control to true :
Link:
http://livedocs.adobe.com/flex/3/html/dpcontrols_2.html
Tag Archive for variablerowheight at Flex Examples:
The following example shows how you can use the Flex TextArea
control as a drop-in item editor to allow you to easily edit the
items in a DataGrid control.
Link:
http://blog.flexexamples.com/tag/variablerowheight/
mx.controls.DataGrid (Flex 3):
The DataGrid width is sized to fit the width of all columns,
if possible. The default number of displayed rows, including the
header is 7, and each row,
Link:
http://livedocs.adobe.com/flex/3/langref/mx/controls/DataGrid.html
Flex Monkey Patches variablerowheight:
Tags: atagrid, datagrid-row, Flex, variablerowheight Posted
in: Uncategorized. What if you have a datagrid that is only going
to have a few rows of data,
Link:
http://blog.flexmonkeypatches.com/tag/variablerowheight/
Disclaimer: This response is generated automatically by the
Adobe NewsBot based on Adobe
Community
Engine.

AdvancedDataGrid Header

Similar Messages

Maybe you are looking for