Dynamic datagrid

Hey all. I have a datagrid that has it's columns generated
dynamically based on whatever columns are in the database. I have
no problems retrieving the columns and dynamically creating my
datagrid with those columns. My problem arises not with generating
the columns but with inserting the data.
For example, I have an array that has all the columns as well
as an array that has my data. The data array is split for each
value row by row. So, assuming I have columns id and date with 3
records, the array would go [id, date, id, date, id, date]. Problem
is, I cannot figure out how to add each unique array entry JUST to
one cell, not the entire row. Is there some way where I can say
that each item in an array is just to one cell and not an entire
row/column without hard coding the column names beforehand? I
really hope this makes sense because I'm stumped!

Hi,
Use array collections.
here is an example.
http://blog.flexexamples.com/2008/05/11/creating-an-editable-datagrid-control-in-flex/
Rgds
JFB

Similar Messages

Dynamic DataGrid columns

How can I get this example to wok with <mx:HTTPService>
insead of the inline <mx:XML> ?
Dynamic DataGrid columns
Example of how to dynamically create DataGridColumns
A completely dynamic DataGrid example.
This example uses the xml from the Flexstore example. It
examines the first product node and uses that to create the
definitions for the columns. There is some example logic to change
the columns properties.
It then instantiates the GataGrid and its columns array,
assigns the properties, and then the dataProvider, and then adds
the dataGrid to the application container.
The example is fully self-contained, since a portion of the
catalog.xml file is included in the mxml.
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
[Bindable]
private var _xlcCatalog:XMLListCollection; //the
dataProvider for the DG
//run by creationComplete
public function initApp():void
_xlcCatalog = new XMLListCollection(xmlCatalog.product);
//wrap the XML product nodes in an XMLListCollection
buildDG(); //creates the dataGrid
}//initApp
private function buildDG():void
var aColumnDef:Array = getColumnDefArray(); //returns a
noraml array of objects that specify DtaGridColumn properties
var oColumnDef:Object;
var dg:DataGrid = new DataGrid; //instantiate a new DataGrid
var dgc:DataGridColumn;
var aColumnsNew:Array = dg.columns
var iTotalDGWidth:int = 0;
for (var i:int=0;i<aColumnDef.length;i++) { //loop over
the column definition array
oColumnDef = aColumnDef
dgc = new DataGridColumn(); //instantiate a new
DataGridColumn
dgc.dataField = oColumnDef.dataField; //start setting the
properties from the column def array
dgc.width = oColumnDef.width;
iTotalDGWidth += dgc.width; //add up the column widths
dgc.editable = oColumnDef.editable;
dgc.sortable = oColumnDef.sortable
dgc.visible = oColumnDef.visible;
dgc.wordWrap = oColumnDef.wordWrap;
aColumnsNew.push(dgc) //push the new dataGridColumn onto the
array
dg.columns = aColumnsNew; //assign the array back to the
dtaGrid
dg.editable = true;
dg.width = iTotalDGWidth;
dg.dataProvider = _xlcCatalog; //set the dataProvider
this.addChild(dg); //add the dataGrid to the application
}//buildDG
//uses the first product node to define the columns
private function getColumnDefArray():Array
//Alert.show("colcount:" + xmlCatalog.toXMLString());
var aColumns:Array = new Array();
var node0:XML = xmlCatalog.product[0]; //get the first
"product" node
var xlColumns:XMLList = node0.children(); //get its child
nodes (columns) as an XMLList
var xmlColumn:XML
var oColumnDef:Object;
for (var i:int=0;i<xlColumns.length();i++) { //loop over
the xmlList
xmlColumn = xlColumns;
oColumnDef = new Object();
oColumnDef.dataField = xmlColumn.localName(); //make the
dataField be the node name
switch (oColumnDef.dataField) { //conditional column
property logic
case "name":
oColumnDef.width = 80;
oColumnDef.sortable = false;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
case "description":
oColumnDef.width = 200;
oColumnDef.sortable = false;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = true;
break;
case "price":
oColumnDef.width = 40;
oColumnDef.sortable = true;
oColumnDef.visible = true;
oColumnDef.editable = true;
oColumnDef.wordWrap = false;
break;
case "image":
oColumnDef.width = 100;
oColumnDef.sortable = false;
oColumnDef.visible = false;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
default:
oColumnDef.width = 50;
oColumnDef.sortable = true;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
aColumns.push(oColumnDef);
return aColumns; //return the array
}//getColumnDefArray
]]></mx:Script>
<mx:XML id="xmlCatalog">
<catalog>
<product productId="1">
<name>Nokia 6010</name>
<description>Easy to use without sacrificing style,
the Nokia 6010 phone offers functional voice communication
supported by text messaging, multimedia messaging, mobile internet,
games and more</description>
<price>99.99</price>
<image>assets/pic/Nokia_6010.gif</image>
<series>6000</series>
<triband>false</triband>
<camera>false</camera>
<video>false</video>
<highlight1>MMS</highlight1>
<highlight2>Large color display</highlight2>
</product>
<product productId="2">
<name>Nokia 3100 Blue</name>
<description>Light up the night with a
glow-in-the-dark cover - when it's charged with light you can
easily find your phone in the dark. When you get a call, the Nokia
3100 phone flashes in tune with your ringing tone. And when you
snap on a Nokia Xpress-on™ gaming cover*, you'll get
luminescent light effects in time to the gaming
action.</description>
<price>139</price>
<image>assets/pic/Nokia_3100_blue.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Glow-in-the-dark</highlight1>
<highlight2>Flashing lights</highlight2>
</product>
<product productId="3">
<name>Nokia 3100 Pink</name>
<description>Light up the night with a
glow-in-the-dark cover - when it's charged with light you can
easily find your phone in the dark. When you get a call, the Nokia
3100 phone flashes in tune with your ringing tone. And when you
snap on a Nokia Xpress-on™ gaming cover*, you'll get
luminescent light effects in time to the gaming
action.</description>
<price>139</price>
<image>assets/pic/Nokia_3100_pink.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Glow-in-the-dark</highlight1>
<highlight2>Flashing lights</highlight2>
</product>
<product productId="4">
<name>Nokia 3120</name>
<description>Designed for both business and pleasure,
the elegant Nokia 3120 phone offers a pleasing mix of features.
Enclosed within its chic, compact body, you will discover the
benefits of tri-band compatibility, a color screen, MMS, XHTML
browsing, cheerful screensavers, and much more.</description>
<price>159.99</price>
<image>assets/pic/Nokia_3120.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Multimedia messaging</highlight1>
<highlight2>Animated screensavers</highlight2>
</product>
<product productId="5">
<name>Nokia 3220</name>
<description>The Nokia 3220 phone is a fresh new cut
on some familiar ideas - animate your MMS messages with cute
characters, see the music with lights that flash in time with your
ringing tone, download wallpapers and screensavers with matching
color schemes for the interface.</description>
<price>159.99</price>
<image>assets/pic/Nokia_3220.gif</image>
<series>3000</series>
<triband>false</triband>
<camera>true</camera>
<video>false</video>
<highlight1>MIDI tones</highlight1>
<highlight2>Cut-out covers</highlight2>
</product>
</catalog>
</mx:XML>
</mx:Application>

