TabIndex in DataGrid ItemRenderer Component
How to implement tabindex for the DataGrid ItemRenderer
Component?Any
idea Please.
"ravi_bharathii" <[email protected]> wrote
in message
news:gbv9ps$k6r$[email protected]..
> How to implement tabindex for the DataGrid ItemRenderer
Component?Any
> idea Please.
Is this what you wanted?
http://blogs.adobe.com/aharui/2008/08/datagrid_itemeditor_with_two_i.html
Similar Messages
-
Custom itemRenderer component based on cell value: error 1009
I'm working on an item renderer for a dataGrid that has different states depending on the cell and row values.
The cell value is a toggle (true or null), and sets whether content should be shown in the cell or not
The row properties determine what is shown when the cell value is true.
The dataGrid dataProvider is populated based on user id input.
I created the itemRenderer as a custom actionscript component, closely following this example:
360Flex Sample: Implementing IDropInListItemRenderer to create a reusable itemRenderer
However, my component results in Error #1009 (Cannot access a property or method of a null object reference) when a user id is submitted.
package components
import mx.containers.VBox;
import mx.controls.*; import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.core.*;
public class toggleCellRenderer extends VBox
public function ToggleCellRenderer()
{super();}
private var _listData:BaseListData;
private var cellState:String;
private var cellIcon:Image;
private var imagePath:String;
private var imageHeight:int;
private var qty:String = data.qtyPerTime;
private var typ:String = data.type;
public function get listData():BaseListData
{return _listData;}
public function set listData(value:BaseListData):void
{_listData = value;}
override public function set data(value:Object):void {
super.data = value;
if (value != null)
//errors on next line: Error #1009: Cannot access a property or method of a null object reference.
{cellState = value[DataGridListData(_listData).dataField]}
override protected function createChildren():void {
removeAllChildren();
if(cellState=='true'){
cellIcon = new Image();
addChild(cellIcon);
//there is another state here that adds another child...
//next overrides commitProperties()...
There are no errors if I don't use an itemRenderer--the cells correctly toggle between "true" and empty when clicked.
I also tried a simple itemRenderer component that disregards the cell value and shows in image based off row data--this works fine without errors or crashing. But I need to tie it to the cell value!
I have very limited experience programming, in Flex or any other language. Any help would be appreciated.Your assumption that the xml file either loads with "true" or nothing is right.
After modifying the code to the following, I don't get the error, but it's still not reading the cell value correctly.
package components
import mx.containers.VBox;
import mx.controls.*;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.core.*;
public class toggleCellRenderer extends VBox
public function ToggleCellRenderer()
super();
private var _listData:BaseListData;
private var cellState:Boolean;
private var cellIcon:Image;
private var imagePath:String;
private var imageHeight:int;
private var qty:String;
private var typ:String;
public function get listData():BaseListData
return _listData;
override public function set data(value:Object):void {
cellState = false;
if (listData && listData is DataGridListData && DataGridListData(listData).dataField != null){
super.data = value;
if (value[DataGridListData(this.listData).dataField] == "true"){
cellState = true;
override protected function createChildren():void {
removeAllChildren();
if(cellState==true){
cellIcon = new Image();
addChild(cellIcon);
//there is another state here that adds another child...
//next overrides commitProperties()...
- didn't set the value of qty or typ in the variable declarations (error 1009 by this too--I removed this before but wanted to point out in case its useful)
- added back in the get listData() function so I could use the listData
- changed the null check
All cells are still returning cellState = false when some are set to true, even if I comment out [if (value[DataGridListData(this.listData).dataField] == "true")] and just have it look for non-null data. That shouldn't make a difference anyway, but it confirms that all cells are returning null value.
Swapping out the first if statement in set data with different variables results in the following:
[if (listData != null)] all cells return null (cellState=false for all)
both [if (value != null)] and [if (DataGridListData != null)] results in error 1009 on a line following the if, so I assume they return non-null values.
All rows have data, just not all fields in all rows, so shouldn't listData be non-null? Could it be that the xml file hasn't fully loaded before the itemRenderer kicks in?
I also realized I had removed the item renderer from many of the columns for testing, and since some columns are hidden by default only one column in the view was using the itemRenderer--hence the single alert per row I was worried about earlier.
Thanks for your help so far. -
DataGrid itemRenderer done in code?
I've searched for info on how to implement itemRenderer for a
DataGrid, and despite seeing some docs and examples, they're all
very different from what I think I want, and what I think should
also be possible.
Here's what I want: for one column (called "alert"), I want
to be able to programmatically display an appropriate image (or
even just render a character, such as "X") based on the data value
of that cell.
I would think it should be something like this:
<mx:Script>
private function RenderAlert(... ? ) :String {
if (data == "delayed") return "D"
else if (data == "canceled") return "X"
</mx:Script>
<mx:DataGrid ...>
<mx:columns>
<mx:DataGridColumn headerText="Alert" dataField="alert"
itemRenderer="RenderAlert"/>
</mx:columns>
</mx:DataGrid>
So, if anyone can point me to an example like this, I'd be
very appreciative. I'm really hoping it's possible, as all the
other methods I've seen illustrated don't appear to handle the
render decisions in code.
Thanks!By default, I'm not exactly sure what each cell is.I'm sure
if we dug into the docs somewhere it would tell us..
I've always done any conditional stuff in my itemrenderer
component.
Specifically in the set data function which you should
override:
i.e the following is a snippet that sets a combobox
itemrenderer in a datagrid. It gets the ID of the current object
being rendered then looks it
up in an arraycollection to get the "english/display name" of
that ID then sets that as the selected item in the combo box
override public function set data(value:Object):void {
yy = this.parentApplication.AC_semesters;
if ((value != null) && (yy != null) &&
yy.length > 0) {
a_course = Course(value);
this.invalidateProperties();
for (var i:int = 0; i < yy.length; i++)
var firstItem:Object = yy.getItemAt(i);
var myid:int = a_course.crs_semester;
if (firstItem.sem_id == myid)
cb3.selectedIndex = i;
so in your case you could make up an itemrenderer component
being a label, then in your set data function, have a conditional
check to set the label.text = "X" if the value passed in is equal
to whatever.
Hope this helps... -
Need help getting data out of a itemrenderer component
I have a datagrid populated via a dataprovider (arrayCollection). No issue there
I have a dateField Custom itemRenderer (as a component) and this is populated fine, so no issue there either.
However I can't seem to find any way of getting the data out (it can be edited, so it is no longer the original data). I can get the original data, but not the new data.
I can't use an event as there are hundreds of rows that I need to manipulate to write back to the database. I just want to get all the values as displayed in the datagrid.
I just want to loop through the datagrid and pull out the data as entered in the itemrenderer component object. In debug mode I can see
event --> itemrenderer --> [inherited] --> mycustomecomponent --> text. I just can't seem to get at it.
Any Ideas. It's got to be simple and I am just missing it I guess.In your ItemRenderer, assign your data.yourDataFieldHere to the new value after editing is complete. This will allow you to then loop through the dataProvider in the main application and get all the values needed.
function onEdit(evt:Event):void {
data.yourDataField = evt.currentTarget.text; // Or use whatever property of the edited item you need here.
Chris -
Revision: 12878
Revision: 12878
Author: [email protected]
Date: 2009-12-11 19:07:40 -0800 (Fri, 11 Dec 2009)
Log Message:
When sub-components don't have a tabIndex and when VideoPlayer instance does, assigned tabIndex to each inner-component to ensure that they appear in the correct tab order with other components on the stage.
QE notes: none
Doc notes: none
Bugs: n/a
Reviewer: Gordon
Tests run: checkintests
Is noteworthy for integration: no
Modified Paths:
flex/sdk/trunk/frameworks/projects/spark/src/spark/accessibility/VideoPlayerAccImpl.asMichael,
"Michael Caughey" <[email protected]> wrote in message news:413f0af6$1@mail...
If I'm doing something wrong what is it? Obviously there is something
different about how I configured my environment a year ago.What happens if you bring down ms02?
Regards,
Slava Imeshev -
Datagrid itemRenderer custom component formatting
OK, so this is my first attempt at an itenRenderer. This works below, but I have to imagine there is an easier way. There is also a problem with below, where the changed field (datafield=side) after the itemRenderer is applied, the text is all out of format, and there is a kind of selection on row one of that column. Obvisouly, though the translation is happening, I'm either overidding the wrong thing, or I'm doing something totally wrong.
Goal..... Show in the datagrid, the three colums below from date provided from elsewhere. (This all works), but in the 'side' data it comes in, in raw form as either an 'a' or 'b' or 'both', and I'm trying to display that as something more user friendly. So when both is read it changes it to 'No'.
Any help. This seems really easy, though I can't understanading hy my custom function screws with the cell selection, and formating?
---Main program---
<mx:DataGrid x="10" y="9" width="199" height="147" id="gdimmer_checkChannel" dataProvider="{ current_rack.getItemAt(0).rackLevels }"
change="dimmerCheckCurrentSelection(event);"
sortableColumns="false"
selectedIndex="{ current_rack.getItemAt(0).currentCheckIndex }" >
<mx:columns>
<mx:DataGridColumn headerText="UDN" dataField="udn"/>
<mx:DataGridColumn headerText="DD" dataField="side" editable="false" itemRenderer="renderers.DataGridDDSide"/>
<mx:DataGridColumn headerText="Circuit" dataField="circuit"/>
</mx:columns>
</mx:DataGrid>
--- Component Below ---
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<s:Label id="lblData" text="{dataGridListData.label}" />
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
if (value.side == 'both') { lblData.text = " No" };
if (value.side == 'a') { lblData.text = " a" };
if (value.side == 'b') { lblData.text = " b" };
]]>
</fx:Script>
</s:MXDataGridItemRenderer>See the latest post on my blog. You also need to set super.data in the data
setter.
Alex Harui
Flex SDK Team
Adobe System, Inc.
http://blogs.adobe.com/aharui -
Call function in itemRenderer component?
I'm doing this exercise to help me with learning flex and
have been using parts of
Example:
modifying data in DataGrid control from Live Docs.
I want to be able to alter the appearance of specific
DataGrid cells whose data has changed and am struggling a lot with
it.
The code is much the same as that example, but I have created
a component as an itemRenderer for the first name column, linked as
follows;
<mx:DataGridColumn headerText="Some Title"
itemRenderer="cpnts.irender"/>
The code for this component is;
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function testFn():void{
this.setStyle('backgroundColor','#BBBBCC')
]]>
</mx:Script>
<mx:Label text="{data.first}"/>
</mx:HBox>
in any hard coded form for now, how could I call the testFn()
function in the first cell in the table, from the Application?
What I'm working towards is a DataGrid used with data which
changes live, each data cell would go green or red depending on if
the value increased or decreased for example.
Thanks in advance, please also let me know if this is wrong
approach for doing this. Should I maybe be handling and comparing
changed data in my ArrayCollection and setting other properties
accordingly? eg: @change[none|higher|lower] then re-populating the
DataGrid and setting display properties for each cell according to
that value?
Thanks again, (I hope I'm making sense by the way, I'm a bit
low on sleep!)
Jamie MasonOverride the data setter.
override public function set data(value:Object):void
if(value != null)
this.setStyle("backgroundColor","#BBBBCC");
super.data = value;
} -
Showing/hiding images in a DataGrid ItemRenderer flex
Hi,
I have datagrid in that i have a itemRenderer in which i am loading images. What i need to do is i have to hide one or two images in tha datagrid.
For example if i have ten rows of data with image means i need to hode 4 rows images. Please any body help me.
Regards,
Jayagopal.
Message was edited by: Jayagopal FlexTry adding visible='{data.participant_count>0}' to your HBox or Component
-K -
Datagrid itemRenderer - Help needed
I am having trouble getting this little bit of code working. I am trying to build an adhoc SQL generator, where the user selects the list of fields and then is able to set the WHERE criteria in a dataGrid, each row has field, criteria (ComboBox -equals, less than, etc), Low (editable), High (editable-Text or ComboBox lookup), AND/OR static ComboBox. Some of the field selections could be regular text based fields like Name and other fields selected could be lookup fields like State. I would like to be able to on rows that are TextInput render out a TextInput for LowValue and HighValue columns and for lookup fields render out a ComboBox with the dataProvider being set by a call to addComboData.
addComboData simply uses the myDataGrid.selectedItem.fieldname to determine which of the lookup table to use and assigns that collection to CBoxdataProvider. Seems simple enough but I have not been able to figure it out, some modifications seem to work, but only for a single dg cell others give me a list but does not populate lowValue but kill all other renderers. All help is appreciated.
<mx:DataGridColumn headerText="Low" rendererIsEditor="true" editorDataField="selectedItem" dataField="lowValue" textAlign="center">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalAlign="center">
<mx:ComboBox initialize="outerDocument.addComboData()" dataProvider="{ outerDocument.CBoxdataProvider }" labelField="Description" textAlign="left" visible="{data.showCombo}" />
<mx:TextInput id="lowLabel" visible="{!data.showCombo}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>Setting the selected item is not the same as a click. If you created the renderer correctly the style should change when you actually click on the item. (Does it?)
Or are you just trying to get the first row's background to be a different style when the datagrid first shows? (Initialization problem or not working at all?) -
Datagrid itemRenderer/itemEditor trouble
I have a datagrid in a Flex project, the data grid has an XML file as the source (contents below), now due to the way it is formatted (I cannot change this) some of the data I want to display is inside a tag that isnt at the initial array level. Here is the file:
<?xml version="1.0" encoding="utf-8" ?>
<Categories>
<Category>
<CategoryName>Cat 1</CategoryName>
<CategoryLink>http://www.google.com</CategoryLink>
<CategoryData>
<CategoryDescription>This is the description of category 1</CategoryDescription>
<CategoryHeader>My Category Title 1</CategoryHeader>
<CategoryNumber>1</CategoryNumber>
</CategoryData>
</Category>
</Categories>
I need to display CategoryName, CategoryLink, CategoryData.CategoryDescription, CategoryData.CategoryNumber.
Now I blindly dropped the datagrid into the project and bound it to the data source, I get the following returned for CategoryData:
[object CategoryData_type]
Not much use, but with what appears to be a hack I changed the code for the column to read dataField="CategoryData.CategoryDescription", and hooray it works. I didnt realise at the time that this was wrong, and when I dropped in an itemEditor things went wrong. When the datagrids load they display the correct data, but then when you try to edit any of the child property fields you get the following error:
ReferenceError: Error #1069: Property CategoryData.CategoryDescription not found on valueObjects.Category_type and there is no default value.
I have looked up the error and I realise that it means that there is no value for CategoryData.CategoryDescription, but if I can display it why can i not edit it! What do I have to do to make this work?
Anyway, here is the code, it shows the default bound datagrid, a second datagrid with the hack applied, and a third hacked datagrid with an itemRenderer and itemEditor on the number columns
Can you please take a look and tell me what I did wrong, well more to the point, if there is a doc that explains how to deal with XML like this then please point me at it.
I did try changing the return type for ANY of the columns, but this fails, I also tried a labelFunction, but again I can get the [object CategoryData_type] to display, but I get the null reference exception as the datagrid loads if I try to get to the child props.
Here is the Flex code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:categories="services.categories.*"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
getDataResult.token = categories.getData();
protected function lftest(item:Object, column:GridColumn):String
var t:String = item.CategoryData;
return t;
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getDataResult"/>
<categories:Categories id="categories"
fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
showBusyCursor="true"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:DataGrid id="dataGrid" x="10" y="10" width="684"
creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
<s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
<s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
<s:DataGrid id="dataGrid2" x="10" y="147" width="684" editable="true" requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
<s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
<s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
<s:GridColumn dataField="CategoryData.CategoryDescription" headerText="Desc"></s:GridColumn>
<s:GridColumn dataField="CategoryData.CategoryHeader" headerText="Head"></s:GridColumn>
<s:GridColumn dataField="CategoryData.CategoryNumber" headerText="Num"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
<s:DataGrid id="dataGrid3" x="10" y="284" width="684" editable="true" requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn width="100" dataField="CategoryName" headerText="CategoryName"></s:GridColumn>
<s:GridColumn width="100" dataField="CategoryLink" headerText="CategoryLink"></s:GridColumn>
<s:GridColumn width="180" dataField="CategoryData" headerText="CategoryData"></s:GridColumn>
<s:GridColumn headerText="Number">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:NumericStepper value="{data.CategoryData.CategoryNumber}" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="CategoryData.CategoryNumber" headerText="Number">
<s:itemEditor>
<fx:Component>
<s:GridItemEditor>
<s:NumericStepper value="{data.CategoryData.CategoryNumber}" />
</s:GridItemEditor>
</fx:Component>
</s:itemEditor>
</s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object CategoryData="CategoryData1" CategoryLink="CategoryLink1"
CategoryName="CategoryName1"></fx:Object>
</s:typicalItem>
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DataGrid>
</s:Application>
All and any advice welcome.
ShaineOne last try, I now know for sure that the data in the file is loading, I created a labelFunction on the CategoryDescription column that looks like this:
protected function dispData(item:Object, column:GridColumn):String
var t:Object = item.CategoryData;
var s:String = item.CategoryData.CategoryDescription;
return s;
Because it returns s, which I now know is undefined (which is the problem!) I managed to get a debug output. As you can see the value of t is the categorydata, and it appears to have the 3 values I need to get access to, but I have no idea how to do this. I also changed the function to read:
protected function dispData(item:Object, column:GridColumn):String
var t:Object = item.CategoryData;
var s:String = t.CategoryDescription;
return s;
But this undefines t and s! Very confused
this test2 (@d2e10a1)
item valueObjects.Category_type (@91f8a51)
[inherited]
column spark.components.gridClasses.GridColumn (@d61b239)
t valueObjects.CategoryData_type (@91f8c11)
[inherited]
_cacheInitialized_isValid false
CategoryDescription "This is the description of category 1"
CategoryHeader "My Category Title 1"
CategoryNumber "1"
_changedObjects mx.collections.ArrayCollection (@d5d9e41)
_changeWatcherArray [] (@cfab061)
_dminternal_model _CategoryData_typeEntityMetadata (@d4286a1)
_doValidationCacheOfCategoryDescription null
_doValidationCacheOfCategoryHeader null
_doValidationCacheOfCategoryNumber null
_doValidationLastValOfCategoryDescription null
_doValidationLastValOfCategoryHeader null
_doValidationLastValOfCategoryNumber null
_internal_CategoryDescription "This is the description of category 1"
_internal_CategoryHeader "My Category Title 1"
_internal_CategoryNumber "1"
_invalidConstraints [] (@ca50fd9)
invalidConstraints_der <setter>
_isValid false
isValid_der <setter>
managingService <setter>
_managingService null
_model _CategoryData_typeEntityMetadata (@d4286a1)
_validationFailureMessages [] (@cfab0b1)
s undefined
As always all help welcome.
Shaine
Message was edited after a oops moment by: ProcessEndNow -
Move focus from one to another itemRenderer inside DataGrid itemRenderer
I have a mx: DataGrid with 4 columns that have a itemRenderer with the following settings:
- Mx:DataGrid:
<code>
<mx:DataGrid id="itensPedidoCompraList"
width="100%"
height="120"
dataProvider="{ model.pedidoCompra.itens }"
editable="true"
itemEditEnd="itensPedidoCompraList_itemEditEndHandler(event)">
</code>
- Mx:DataGridColumn:
<code>
<mx:DataGridColumn headerText="{resourceManager.getString('cadastroPedidoCompra', 'ident.PercentualDesconto') }"
width="60"
textAlign="right"
rendererIsEditor="true"
editorDataField="data">
<mx:itemRenderer>
<fx:Component>
<mx:Canvas>
<input:NumberInput width="55" number="@{ data.percentualDesconto }"/>
</mx:Canvas>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</code>
The user clicks on the line of the grid and click on the column to edit.
After him change or add value, ENTER key and have to move the focus to another column in the same line.
The way I'm doing, is moving to the column below.
What is the best way to do to move to the right column?
thank youTry adding a capture phase event listener to DataGrid for keyDown and changing the key from ENTER to TAB
-
Problem with Datagrid itemrenderer with a Datagrid
Hi all,
I have this kind of a structure. I try to use a datagrid item renderer in a data grid column. However when I try to move rows inside the same datagrid I experience a problem. When my datagrid loads first it seems correct, but when I drag and drop a row in the same datagrid inner datagrids start to be drew in wrong rows. I checked the DB but there are no mistakes in DB records. Problem is with rendering. I suppose inner datagrids trying to draw to early or datagrid component is trying to reuse the itemrenderer. I could not find any solutions for that. Any help will be greatly appreciated..
<mx:DataGridColumn width="130" editable="false"
headerText="{resourceManager.getString('resources', 'acl.content')}">
<mx:itemRenderer>
<mx:Component>
<ACLInnerDataGrid rowCount="3" dragEnabled="true" dropEnabled="false"
x="0" y="0" editable="true" dragInitiatorId="catGrid"
filterGroupName="content" remoteDestination="zend"
remoteSource="ACLFilterParamService" showHeaders="false"
creationComplete="this.init();">
<columns>
<mx:DataGridColumn dataField="id" editable="false" visible="false"/>
<mx:DataGridColumn dataField="ruleId" editable="false" visible="false"/>
<mx:DataGridColumn dataField="filterKey" editable="false" visible="false"/>
<mx:DataGridColumn dataField="param" editable="false" visible="false"/>
<mx:DataGridColumn dataField="name" editable="true"/>
</columns>
</ACLInnerDataGrid>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Thanks in advance.I have attached the item renderer component source code.
-
DataGrid itemrenderer with switch statement
Hi,
I have datagrid control with this columns
<mx:DataGrid id="dgvParagraphs" >
<mx:columns>
<mx:DataGridColumn dataField="type" headerText="Type"/>
<mx:DataGridColumn dataField="title" headerText="Title"/>
<mx:DataGridColumn dataField="content" visible="false"/>
</mx:columns>
</mx:DataGrid>
Under type column I have values from 1 to 6. Each number presents type of content. I have icons for each type. I would like to show icon instead of just number. I know this can be done using itemrenderes but I don't know how to accomplish this.If this post answers your question or helps, please mark it as such.
Greg Lafrance
www.ChikaraDev.com
Flex Development and Support Services
You might see issues with this code during scrolling, as DataGrid recycles itemRenderers, but in that case the icon information must be in the data.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function getImageSource(item:Object):String{
var retVal:String;
switch(uint(item.type)){
case 1:
retVal = "black.png";
break;
case 2:
retVal = "blue.png";
break;
case 3:
retVal = "gray.png";
break;
case 4:
retVal = "green.png";
break;
case 5:
retVal = "purple.png";
break;
case 6:
retVal = "red.png";
break;
trace(retVal);
return retVal;
]]>
</mx:Script>
<mx:DataGrid id="dgvParagraphs" dataProvider="{dataXML..item}">
<mx:columns>
<mx:DataGridColumn dataField="type" headerText="Type" width="50">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{outerDocument.getImageSource(data)}" horizontalAlign="center"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="title" headerText="Title" width="100"/>
<mx:DataGridColumn dataField="content" visible="false"/>
</mx:columns>
</mx:DataGrid>
<mx:XML id="dataXML" xmlns="">
<data>
<item>
<type>2</type>
<title>My Title 1</title>
<content>Content 1</content>
</item>
<item>
<type>5</type>
<title>My Title 2</title>
<content>Content 2</content>
</item>
<item>
<type>3</type>
<title>My Title 3</title>
<content>Content 3</content>
</item>
<item>
<type>1</type>
<title>My Title 4</title>
<content>Content 4</content>
</item>
<item>
<type>4</type>
<title>My Title 5</title>
<content>Content 5</content>
</item>
<item>
<type>6</type>
<title>My Title 6</title>
<content>Content 6</content>
</item>
<item>
<type>2</type>
<title>My Title 7</title>
<content>Content 7</content>
</item>
<item>
<type>1</type>
<title>My Title 8</title>
<content>Content 8</content>
</item>
<item>
<type>4</type>
<title>My Title 9</title>
<content>Content 9</content>
</item>
<item>
<type>5</type>
<title>My Title 10</title>
<content>Content 10</content>
</item>
<item>
<type>2</type>
<title>My Title 11</title>
<content>Content 11</content>
</item>
</data>
</mx:XML>
</mx:Application> -
Datagrid itemRenderer checkbox
Hi,
I have datagrid control in my application and I use itemRenderer to render some data received from webservice. Works just fine but I would like to disable changing state of checkbox. I am using checkbox renderer just to show data more user friendly and not that users can check and uncheck it. So how can I disable checking and unchecking (by user click interaction) my checkbox in datagrid?
I my example column with dataField "IsAlive" is the one rendered by CheckBox component.
<mx:DataGrid id="lstAllPushes" left="10" right="10" top="10" bottom="60">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="ID"/>
<mx:DataGridColumn headerText="Start date" dataField="DateInserted"/>
<mx:DataGridColumn headerText="Expiration date" dataField="DateExpiration"/>
<mx:DataGridColumn headerText="Alive" dataField="IsAlive" itemRenderer="mx.controls.CheckBox"/>
</mx:columns>
</mx:DataGrid>
Thx in advance.Try this:
<mx:DataGridColumn headerText="Alive" dataField="IsAlive" >
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox enabled="false"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn> -
Datagrid itemrenderer list rowcount not changing with data
I have a datagrid with an itemrenderer. the itemrenderer is a list component. I populate the list with different values for each datagrid row. this works fine. However, I want the list to reset the rowcount for each datagrid row. This is not happening. if the first datagrid row list box is 3 rows every list box in that column is 3 rows no matter what i do. here's my code:
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" rowCount="1">
<mx:Script>
<![CDATA[
import mx.utils.ObjectProxy;
import mx.collections.ArrayCollection;
import mx.utils.ArrayUtil;
[Bindable] private var arr:Array;
override public function set data( value:Object ) : void
super.data = value;
if(value != null && value.MEET is ArrayCollection)
var len:Number = value.MEET.length;
arr = new Array();
for each (var obj:ObjectProxy in value.MEET){
arr.push(obj.DAYS);
this.dataProvider = arr;
//labelField = "DAYS";
this.rowCount = len;
else if (value != null && value.MEET is ObjectProxy )
this.rowCount = 1;
this.dataProvider = value.MEET;
this.labelField = "DAYS";
else
this.rowCount = 1;
]]>
</mx:Script>
</mx:List>Hello !
This trick makes my application freeze...
I've just an advancedDatagrid populated with arrays, and a list as renderer on some of its columns... I've got exactly the same problem (rowCount that is always the same, for all of my renderers instances), but your solution doesn't work it out...
Any idea ?
thanks a lot
Maybe you are looking for
-
How can an email account be created using Java mail on the FLY.
Scenario is such that i am using mail server from MDaemon.com and JavaMail api,and making Email website like yahoo...some what ! but how can a user create his account by just filling the form and when he enters his account be created in Mail server..
-
My Eye Dropper STILL does not work in CS5 while using Lion with one monitor. How can i fix this?!?
Hello everyone! This is my first post because i have grown very disgruntled at the fact that my eye dropper does not work my Premiere CS5. I would use the Ultra Key a lot but now I obviously can not really use it too well because of no eye dropper. I
-
HP Laserjet M1212nf MFP not printing doc in Windows print queue
Printer is connected via USB to a laptop running XP. Prints OK. Have another Windows laptop connected via wireless network, sharing the printer and this prints OK. Am trying to share the printer with a Mac OSX Lion over the wireless network. I can ge
-
How can i get facetime on my saudi-bought IPhone 5?
need some help
-
Publishing announcements/news in portal
Hi all, I need to create a feature in EP where in any authorized user will be able to upload a document(say for example company's annoucement) and the information contained in the document will be shown in the portal. (Description : Portal is company