Datagrid with a datadriven combox

Hi,
I would like to implement a datagrid with a datadriven combox.
The database should store "only" values, but should show a different labeltext in the grid.
When the users load this Grid the stores values should be uses to set the comboboxes.
That sounds easy but I haven't found a easy way to implement that!
1.) I need to overrite the "save column" function of the generated code from FB4b1, so that the shown labeltext is not saved, but its db-values.
How can I do this?
2.) I need to build the combox in the datagrid, but there is nnothing like"combox.value="myValID" ( that would be all in vb.net)
Do I have to loop manually over the selectedIndex until I found my savedValue?
Like
http://www.boyzoid.com/blog/index.cfm/2006/11/22/Flex-Custom-Components-and-Custom-Methods
Is there an easier way to do this?
Thanks for any pointers!
Martin Zach

Hi Martin,
Couple of questions
Are you using LCDS as your backend?
Are you using the Adobe data modeler and deploying your model on to your LCDS server?
If so, then you could try something called derived properties, which actually do not require a database column and you could compute its value based on the value of a existing column.
You can find more info about this on
http://labs.adobe.com/technologies/livecycle_dataservices3/videos/
http://labs.adobe.com/technologies/livecycle_dataservices3/
Thanks
-Sunil

Similar Messages

FB4b1: Datagrid with data driven Combobox

Hi,
I would like to implement a datagrid with a datadriven combox in FB4b1.
The database should store "only" values, but should show a different labeltext in the grid.
When the users load this Grid the stores values should be uses to set the comboboxes.
That sounds easy but I haven't found a easy way to implement that!
1.) I need to overrite the "save column" function, so that the shown labeltext is not saved, but its db-values.
How can I do this?
2.) I need to build the combox in the datagrid, but there is nnothing like"combox.value="myValID" ( that would be all in vb.net)
Do I have to loop manually over the selectedIndex until I found my savedValue?
Like
http://www.boyzoid.com/blog/index.cfm/2006/11/22/Flex-Custom-Components-and-Custom-Methods
Is there an easier way to do this?
Thanks for any pointers!
Martin Zach

Each item in comobobox has a label and a data value associated with it.
The following should work if you were to access data of a selected combo box item, without looping through the items. If it is a string value then
mylabel.text = myCombo.selectedItem.data.toString() would show / store the associated data with the combobox item for the label text, you can replace mylabel with the datagrid's dataprovider for your requirements.
Hope this helps
-Sunil

Need for a Datagrid with variableRowHeight="true" and custom Item Renderer to display exact rows

Hi again, developers:
I'm in a search of a datagrid with certain characteristics:
     - variableRowHeight = "true"
     - only one column
     - each row must have a custom item renderer with possibly different heights, and a fixed width
     - the datagrid must show always every item in the data provider with no vertical scroll bars, what means that the datagrid height must have always the exact height sum of all the item renderers it is displaying.
     - and no extra empty rows must appear in the last positions of the datagrid
The last two requirements are something difficult to achieve... for some reason, empty rows appear at the last positions of the datagrid. I post what i've managed to get:
<mx:Script>
     <![CDATA[
     private function resize():void
                if (dg.dataProvider)
                    var h:Number = dg.measureHeightOfItems( -1, dg.dataProvider.length);
                    dg.height = h;
     ]]>
</mx:Script>
<mx:DataGrid id="dg" width="530" horizontalCenter="0" verticalScrollPolicy="off"
        dataProvider="{dp}"
        wordWrap="true" variableRowHeight="true" showHeaders="false" dataChange="resize()" height="{dg.measureHeightOfItems(-1,dg.dataProvider.length)}" click="Alert.show(dg.rowCount.toString());">
        <mx:columns>
            <mx:DataGridColumn headerText="ID" width="50">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:TextArea height="{Math.random()*100}" wordWrap="true" backgroundColor="{Math.random() * 16777216}" paddingTop="0" paddingBottom="0"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

Thanks Harui, but it doesn't help. If the border is set it will help, but the very big problem is the empty rows that appear at the end of the datagrid... I can't find a way of measuring correctly the height of the itemRenderers!
I'll update this thread if I manage to do it.