It should work the same way.
What problem are you having?
Tracy

Dynamic DataGrid with Preferred columns

Hi all,
I want to populate a dynamic DataGrid with User Preferred
columns (ex : EmpId,First Name and Phone). Each time columns may
change based on User Selection in Preferences Page so columns
should not hard code. I'm able to see data for EmpId, First Name
but I want to see the Inner tag data of "Phone" as a Field.
Sample XML ....
<emp>
<empId>1002</empId>
<firstName>Smith</firstName>
<lastName>John</lastName>
<address>
<city>Ohio>
<phone>433-234-322</phone>
<zip>60003</zip>
</address>
</emp>
Thanks.

To display nested data, you must use a labelFunction. I have
several labelFunction examples on cflex.net.
You can assign a function reference to the column's
labelFunction property in the column generation code.
Tracy

Dynamic accordion with dynamic datagrid

I’m trying to create a dynamic accordion with embedded
datagrids in each accordion area. I have the base working but have
2 problems I can’t seem to figure out.
Bases; the accordion uses a repeater and vbox with a custom
component from a webservice result set to create the accordion. The
custom component has another webservice that gets a value from the
repeater to pass it to the custom component.
My 2 problems:
1. how do I prevent the custom component from running the
webservice until the accordion item is clicked or the area is
visible? Otherwise I end up will a bunch of queries hitting the DB
and if there is several items for the accordion and many items from
the datagrid its slower.
2. how can I get the datagrid query to refresh when the
accordion item is clicked? Because the data may change I am not
able to see the updated data unless I reload the entire
application.
1 thing I did try. With the tab control you can use the
show() event and the data will refresh just fine, but with the
accordion, the show() event does not seem to fire. Its as if they
are all visible.
Any help here would be much appreciated, I’ve been
racking my brain for days now and I sure it is something simple
that I am missing. Thanks in advance.
See the example code below.
the application code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute"
width="100%"
height="100%"
initialize="ws.getMethod1.send()"
xmlns:output="com.comp.*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
public var thisWsdl:String = '
http://localhost/webservice/service.cfc?wsdl';
]]>
</mx:Script>
<mx:WebService id="ws"
wsdl="{thisWsdl}"
useProxy="false"
showBusyCursor="true"
fault="Alert.show(event.fault.faultString, 'Error');"
concurrency="multiple" requestTimeout="30">
<mx:operation name="getMethod1">
<mx:request>
<param1>{param1data}</param1>
<param2>{param2data}</param2>
<param3>{param3data}</param3>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Accordion width="100%" height="100%"
fillColors="[#808080, #808080]">
<mx:Repeater id="rp"
dataProvider="{ws.getMethod1.lastResult}">
<mx:VBox label="{String(rp.currentItem.catname)}"
backgroundColor="#C0C0C0" width="100%" height="100%"
paddingRight="10">
<output:comp catid="{rp.currentItem.catid}"/>
</mx:VBox>
</mx:Repeater>
</mx:Accordion>
</mx:Application>
the component code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%"
height="100%"
focusIn="ws.getMethod.send()"
horizontalAlign="center"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
public var thisWsdl:String = '
http://localhost/webservice/service.cfc?wsdl';
[Bindable]
public var catid:int;
]]>
</mx:Script>
<mx:WebService id="ws"
wsdl="{thisWsdl}"
useProxy="false"
showBusyCursor="true"
fault="Alert.show(event.fault.faultString, 'Error');"
concurrency="multiple" requestTimeout="30">
<mx:operation name="getMethod2">
<mx:request>
<catid>{catid}</catid>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:DataGrid id="itemGrid"
dataProvider="{ws.getMethod2.lastResult}" width="700"
height="250">
<mx:columns>
<mx:DataGridColumn width="100" dataField="itemid"
headerText="Item Id"/>
<mx:DataGridColumn wordWrap="true" dataField="itemname"
headerText="Item Name"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>

