DataGrid Conditional Row Hiding ?

Hello Everyone, I am trying to solve this basic and simple
Datagrid problem and could not find any help anywhere so I have to
resort to the experts here.
I have an XML with nodes that contain an attribute value that
I'm checking for to decide if I should display the row or not. For
example, consider this XML
xmlVar:XML = <XML>
<a row="1" visibility="Invisible" />
<a row="2" visibility="Visible" />
<a row="3" visibility="Visible" />
<a row="4" visibility="Visible" />
<a row="5" visibility="Invisible" />
</XML>
The dataprovider for the datagrid would simply be {xmlVar.a}
and the datagridcoulmn's dataprovider would be say "@row" Now lets
say I want to only display rows that have the visibility="Visible"
So the datagrid would only display "row" 2, 3, and 4 In other
words, a conditional display of a a datagrid row. Hope you guys
understand what I mean here. Is this even possible to do ?? I know
other solutions as using temporary variable to store the xml nodes
that have visibility="Visible" and then use that to feed in to the
datagrid. That is a very inefficient solution to this problem.
Wondering if anyone of you have a smarter/efficient way of solving
this issue.
Thanks in advance.

Well, I figured it out myself. For those who are interested.
I just threw in the conditional in to the data provider and it
makes sense and works like a charm ! Sometimes, things are so much
easier than you think it is !
dataProvider = {xmlVar.a.(@visibility!='Invisible')}
Done deal.

Similar Messages

Datagrid last row flickering problem.

Hi,
I used flex 3.5 datagrid. It is a complex datagrid with lot of itemrenderers and itemeditors.when my datagrid has vertical scroll and when i scroll datagrid, last row keep on flickering.
any idea or solution for this problem?

my grid contains 6 columns. Among 6, some of the column texts are visible some of them hided.
it is only happens to last row of the Datagrid.
This is happened when i scroll my datagrid vertically.

Hiding item renders in Group Datagrid Label Rows?

I have an Advanced data grid displaying a grouped collection. I have an item renderer in one column the is a canvas with a button that is bound to the data.
However, buttons are also showing on the header rows, where they are not needed (see below). How do I fix this?

I have an Advanced data grid displaying a grouped collection. I have an item renderer in one column the is a canvas with a button that is bound to the data.
However, buttons are also showing on the header rows, where they are not needed (see below). How do I fix this?

Conditional Row formatting not working in RTF

Hi Everyone,
Using the code from the documentation, I have managed to get every other row in my report to highlight, but only when displayed in a PDF. It doesn't come out with any row formatting when viewed as an RTF.
Can anyone explain why this is, or how I can get the RTF to how the formatting as well??
The code I am using is from page 6-90 from the documentation, in the "for-each ROW" text field formatting options:
<?if@row:position() mod 2=0?><xsl:attribute name=”background-color” xdofo:ctx="incontext">#D9D9D9</xsl:attribute><?end if?>

Ok, thank you for your reply.
I think it is a bug, because, if I remember correctly, the example we mentioned is within a section about RTF templates, so it should work.
Anyway, I found a workaround. Based on the example where the CASE switch is used: you just draw all the posible formats (including background color) for the rows in your table in your template and conditionally display the correct format for each row. You can use 'IF' instead of 'CASE' (I personally find it easier).
I hope this helps.
Greetings.

Datagrid change row event with tab AND/OR click ???

I have a spark datagrid with the last two columns enterable.
The natural approach for the user is to click in one and enter it then keep tabbing from cell to cell row to row to do his/her data entry.
Selectionchanging works only if you click, the selection does not keep up with the tab from row to row.
I want to enter the new data for each row when the user leaves the row.
What is the best way to approach this particular (and common) need.
Thanks
Dan Pride

Hi again,
I think I was not clear enough. Basically I have a textfield assigned with a style, let's say TextFieldStyle1. What I want is to programmatically assign the textfield another style, say, TextFieldStyle2.
How can I achieve that ?
Many thanks !

Load xml to Datagrid, add row or edit and save it to the xml file??

Good afternoon,
I know how to load the xml, add a row or edit the data in a datagrid . Only thing I dont't know
how to save the changes to the xml file. I'm ussing Flash Professional CC and it wil be an Adobe Air
desktop application.

Hi, and thank for the reply. Problem is not saving the xml, but getting the edited or new rows in the datagrid to be saved in the xml.....

DataGrid alternating row colors per column

Is there a way to set different alternating colors to each
column in a DataGrid. I have a datagrid where I want two of the
columns to have different alternating row colors, one column (red
and light red) and the other (green and light green).
Many thanks