Strange Behaviour on DataGrid with ArrayCollection as DataProvider

I have a Datagrid with an ArrayCollection as DataProvider, the arrayCollection is partially generated by a remoteObject call, the dataprovider seems to works at least until I try to edit the field...
By the RemoteObject I only receive an ArrayCollection with the field `ip`, but the datagrid looks for the fields ip, check and save...
If I add/edit this new field it works, but only under particular condition
The DataGrid:
<s:DataGrid id="datagrid" left="10" right="10" top="136"
       dataProvider="{listaIPCheck}" bottom="10" requestedRowCount="4">
          <s:columns>
                <s:ArrayList>
                     <s:GridColumn dataField="ip" headerText="Asset"/>
                     <s:GridColumn dataField="check" headerText="Inventory"/>
                     <s:GridColumn dataField="save" headerText="Salvataggio"/>
                </s:ArrayList>
           </s:columns>
</s:DataGrid>
The Script:
   [Bindable]private var listaIPCheck:ArrayCollection;
    private function ro_resultHandler(event:Event=null):void
      listaIPCheck = new ArrayCollection();
      listaIPCheck = ro.getListUpdate.lastResult;
      heap = 0;
      // Read Below {POINT #1}
      init3();
    private function init3():void
     // Read Below {POINT #2}
     if (heap<listaIPCheck.length)
        // omitted the initialization of the process p
        p.addEventListener(NativeProcessExitEvent.EXIT, onExit);
        try{
          p.start(startupInfo);
        }catch(e:Error){}
    private function onExit(e:NativeProcessExitEvent):void {
        // Read below {POINT #3}
Here is my code, now as you can see there are 3 line where I wrote to read below...
Let's assume to put this simple `for` instead of the commented line (once at a time)
    for (var k:Number=0;k<listaIPCheck.length;k++)
      listaIPCheck.getItemAt(k).check = "checkVal";
      listaIPCheck.getItemAt(k).save = "saveVal";
This code always work in the 3 points, so at the end of the call the ArrayCollection is always filled with the new values, but the datagrid refresh the items only in POINT #1 and POINT #2
Why not in Point #3???

Thank you Amy, but adding the properties in the server side did not work...
The workflow of the program is that:
1) I get the ArrayCollection (listaIPCheck) contatining some information (function ro_resultHandler)
2) I start an external process and grab the output data (function init3)
3) read and use the data from the process (function onExit)
Now the problem I have is regarding the refresh of the datagrid, this datagrid has the ArrayCollection (listaIPCheck) as DataProvider.
So:
- If I put the for loop instead of the comments ( // Read Below {POINT #1} ) or
( // Read Below {POINT #2} ) it works, the ArrayCollection is updated and the datagrid is refreshed
- Whereas if I put the for loop instead of ( // Read Below {POINT #3} ) , it won't work.. or at least, the ArrayCollection is correctly updated, but the datagrid is not refreshed at all and I have to use .refresh()

Editable DataGrid With DateField

I'm new to flex and struggling with the editable DataGrid. I
have a DataGrid with an ItemRenderer that outputs a DateField. I
can't figure out how to get the new value of the DateField after
the edit.
Here is my DataGrid (the endDate column):
<mx:DataGrid id="allHistoryGrid"
dataProvider="{allEntries}" height="313" width="782" y="-4"
itemEditEnd="saveGridChange(event)" editable="true">
<mx:columns>
<mx:Array>
<mx:DataGridColumn dataField="dietDescription"
headerText="Diet"/>
<mx:DataGridColumn dataField="allergyDescription"
headerText="Allergy"/>
<mx:DataGridColumn dataField="labDescription"
headerText="Lab"/>
<mx:DataGridColumn dataField="labResult" width="50"
headerText="Result" itemRenderer="LabResultItemRenderer"/>
<mx:DataGridColumn dataField="medicationDescription"
headerText="Medication"/>
<mx:DataGridColumn dataField="height" width="65"
headerText="Height" itemRenderer="HeightItemRenderer"/>
<mx:DataGridColumn dataField="weight" headerText="Weight"
itemRenderer="WeightItemRenderer"/>
<mx:DataGridColumn dataField="bmi" width="35"
headerText="BMI" itemRenderer="BmiItemRenderer"/>
<mx:DataGridColumn dataField="circumference" width="45"
headerText="Circ." itemRenderer="CircumferenceItemRenderer"/>
<mx:DataGridColumn headerText="Start Date" width="75"
sortCompareFunction="startDateSortCompare">
<mx:itemRenderer>
<mx:Component>
<mx:VBox clipContent="false">
<mx:DateFormatter id="dateFormatter"
formatString="MM/DD/YYYY"/>
<mx:Text width="100"
text="{dateFormatter.format(data.startDate)}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="endDate" width="45"
headerText="End Date" itemRenderer="EndDateItemRenderer"
rendererIsEditor="true"/>
<mx:DataGridColumn id="deleteEntry" width="50"
textAlign="center"
headerText="Delete" sortable="false"
itemRenderer="DeleteItemRenderer"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>
Here is my itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
paddingLeft="16" horizontalAlign="center">
<mx:DateFormatter id="dateFormatter"
formatString="MM/DD/YYYY"/>
<mx:DateField x="16" y="67" id="AllHistoryEndDate"
text="{dateFormatter.format(data.endDate)}"/>
</mx:VBox>
How do I get the new value in the saveGridChange function?
private function saveGridChange(event:DataGridEvent):void {

That gives me this error:
TypeError: Error #1034: Type Coercion failed: cannot convert
EndDateItemRenderer@51a70a1 to mx.controls.TextInput.

DataGrid with Custom Component not showing sub-components

I'm hoping someone can enlighten me on this issue.
I have a datagrid with one column which has an item renderer. It doesn't matter if the "text" data comes from a dataProvider or is static.
If I do the following, only the first label will show up.
<mx:DataGridColumn headerText="Column Title">
     <mx:itemRenderer>
           <mx:Component>
               <mx:VBox>
                    <mx:Label text="{data.data1}" />
                    <mx:Label text="{data.data2}" />
               </mx:VBox>
          </mx:Component>
     </mx:itemRenderer>
</mx:DataGridColumn>
However, if I change the VBox to a HBox both labels will show up.
<mx:DataGridColumn headerText="Column Title">
      <mx:itemRenderer>
            <mx:Component>
                <mx:HBox>
                    <mx:Label text="{data.data1}" />
                     <mx:Label text="{data.data2}" />
                </mx:HBox>
           </mx:Component>
      </mx:itemRenderer>
</mx:DataGridColumn>
I'm using:
Flex Builder 3 Standalone
Version: 3.0.214193
OS: Vista
Any ideas or comments would be appreciated.

Thanks for the reply KomputerMan.com. I've tried changing the dimensions of the VBox and no other labels appeared. Usually, when there is not enough room within the datagrid cell scrollbars will appear - you can experiment with the example below to see what I mean.
As for radiobuttons in a datagrid, here you go. The DataGrid and its dataProvider are constructed in the same way you normally would.
<mx:DataGridColumn headerText="Approve/Deny/Pending" width="170">
    <mx:itemRenderer>
        <mx:Component>
            <mx:HBox height="27" paddingLeft="10">
                <mx:Script>
                    <![CDATA[
                        private function isSelected(s:Object, val:String):Boolean {
                            if ( s.toString() == val) {
                                return true;
                            } else {
                                return false;
                    ]]>
                </mx:Script>
                <mx:RadioButton groupName="approveType"
                    id="approved"
                    label="A"
                    width="33"
                    click="data.status='1'"
                    selected="{isSelected(data.status, '1')}"/>
                <mx:RadioButton groupName="approveType"
                    id="denied"
                    label="D"
                    width="33"
                    click="data.status='2'"
                    selected="{isSelected(data.status, '2')}/>
                <mx:RadioButton groupName="approveType"
                    id="Pending"
                    label="P"
                    width="33"
                    click="data.status='3'"
                    selected="{isSelected(data.status, '3')}/>
            </mx:HBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

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().

DataGrid with dynamic comboboxes

I need to design a dataGrid with comboboxes in one column. These comboboxes should all have different dataProviders based on a value from column 1. What would a general approach be?
Thanks

The renderer's data property is the data for the entire row so you can get the column1 data and assign the combobox's dataprovider accordingly.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

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

How to display swf Files and have a datagrid with paging for javaFX

is there any example of javaFX which can display swf files or have a datagrid with paging.
sorry for my bad english and by the way i am new to javaFX
any help wil be appreciate

Please, refrain from posting identical messages in several forums. Thanks.
And I doubt JavaFX can display SWF files (it is a concurrent technology, after all! :-)), unless using some JNI/JNA technology (via JDIC? a long way...).
Datagrid: it is expected in next version (hopefully), there are some implementations around (look for CRUDfx, for example).

Problem filling DataGrid with XML - Object or ArrayCollection?

Hi,
I am trying to fill a datagrid with an XML file, rendered
from a PHP
script.
The problem is that - first time there is only one entry in
the XML
file, so when I receive the data using
event.result.root.child, I get
an Object. But second time, when there are two entries in the
XML
file, the return type becomes an ArrayCollection of "child"
type
objects.
This causes a problem when setting dataprovider of a
DataGrid....
So is there a way I can know what is the return type from the
XML
file, i.e., whether it is an Object or an ArrayCollection, so
that I
can set the dataprovider accordingly?

In E4x
If you have an xml structure like so:
<parent prop1='someValue' >
<child prop1='someValue' />
</parent>
to reference the parent use event.result
to get the child use: event.result.child; to get the child
attr: event.result.child.@prop1;

DataGrid with styleFunction example posted

I've just uploaded a new example to my site, which is an
extended DataGrid
with a styleFunction added similar to the one that
AdvancedDataGrid has.
This also includes a StyleableRenderer class, which is a
simple itemRenderer
that extends UIComponent, if you've been wondering where to
start in order
to start writing your own UIComponent based itemRenderers.
http://flexdiary.blogspot.com/2008/09/extended-datagrid-with-stylefunction.html
Enjoy!

Hello
First, thank you for the help. I later had the same idea with the base class. Know there is some problem with the database. But that's an other problem.
So thanks for your help!
Actually I'm not sure which DataGrid I'm using. I'm quite sure it's not MX, Because I can't find any MX-Code. The DataGrid gets created with a function in its own class. (EntityDataGrid.as)
I do not get any error. The other objects just don't get viewed. (There is an exception rule)
- Jochen89

Datagrid with Horizontal and vertical header?

Hi,
I need to set a datagrid with a vertical and horizontal header, something like this:
http://www.poirrier.be/~jean-etienne/info/csharp/datagrid-app.png
But I need to be able to add labels to the vertical header cells too. Is there anyway to accomplish this with datagrid or advanced datagrid? I have been checking the docs without any luck.
Thanks in advance,
Aron.

Hi!,
Thanks a lot for the information Daiji (As allways). Anyway, this is not what I need. I think I did not provide all needed information.
This grid I will show to the user must be editable. The user must be able to enter data for each row/col combination. I mainly need same funcionality as a datagrid but being able to add a vertical header column for the Y axis.
Thanks in advance,
HexDump.

DataGrid with multi-row headers

Hello!
How can I have a DataGrid with header and sub-headers so to speak.
Something like this:
[ Main Header ]
[ sub1] [sub2] [sub3]
Thanks!

There is a SplitDataGridColumn example on my blog
Alex Harui
Flex SDK Team
Adobe System, Inc.
http://blogs.adobe.com/aharui

DataGrid with complex headers

Hello!
How can I have a DataGrid with header and sub-headers so to speak.
Something like this:
[ Main Header ]
[ sub1] [sub2] [sub3]
Thanks!

There is a SplitDataGridColumn example on my blog
Alex Harui
Flex SDK Team
Adobe System, Inc.
http://blogs.adobe.com/aharui

Datagrid with a datadriven combox

Similar Messages

Maybe you are looking for