Perhaps you could use the change event of the accordion, or
the show event of the child containers?
Tracy

Dynamic DataGrid + slow horizontal scrolling

Can anyone explain why my datagrid horizontal scrolling is so
slow:
Demo
www.smithkjaer.dk/flex/TestComp.htm
Source
www.smithkjaer.dk/flex/srcview/index.html
Depending on your connection it can take a few seconds to
start due to a large number of columns being generated dynamically
out from the xml source.
Note: If I disable the datagrids scrolling and scroll it in a
canvas there is no performance problem when scrolling, except i
miss my column header labels when vertical scrolling is used.
If I disable my dataProvider and build the dataGrid without
adding data it also scrolls fast

I have now filed this as a bug which has been confirmed,
which you can read about here :
http://bugs.adobe.com/jira/browse/SDK-14361
Please vote for this bug to be fixed

Dynamic datagrid generation

my setup:
i have 3 files. the first is the main application file(mxml)
that displays a datagrid. the 2nd is an AS file that builds the
datagrid (builder pattern). and the 3rd is a datamanager that
retrieves my data via webservice that eventually populates the
datagrid.
my situation:
im trying to dynamically generate a datagrid that is
dependant on data i retrieve through a webservice. unfortunately,
the result event handler runs asynchronously, and the data is not
yet available when my script tries to generate the datagrid.
thoughts:
i was wondering if there was a way to synchronize this
process so i generate the datagrid after the webservice has called
the result event, or if there were any other possible alternatives
to solve this problem.