You can simply set the DataGridColumn property to the
approprate colors.
ex.
<mx:DataGrid y="0" x="0" width="100%">
<mx:columns>
<mx:DataGridColumn id="col1" backgroundColor="0x640000"
dataField="col1"/>
<mx:DataGridColumn id="col1" backgroundColor="0xFF0000"
dataField="col1"/>
<mx:DataGridColumn id="col1" backgroundColor="0x006600"
dataField="col1"/>
<mx:DataGridColumn id="col1" backgroundColor="0x33CC33"
dataField="col1"/>
</mx:columns>
</mx:DataGrid>
or you can use the setStyle:
col1.setStyle("backgroudColor", 0x640000)

Change a dataGrid's row color

I have been looking a couple a places on the net to find an answer to this one, and the answers are all esoterics and unclear.
I have a datagrid --> dgTeams
I know the number (or index) of the row i want to change
And there is only one column
all i want to do is change it's backcolor.
something like :
dgTeams.getRowAt(3).style.color = color.blue
or something similar.
All I seem to find is answers about making packages and overriding methods and super() some itemRendrers.
Is there any simple solutions, or should I learn Russian alphabet to make it happen ?
thanks for your help and sorry for bad english and/or cynicism.
dominic
Religion is intellectual resignation -Stéphane Gendron-

Hi,
DataGrid has a style alternatingItemColors - you can use it to set color for each row if you want.
But the best way is to create custom itemRenderer and you don't need to learn Russian alphabet for this and it's not so difficult as it.

DataGrid add row on click

I back a DataGrid with an ArrayCollection of Item(s). So if
the array has 1 item and you click on the second row of the
DataGrid I need to add an item to the list to back that row also.
How can I tell what row they click on?

The "change" event will fire whenever you select a different
item in a DataGrid. You can also get the rowIndex from this event.
Joan

Datagrid - doubleclick row - change value in cell

Hi,
I have a datagrid populated via HTTPservice where one column
entitled Selected initially contains the value of 'yes' for all
rows.
I want the user to be able to double-click on the row to
toggle the value between Yes and No.
I can trap the doubleclick successfully, however I can't find
how to take the information from the doubleclick event to determine
the row and then update the correct cell.
Any assistance greatly appreciated - even a link to an
example of something similar would be great.
Thanks

Hi
private function clickHandler(e:ListEvent):void
if(e.columnIndex == 0)
(e.currentTarget as DataGrid).selectedItem.lesson =
e.itemRenderer.data.lesson=="yes"?"no":"yes";
(e.currentTarget as
DataGrid).dataProvider.itemUpdated(e.itemRenderer.data);
(do not forget to mark it as answered )

Conditional Row Printing

I have a table with 2 rows. I want to make the 2nd row conditional so it only shows it depending on a value I have in my XML.
I added a condition in the row:
<xsl:if test="NEXT_GRADE[normalize-space(.) != '']">
This keeps the data in the cells from printing but it still leaves a 2nd blank row for all of my records. How can I make the row not show at all so it becomes a 1 row per record report?
Thanks.

Hi,
I am also facing the same issue. Could you please explain me how are you conditionally printing duplex pages just for the last page.
In my case, I need to print the check in the footer section of the last page of the invoice and right behind that page, I need to print the address change section.
I have used <?last-page....?> functionality of XMLP to print the check in the footer section of the last page, and unable to print address section from there on in a new page.
So could you please send me your sample rtf template to [email protected] or explain the steps you followed to accomplish the work around.
Thanks and I appreciate your time on this.
Shankar.

DataGrid Moving rows up and down

I have this function to move rows up in a datagrid , yet i am having problems when it comes to move to rows down. I have tried changing the following line to +1 but it dint work any hints please.
            ac.addItemAt(itemToShift,dg.selectedIndex-1);
This is the code
public function up():void
            if(dg.selectedIndex == -1)
                Alert.show("Select the row which you want to up.");
                return;
            if(dg.selectedIndex == 0)return;
            var selectedRowInx : Number = dg.selectedIndex;
            var itemToShift : Object = ac.getItemAt(selectedRowInx) as Object;
            ac.addItemAt(itemToShift,dg.selectedIndex-1);
            ac.removeItemAt(dg.selectedIndex);
            dg.invalidateDisplayList();

Okay. So, I made the code a little simpler than what I said. With my code, you could have selected a row, clicked a cut button, then selected a another row to past afterwards or whatever. Here is the code for simply moving the row up and down.
I added code to catch if the row was at the top or the bottom of the data. Also, I created two indexes, one for the grid and one for the array collection. It will probably work with the one index, but I was trying to see if I could do the move on a sorted datagrid, but that is basically pointless.
protected function moveUpBtn_clickHandler(event:MouseEvent):void
var upSelectedIndex:int = myDataGrid.selectedIndex;
// Move Item
if(upSelectedIndex > -1) {
if(upSelectedIndex > 0) {
   // Get the selected Object
   var moveObject:Object = myArrayCollection.getItemAt(upSelectedIndex);
   // Get actual Object location if grid is sorted
   var upActualIndex:int = myArrayCollection.getItemIndex(moveObject);
   // Remove selected item at actualIndex
   myArrayCollection.removeItemAt(upActualIndex);
   myArrayCollection.refresh();
   // Move both indexes
   upActualIndex--;
   upSelectedIndex--;
   // insert item at actualIndex
   myDataGrid.dataProvider.addItemAt(moveObject, upActualIndex);
   myArrayCollection.refresh();
   // select grid at selectedIndex
   myDataGrid.selectedIndex = upSelectedIndex;
} else {
   Alert.show("Item is currently at the top of the list.", "Move Alert", Alert.OK, this);
} else {
Alert.show("No Item Selected.", "Move Alert", Alert.OK, this);
protected function moveDownBtn_clickHandler(event:MouseEvent):void
var downSelectedIndex:int = myDataGrid.selectedIndex;
if(downSelectedIndex > -1) {
// Move Item
if(downSelectedIndex < myArrayCollection.length -1) {
   // Get the selected Object
   var moveObject:Object = myArrayCollection.getItemAt(downSelectedIndex);
   // Get actual Object location if grid is sorted
   var downActualIndex:int = myArrayCollection.getItemIndex(moveObject);
   // Remove selected item at actualIndex
   myArrayCollection.removeItemAt(downActualIndex);
   myArrayCollection.refresh();
   // Move both indexes
   downActualIndex++;
   downSelectedIndex++;
   // insert item at actualIndex
   myDataGrid.dataProvider.addItemAt(moveObject, downActualIndex);
   myArrayCollection.refresh();
   // select grid at selectedIndex
   myDataGrid.selectedIndex = downSelectedIndex;
} else {
   Alert.show("Item is currently at the bottom of the list.", "Move Alert", Alert.OK, this);
} else {
Alert.show("No Item Selected.", "Move Alert", Alert.OK, this);
Here is the blog post with the working DataGrid and Source View
Message was edited by: DeanLoganBH - Had to set the Down Move to look for the Length of the ArrayCollection -1, because the DataGrid row starts at 0, it is one less than the total length of the ArrayCollection.

Advanced Datagrid - Summary Row without groupping

I need to make a datagrid with a summary row on top of it. It
works fine with the gropping tag inside of groupping collection.
But i don't need groups - i need only summaries.
When I white following code inside of Advanced - flex crashes
and tell something like "cannot null blablala".
quote:
<mx:GroupingCollection id="smallMetricsDataProvider"
source="{bigMetrics}">
<mx:summaries>
<mx:SummaryRow summaryPlacement="first">
<mx:SummaryField dataField="@type" operation="COUNT"
/>
<mx:SummaryField dataField="@budget"
summaryFunction="MetricsUtils.varianceTotalCount" />
<mx:SummaryField dataField="@raw"
summaryFunction="MetricsUtils.varianceTotalCount" />
</mx:SummaryRow>
</mx:summaries>
</mx:GroupingCollection>
What can you advice 4 me?
Thanks, Roman.

Fine, I found a way how to do it, using renderprovider 4
folder items with a null height =))).
It's a hack, the bad hack, i hope it wold be improved...
So, i have another problem - i want to get this summary
values. How?
Thanks, Roman.

MX DataGrid Footer row working in FB 4.5

Can someone please provide a sample of having a footer row for mx datagrid working in FB 4.5?
Thanks

Thanks for the info rangora!
I am trying to work with a tutorial creating a mobile twitter app
(http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/flex/articles/twitter -trends/build-first-mobile-flex-app.pdf)
Following the tutorial:..
Trying to connect the data service with the url he gives (http://search.twitter.com/trends.json)
returns 404 not found... URL changed since tutorial was made maybe? I dont know?
So went to twitter here (https://dev.twitter.com/docs/api/1/get/trends) and used this
(http://api.twitter.com/1/trends.json)
and was connected via flashbuilder test. ok good.
The tutorial has me set the name of the app in the properties dialouge under common as "twitter trends" then
continue on, and set debug configurations then run.
The app never connects..... and allways shows.. "Home View" as the title.??( I named the app twitter trends in the wizaed setup and in properties )
I am sure you can tell by now I am new to flash builder!
Also Red Circle with X in gutter.. shows within the view file's source page, (not the application File) stating--- "Cannot resolve attribute 'viewActive' for component type spark.components.View". this occurs after trying to insert viewActive="refresh()" into the <s:view> tag, in which the tutorial calls for this to be done to refresh the page view when using the "back control" in the app.(switching views)
4.5 returns red X error saying.. parse error.. must be inside <fx:declaration> tag... so I put it in there, and
4.5 returns error ... cannot follow <s: callresponder>.(which is inside the declaration tag) so I moved it between the </fx:script tag>
and the <fx:Declarations> tag> and still the same error statement....huh...it is not inside the declarations tag anymore and still in the s:view tag's scope, just lower in the page.
hoping to find some kind of answer to this.
"just trying to learn"
Thanks

Datagrid editable row

Hi,
I would like to know if there is a way to make an entire row in a datagrid editable when that row is selected. Currently when a user selects a cell of the row, only that cell becomes editable. I would like to have that entire row become editable. Is there a way of accomplishing this? Thanks in advance.

Hi,
Just gave your code a try and, although I did not implement the ITEM_EDIT_END yet, the editor does not do anything in terms of clicking on a row and "enabling" the textfields for that row. Below is my code along with yours:
package
    public class TestBean
        [Bindable] private var _processDefName:String;
        [Bindable] private var _processGroupName:String;
        [Bindable] private var _processSomeName:String;
        public function get processDefName():String {
            return _processDefName;
        public function set processDefName(value:String):void {
            _processDefName = value;
        public function get processGroupName():String {
            return _processGroupName;
        public function set processGroupName(value:String):void {
            _processGroupName = value;
        public function get processSomeName():String {
            return _processSomeName;
        public function set processSomeName(value:String):void {
            _processSomeName = value;
package
import flash.events.FocusEvent;
import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.controls.TextInput;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.managers.IFocusManagerComponent;
      Two TextInput Editor for DataGrid
public class DataGridMultiFieldEditor extends UIComponent implements IListItemRenderer, IDropInListItemRenderer, IFocusManagerComponent
     private var dgOwner:DataGrid;
     private var textEditors:Array = []
     public function DataGridMultiFieldEditor()
          super();
     public function get fullValue():String
          dgOwner = owner as DataGrid;
          var colInd:Number = dgOwner.editedItemPosition.columnIndex;
          return TextInput(textEditors[colInd]).text;
     private var _data:Object;
     public function get data():Object
          return _data;
     public function set data(value:Object):void
          _data = value;
          invalidateProperties ();
     private var _listData:BaseListData;
     public function get listData():BaseListData
          return _listData;
     public function set listData(value:BaseListData):void
          _listData = value;
     override public function setFocus():void
     override protected function createChildren():void
          dgOwner = owner as DataGrid;
          super.createChildren ();
        var child:TextInput;
          textEditors = new Array();
        var n:int = dgOwner.columns.length;
        for (var i:int = 0; i < n; i++)
            child = new TextInput();
            textEditors.push(child)
            addChild(child);
     override protected function commitProperties():void
          dgOwner = owner as DataGrid;
          super.commitProperties();
        var n:int = dgOwner.columns.length;
        for (var i:int = 0; i < n; i++)
              var dgColumn:DataGridColumn = dgOwner.columns[i];
              var value:String = data[dgColumn.dataField];
              TextInput(textEditors).text = value;
     override protected function updateDisplayList(w:Number, h:Number):void
          dgOwner = owner as DataGrid;
          super.updateDisplayList(w, h);
        var n:int = dgOwner.columns.length;
        var xx:Number = 0;
        for (var i:int = 0; i < n; i++)
             TextInput(textEditors).move(xx, 0);
            var ww:Number = dgOwner.columns.width;
             TextInput(textEditors).setActualSize(ww, h);
            xx += ww;
     private function keyFocusChangeHandler(event:FocusEvent):void
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="init();">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable] private var col:ArrayCollection = new ArrayCollection();
            private function init():void {
                var tbA:TestBean = new TestBean();
                tbA.processDefName = "A";
                tbA.processGroupName = "Group A";
                tbA.processSomeName = "AAAAAAAA";
                var tbB:TestBean = new TestBean();
                tbB.processDefName = "B";
                tbB.processGroupName = "Group B";
                tbB.processSomeName = "BBBBBBBB";
                col.addItem(tbA);
                col.addItem(tbB);
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:DataGrid editable="true" id="dg" dataProvider="{col}" width="300">
            <mx:columns>
                <mx:DataGridColumn width="100" editable="true" dataField="processGroupName" headerText="NAME" editorWidthOffset="200" itemEditor="DataGridMultiFieldEditor" editorDataField="fullValue"/>
                <mx:DataGridColumn width="100" editable="true" dataField="processDefName" headerText="TYPE" editorXOffset="-100" editorWidthOffset="200" itemEditor="DataGridMultiFieldEditor" editorDataField="fullValue" />
                <mx:DataGridColumn width="100" editable="true" dataField="processSomeName" headerText="MISC" editorXOffset="-200" editorWidthOffset="200" itemEditor="DataGridMultiFieldEditor" editorDataField="fullValue"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
</mx:Application>

DataGrid Conditional Row Hiding ?

Similar Messages

Maybe you are looking for