in case anyone was wondering of a solution to this, i made
the most of the event driven framework that flex provides and
simply extended eventdispatcher within my datamanager class, and
called an event back to my main app to let it know when it's ready
to generate the datagrid. i'm not sure if there is any, more
graceful alternative, but for the time being, it works!!
optimization can come after version 1.0 =)

Dynamic datagrid rowHeight and itemRenderer problem

Hi guys,
Long time listener; first time caller....
I have had a look around the forums here and i can see there are a lot of similar issues to the one i'm currently having but not so many solutions. Not sure if i'll have any better luck with my question but here goes...
My issue is to do with the row height of a datagrid row not matching up properly with the height of the custom iterm renderer used on a column.
The item renderer consists of an HBox containing an image and a textArea. The image will not always be present and the text area can contain a couple of words or many lines of text.
I have overridden the measure function of the item render in which i am manually setting the HBox's height and measuredHeight.
Problem is that i have to find some way of triggering a redraw of the datagrid AFTER if have set the item renderers height, but i dont seem to be able to directly access the in-line renderer from the parent class.
If anyone could throw any suggestions my way it would be greatly appreciated!
thanks '
Dave

Ok so here's the sample code...
****Renderer*****
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
horizontalAlign="
left" verticalAlign="
middle" horizontalGap="
0"verticalGap="
0"xmlns:mx="
http://www.adobe.com/2006/mxml" horizontalScrollPolicy="
off"verticalScrollPolicy="
off"width="
100%" height="
100%"resize="measure()"
borderColor="
green"borderStyle="
solid"
>
<mx:Metadata>[
Event(name="gridRowHeightChange", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.events.ResizeEvent;
import flash.events.Event;
Bindable] public var showLocalPartImage:Boolean = false;
override public function set data(value:Object):void
     super.data = value;
     lblPartNum.text = data.label;}
override protected function measure():void
     super.measure();
     if(lblPartNum.text != "" && lblPartNum.width > 0)     {
          lblPartNum.validateNow();          lblPartNum.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT;
          lblPartNum.height =
          this.height = measuredHeight = lblPartNum.mx_internal::getTextField().height;
          dispatchEvent(
new Event("gridRowHeightChange"));     }
]]>
</mx:Script>
<mx:Image id="imgLocal" horizontalAlign="center" verticalAlign="middle" visible="false" width="{0}"/>
<mx:TextArea id="lblPartNum" width="{this.width - imgLocal.width - 4}" height="100%" editable="false" verticalScrollPolicy="off" />
</mx:HBox>
****EndRenderer*****
****DataGrid****
public function measureGrid(event:Event):void{
shoppingCart.removeEventListener(DataGridEvent.COLUMN_STRETCH, measureGrid);
shoppingCart.invalidateList();
shoppingCart.addEventListener(DataGridEvent.COLUMN_STRETCH, measureGrid);
<mx:DataGrid id="shoppingCart"width="
100%" height="100%"dataProvider="
{_order.orderItems}"allowMultipleSelection="
true"sortableColumns="
true"variableRowHeight="
true"doubleClickEnabled="
true"doubleClick="selectPartHandler(event)"
paddingRight="
5"editable="
false"
>
<mx:columns>
<mx:DataGridColumn width="22" minWidth="20" sortable="false" editable="false"/>
<mx:DataGridColumn width="22" minWidth="20" sortable="false" editable="false"/>
<mx:DataGridColumn minWidth="240" width="270" dataTipField="description" dataField="description" headerText="Description"editable="
false" wordWrap="true">
<mx:itemRenderer>
<mx:Component>
<controls:DescriptionShoppingCartRenderer showLocalPartImage="
{!(outerDocument.displayUnderline)}" gridRowHeightChange="{outerDocument.measureGrid(event)}">
</controls:DescriptionShoppingCartRenderer>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
****EndDataGrid****
Unfortunately the whole code is much too large to fit in here, but here are the main working parts.
I hope this helps.
What i am getting when running this is strange. When i run the first time and when i resize a column, the row height is incorrect, but then when i just click the 'column stretch' arrow (ie the space between the column headers) and dont actually resize at all, the row heights re-calculate and they fit perfectly.
This makes me think that i need to trigger this event manually AFTER the itemRenderer has been calculated.
EDIT: forgot to add the measureGrid function

Dynamic datagrid column based on rowIndex

I am passing objects into a datagrid that have a rank variable. Before I place the objects into the datagrid, I sort upon rank so the objects will show in the datagrid sequentially.
What I am wanting to do is be able to drag-and-drop the rows, and I want the rank variable to change depending on which row the object is in.
I thought I had this feature working by setting rank to the dataProvider index when a row is dropped. This does work intially, but gets messed up when a user decides to sort any row in the grid.
Does anyone have any suggestions on how I can get this to work?

I think you can use a labelFunction that considers listData.rowIndex and
owner.verticalScrollPosition.

Dynamic DataGrid Issues

I have a data grid that is updated via streaming data every 5 seconds. However, when the datagrid updates, all of the user's selections/sorting gets wiped out and the data resets.
Right now the data is bound to an array directly returned from my service call, so every time it "refreshes" the bound array refreshes triggering the redraw of the grid.
How can I save the "current state" of the data grid so that when the data updates, all of the sorts/selections/whatever is saved.
And example of what im looking for is kind of like the windows task manager. Everything resorts in real time as the data updates, if you have a column sorted.
Any ideas?

Thanks for the response.
That works, but the grid data will not refresh now unless I interact with it. If I re-sort a column for instance it will give my column new values, but just sitting there it doesnt update.
I have seen code where there is a dataprovider.refresh() call, but that is not available on my dataProvider.
Any suggestions?

Flex evaluate string for dynamic datagrid headerText

Hello: I m new to Flex and am creating headerText for a datagrid (dgTop250). How do I get the variable headerStr to evaluate correctly in the last line of the function? With the code below I get the entire string as the column header in the datagrid, not the evaluated expression that I need. Variable headerStr is evaluating correctly, I just need it to get evaluated in the headerText statement.. I know the eval function isn't available in AS3.
public function get250(event:ResultEvent):void {
(var i:int = 0; i <= dgTop250.columnCount; i++) {
    var colName:String=dgTop250.columns[i].dataField;
    var headerStr:String="top250.lastResult.IMS001HQ2.SGM.getItemAt(i)."+colName+".label";
    (dgTop250.columns[i] as DataGridColumn).headerText = headerStr;
As an example, this is what I'm getting as the header: top250.lastResult.IMS001HQ2.SGM.getItemAt(i).STOCK.label
This is what I need: Stock Number
"Stock Number" is the label for STOCK.
thanks

I would think you need to remove the quotes to get it evaluated properly
Change this ..
var headerStr:String="top250.lastResult.IMS001HQ2.SGM.getItemAt(i)."+colName+".label";
to
var headerStr:String=top250.lastResult.IMS001HQ2.SGM.getItemAt(i).[colName].label;
maybe ???

DataGrid with dynamic columns & renderers

I'm developing using Flash Builder 4 & Flex SDK 4.1.
I need to manage very dynamic DataGrid components and keep their definitions, which are all part of a complex item renderer of an Offers list.
The objects structure is simplified as follows -
Data: Model --> Offers ArrayCollection --> Offer VO --> DataGrid data ArrayCollection & DataGrid columns Array
View: List --> Offer Item Renderer --> DataGrid
1. Since the DataGrid's columns property accepts only an Array (not ArrayCollection), it seems like Data Binding for defining the columns is very problematic.
I tried to bind it to the source property of an ArrayCollection that would keep my columns definitions, but it didn't really work (mainly header display bugs).
What is the recommended way to keep the dynamic columns definition of a DataGrid?
2. Each column can have a set of dynamic properties, so I created a "mutant" - Column VO that extends DataGridColumn and got a dynamic properties ArrayCollection on it.
The columns got a custom header renderer that includes an icon when there are properties.
The header renderers got 4 main states (NotSelectedWithProperties, SelectedWithProperties, NotSelectedWithoutProperties & SelectedWithoutProperties).
However, the header renderer area seems a bit buggy when maintaning dynamic columns.
Any thoughts on the subject?
3. Anyway, I ended up recreating the DataGrid's columns Array very often (copying the columns definition on the offer's item renderer's dataChange event handler).
Note that the dynamic properties can be edited when the column is selected and I copy their values from the view back to the model when entering the state NotSelectedWithProperties.
This feels way too complicated and I really try to keep it simple, inspite of the required complexity.
Does anyone have better ideas?
4. In some cases the column's item renderer should also be modified into another DataGrid (grid-in-grid).
I used the MXDataGridItemRenderer with a DataGrid and included an ArrayCollection for the "newValue" returned by the editor.
(I use RendererIsEditor=true and on updateComplete populate that variable with the DataGrid's dataProvider contents)
When needed, I loop though the data objects of the parent DataGrid and populate the related field with an ArrayCollection of key-value objects that are displayed on the internal DataGrid.
After adding this feature I encounter very strange bugs -
a. After editing the grid-in-grid values and changing the column's state (selecting & deselecting), I get the following exception:
ArgumentError. Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/setChildIndex()
at mx.core::UIComponent/setChildIndex().......6993....
All I could find about this is that it might be related to some context error or something, but I'm really stuck on this one.
b. Sometimes another column might copy value from one row to another, running over the previous value.
I'm not sure exactly what sequence of actions causes this behavior, but it's related to that itemRenderer for sure.
c. Switching places with a column that uses the grid item renderer (headerShift) causes a stak overflow of StyleManager that tried to get style from the DataGridItemRenderer. This one I just found out, but couldn't reproduce a second time... strange!
I'm pretty sure this caused another problem that I don't remember at the moment.
The bottom line is that there got to be a better way to implement this feature within this already-complicated environment.
Maybe I'm doing something very wrong here...
Please advice and thanks for reading all this.

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.

SilverLight Header Column should be the Checkbox in dynamically created datagrid

Hi,
here I'm Creating the Dynamic datagrid for this DataGridTemplateColumn I'm creating using the StringBuilder and I'm assigning using append method.
But I need the header to be the Checkbox ..How can I create the Header of the particular datagrid column as the CheckBox
Help me out to resolve this
Thank you in Advance.
Mani--MSDN

I'm a bit confused by the question.
If it's xaml it'd look something like:
<data:DataGridTemplateColumn Width="Auto" >
<data:DataGridTemplateColumn.HeaderStyle>
<Style TargetType="datap:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox IsThreeState="True" IsChecked="{Binding Path=DataContext.AllChecked, ElementName=LayoutRoot, Mode=TwoWay}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</data:DataGridTemplateColumn.HeaderStyle>
from
http://stackoverflow.com/questions/3335762/binding-a-checkbox-in-a-datagrid-header
I guess you're building the xaml as a string using stringbuilder and then using xamlreader to create the datagrid.
If that isn't what you're looking for, please explain more.
Hope that helps.
Recent Technet articles: Property List Editing;
Dynamic XAML

How to read attributes in to datagrid?

hi
i have one doubt
in the datagrid we have header text but if we create dynamic datagrid
and for (eg)
<root>
<data>
<time datas="Hello">
<john second="Karthikkkkkkkkk"></john>
</time>
</data>
</root>
if we want o make "datas" as header text what can we do
and below datas we need "second" as child
any idea
karthik.k

You can use labelFunction to get to datas.
If you need children, you might need to use Tree or AdvancedDataGrid
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

NEWBIE: AS3/XML DataGrid Component interaction

So heres the situation:
I'm trying to create a simple newsreader using a Flash
DataGrid component in which data is loaded via EXTERNAL XML
attributes. And it works fine...got 2 columns, "subject" and "date
posted", and the appropriate data being sent to the right place.
So heres the problem:
I'd like to link those rows, when the user clicks on any
individual row, to load the "URL" attribute that the XML has
defined. Feels like there's an easy solution but i just can't put
my finger on it:
Is this possible? Code below:
< LexHead />

Whay are you using a different formatted xml for the dummy
than the real data. Using internal data for testing is a fine
technique, but i needs to be the same format as the real data.
Otherwise how will you know when you get the code right?
I have an example that uses HTTPService to get an xml file
from the server, uses a tree to display/edit the nodes, a dynamic
dataGrid for displaying/editing the attributes, and HTTPService to
send it back to the server. The backend is JSP, so to run that
you'd need a J2EE web server like Tomcat, but the tree and property
explorer might be useful.
Semd me an email and I will send it to you directly.
Tracy

Create dynamic column from xml file

Hi All,
       <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white" width="500" height="300" creationComplete="onload()" >
<mx:Style>
    DataGrid {
        alternatingItemColors: #a1a1a1,#8bb8e6;
        borderColor:#050505; borderStyle:outset;
        color:#ffffff;
        editable:false;
           fontSize:11; fontWeight:bold; fontFamily:Tahoma;
           horizontalGridLines:false;
           headerStyleName:myHeaderStyles;
                headerSeparatorSkin:ClassReference("mx.skins.ProgrammaticSkin");
    rollOverColor:#5CC2F7;
    selectionColor:#E8C76D; sortableColumns:true;
    textAlign:center; textRollOverColor:#FD0606; textSelectedColor:#1301FF;
    variableRowHeight:true;
    verticalAlign:middle; verticalGridLines:false; verticalGridLineColor:#050505;
wordWrap: false;
.myHeaderStyles
            color: #ffffff;
            fontWeight: bold; fontFamily:Arial; fontSize:13;
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
   import mx.charts.renderers.CircleItemRenderer;
   import mx.charts.series.ColumnSeries;
   [Bindable]
    public var myData:ArrayCollection;
private var now:Date=new Date();
private var str:String;
private var st:String;
public function onload():void
str=String(now.getDate())+' '+String(now.getMonth())+' '+String(now.getFullYear())+' '+String(now.getHours())+' '+String(now.getMinutes()+' '+String(now.getSeconds()));
trace(str);
st=srv.url="Data/NumberChart.xml?rand="+str;
trace(st);
srv.send();
public function onresult():void
myData=ArrayCollection(srv.lastResult.Document.Record)
trace(myData);
]]>
</mx:Script>

<mx:HTTPService id="srv"         result="onresult()" />
<mx:WipeRight id="myWR" duration="2000"/>
    <mx:WipeLeft id="myWL" duration="2000"/>
    <mx:HBox label="Home Team" width="100%" height="100%" backgroundColor="white">
<mx:DataGrid id="HomeTeam" dataProvider="{myData}" creationCompleteEffect ="{myWR}"   width="500" height="300" headerBackgroundSkin="@Embed(source='assets/Tileimage4movieplayer_img.png')">
<mx:columns>
<mx:DataGridColumn id="Hcol1" headerText="Player" draggable="false" dataField="DisField" width="170" showDataTips="true" wordWrap="true" />
<mx:DataGridColumn id="Hcol2" headerText="Average" draggable="false" dataField="Value" width="170" showDataTips="true" wordWrap="true" />
<mx:DataGridColumn id="Hcol3" headerText="Matchs" draggable="false" dataField="Prefix" width="170" showDataTips="true" wordWrap="true" />
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Application>
and my xml code is...
<?xml version='1.0' encoding='utf-8' ?>
<Document Title='50 Runs Milestone'>
<Record>
<DisField>K Sangakkara</DisField>
<Value>200.00</Value>
<runs>50</runs>
<Prefix>KXIP Vs DC</Prefix>
</Record>
<Record>
<DisField>R Sharma</DisField>
<Value>185.19</Value>
<Prefix>KXIP Vs DC</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>W Jaffer</DisField>
<Value>151.52</Value>
<Prefix>BRC Vs CSK</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>G Gambhir</DisField>
<Value>135.14</Value>
<Prefix>CSK Vs DD</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>M Boucher</DisField>
<Value>125.00</Value>
<Prefix>KKR Vs BRC</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>A Gilchrist</DisField>
<Value>119.05</Value>
<Prefix>KXIP Vs DC</Prefix>
<runs>50</runs>
</Record>
<Record>
<DisField>S Asnodkar</DisField>
<Value>113.64</Value>
<Prefix>RR Vs BRC</Prefix>
<runs>50</runs>
</Record>
</Document>
it's working but i want to crete dynamic datagrid column how to do it any idea?

I actually found this topic interesting, so I made the data and code generic and created a Flex Cookbook entry, adding the ability to remove columns as well:
<?xml version='1.0' encoding='utf-8' ?>
<Document>
<Record>
    <name>Bob Smith</name>
    <age>48</age>
    <sales>$53,000.00</sales>
    <territory>Southeast</territory>
</Record>
<Record>
    <name>Susan Sharma</name>
    <age>37</age>
    <sales>$37,000.00</sales>
    <territory>Southwest</territory>
</Record>
<Record>
    <name>George Freebird</name>
    <age>52</age>
    <sales>$49,000.00</sales>
    <territory>Midwest</territory>
</Record>
</Document>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="srv.send();" >
<mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      import mx.collections.ArrayCollection;
      [Bindable] public var myData:ArrayCollection;
      public function onresult():void{
        myData=ArrayCollection(srv.lastResult.Document.Record)
      private function modifyColumns(evt:MouseEvent):void{
        var ac:ArrayCollection = new ArrayCollection(SalesData.columns);
        var actionTaken:Boolean = false;
        if(evt.currentTarget.label=="Remove Column"){
          for each(var col1:DataGridColumn in ac){
            if(col1.headerText == headerTxt.text){
              ac.removeItemAt(ac.getItemIndex(col1));
              headerTxt.text = "";
              SalesData.columns = ac.toArray();
              actionTaken = true;
          if(actionTaken){
            mx.controls.Alert.show("Column " + headerTxt.text + " was removed.");
          }else{
            mx.controls.Alert.show("Column " + headerTxt.text + " not found.");
        }else if(evt.currentTarget.label=="Add Column"){
          for each(var col:DataGridColumn in ac){
            if(col.headerText == headerTxt.text){
              mx.controls.Alert.show("Column " + headerTxt.text + " already exists.");
              return;
          var dgc:DataGridColumn = new DataGridColumn();
          dgc.headerText = headerTxt.text;
          dgc.dataField = datafieldTxt.text;
          dgc.width = 100;
          ac.addItemAt(dgc, int(columnIndexTxt.text));
          SalesData.columns = ac.toArray();
          headerTxt.text = "";
          datafieldTxt.text = "";
          columnIndexTxt.text = "";
          mx.controls.Alert.show("Column " + headerTxt.text + " was added.");
    ]]>
</mx:Script>
<mx:HTTPService id="srv" url="data.xml" result="onresult()"/>
<mx:DataGrid id="SalesData" dataProvider="{myData}" width="500" height="300">
    <mx:columns>
      <mx:DataGridColumn headerText="Name" dataField="name" width="170"/>
      <mx:DataGridColumn headerText="Sales" dataField="sales" width="170"/>
      <mx:DataGridColumn headerText="Territory" dataField="territory" width="170"/>
    </mx:columns>
</mx:DataGrid>
<mx:Form label="Add or Remove a Column">
    <mx:FormItem label="Enter column header text:">
      <mx:TextInput id="headerTxt"/>
    </mx:FormItem>
    <mx:FormItem label="Enter column datafield (if adding):">
      <mx:TextInput id="datafieldTxt"/>
    </mx:FormItem>
    <mx:FormItem label="Enter zero based new column index (if adding):">
      <mx:TextInput id="columnIndexTxt"/>
    </mx:FormItem>
    <mx:FormItem label="Click to add or remove column">
      <mx:HBox>
        <mx:Button label="Add Column" click="modifyColumns(event);"
          disabledColor="0xf1aa99"
          enabled="{headerTxt.text!=''&&datafieldTxt.text!=''&&columnIndexTxt.text! =''}"/>
        <mx:Button label="Remove Column" click="modifyColumns(event);"
          disabledColor="0xf1aa99" enabled="{headerTxt.text!=''}"/>
      </mx:HBox>
    </mx:FormItem>
</mx:Form>
</mx:Application>

Dynamic datagrid

Similar Messages

Maybe you are looking for