Datagrid and Inline Item renderer problem

I have a datgrid with two inline item renderers. The dataprovider for my DG is a nested object (objects within objects within objects i.e 3-layered).
Main Object - 1st Level
                          |
              2nd Level Object 1
                                |
                            3rd level object '1' => ('name'=>somename,'id'=>someid)
                            3rd level object '2'
                            3rd level object 'n'
             2nd Level Object 2
                                |
                            3rd level object '1' => ('name'=>somename,'id'=>someid)
                            3rd level object '2'
                            3rd level object 'n'
I use 2 item renderers (one for each datagrid column) which loops thro the 2nd level object1 and 2 respectively (the 2nd level object is a dynamic array of objects, in that the number of objects within keep changing).
Within the item renderer I loop thro the 2nd level object using a foreach and then display the data. The data is a linkbutton, which when clicked , calls a remote object function to delete the data from the database
now on the result event of the remote object function call, i call the function to repopulate the DG, so that the updated data is displayed.
When i click on the linkbutton in the first row, the backend works perfectly fine (the data gets deleted from the database and the refreshed data is sent back), but for some reason, the deleted data suddenly appears in the 2nd row.
When i delete it from the second row, it appears on the 3rd row (nothing happens in the backend since the data is already deleted).. and so on, till it appears on the last row and then the DG looks exactly the way it shld have looked after the first delete.
This is just the beginning. The second item renderer also displays a linkbutton, which when clicked, displays that data in the previous column (the one where this data can be deleted). When i click on 1st row, the data gets added in the previous column of the second row .. and so on..
Basically, my DG is acting really weird. I overrided the set data function in the item renderer to refrsh the data and called its invalidateDisplayList. I also call the Datagrid's invalidateDisplayList function after each refresh. The behavior remains the same.
Please help me on this ...

Hi, Post a test code.... It will be a lot easier to help you Mich

Similar Messages

When to use Drop In Item renderer and InLine Item Renderers ??

Hi ,
I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .
What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .
What i read from tutorilas that we cant use Drop In because they say , The only drawback to using drop in is that them is that you cannot configure them
Please help me .

Hi Kiran,
Here is the detailed explanation you needed:
You can also refer the link below:
http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html
Drop-In Item Renderers
Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.
In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.

<mx:DataGridColumn dataField="photo"
                   headerText="Employee Photo"
                   itemRenderer="mx.controls.Image"/>
Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.
Inline Item Renderers
Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.
It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.
<mx:DataGrid id="myGrid" dataProvider="{gridData}">
   <mx:columns>
      <mx:DataGridColumn headerText="Show Relevance">
         <mx:itemRenderer>
            <mx:Component>
               <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
                         toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
                         click="outerDocument.toggle()" />
            </mx:Component>
         </mx:itemRenderer>
      </mx:DataGridColumn>
   </mx:columns>
</mx:DataGrid>
Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.
public function toggle():void
Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.

<mx:Component id="ImageRenderer">
   <mx:VBox width="100%" height="140"
            horizontalAlign="center" verticalAlign="middle">
      <mx:Image source="{'assets/'+data.image}"/>
      <mx:Label text="{data.image}" />
   </mx:VBox>
</mx:Component>

<mx:DataGridColumn headerText="Image"
                   dataField="image" width="150"
                   itemRenderer="{ImageRenderer}"/>
In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari
Message was edited by: BhaskerChari

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.

Datagrid Drop Down Item renderer Scroll Problem

Hi,
I am having a problem with an drop down item renderer on a Datagrid. When ever the datagrid is displayed and the cell is clicked on i want this to display a drop down list of objects. I can get the drop down to appear with the list of objects. H
owever the scrollbar does not work on this item to allow the user to scroll through all the objects. If you use the mouse wheel you can scroll down through them all but not when you try and click on the scroll bar to drag down. Below is the code used. Any advice why this might be happening??
<mx:DataGridColumn headerText="Widget"
dataField="WidgetName"
editable="true" headerWordWrap="false" textAlign="center" width="100"
editorDataField="Widget">
<mx:itemEditor>
<fx:Component>
<s:MXDataGridItemRenderer focusEnabled="true" height="22" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
private var selectedWidget:Widget = null;
public function get ccyPair():String {
return ddlCcyPairs.selectedItem.Widget;
override protected function commitProperties():void {
super.commitProperties();
trace("Commit .......");
protected function ddlCcyPairs_changeHandler(event:IndexChangeEvent):void {
for each(var ccyP:CurrencyPair in ddlCcyPairs.dataProvider) {
if (ccyP.ccyPair == ddlCcyPairs.selectedItem.ccyPair) {
selectedWidget = ccyP;
ddlCcyPairs.selectedItem = selectedWidget;
protected function ddlCcyPairs_creationCompleteHandler(event:FlexEvent):void {
for each(var ccyP:CurrencyPair in ddlCcyPairs.dataProvider) {
if (ccyP.ccyPair == data.ccyPairName) {
selectedWidget = ccyP;
ddlCcyPairs.selectedItem = selectedWidget;
]]>
</fx:Script>
<s:DropDownList id="ddlWidgets" width="100%"
dataProvider="{parentApplication.Widgets}"
labelField="name"
selectedItem="selectedWidget"
creationComplete="ddlWidgets_creationCompleteHandler(event)"
change="ddlWidgets_changeHandler(event)"/>
</s:MXDataGridItemRenderer>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>

Hi, Post a test code.... It will be a lot easier to help you Mich

DataGrid Using an item renderer that spans an entire row

Anyone know how can I do this using DataGrid?

I dont understand how Can I do it. Below I have a source code that I'm working with this case. I have 2 columns and I would like when i click in combobox my item renderer fill all rows.
Look I have this code (Main Application and Renderer):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
     <mx:transitions>
          <mx:Transition fromState="*" toState="*">
               <mx:Resize target="{this}"/>
          </mx:Transition>
     </mx:transitions>
     <mx:states>
          <mx:State name="normal"/>
          <mx:State name="expanded"/>
     </mx:states>
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var ac:ArrayCollection;
          private function changeState(event:Event) : void {
               if( event.target.selected )
                    currentState = "expanded";
               else
                    currentState = "normal";
          override public function set data(value:Object) : void {
               super.data = value;
               ac = new ArrayCollection(value.models);
     ]]>
     </fx:Script>
     <mx:CheckBox label="{data.title}" click="changeState(event)"/>
     <mx:List dataProvider="{ac}" y="20" width="100%" includeIn="expanded"/>
</mx:Canvas>
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:ct="*"
     height="100%" width="100%">
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var dp:ArrayCollection = new ArrayCollection([
          {title:"Ford", style: 'Modern', models:["Fusion","Taurus","Mustang"]},
               {title:"Volkswagen", style: 'Normal', models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
               {title:"Infiniti", style: 'Modern', models:["FX35","GX35","Q45","M35"]},
               {title:"Audi", style: 'Esport', models:["A3","A4","A6"]}
     ]]>
     </fx:Script>
     <mx:DataGrid dataProvider="{dp}" variableRowHeight="true" height="100%" width="100%">
          <mx:columns>
               <mx:DataGridColumn dataField="title" headerText="title" itemRenderer="DetailItem"/>
               <mx:DataGridColumn dataField="style" headerText="style" />
          </mx:columns>
     </mx:DataGrid>
</s:Application>

Flex Mobile List Item Renderer problems

i have flex mobile list created with item renderer,i remove individual item in flex mobile list,it is worked very well,but some times i double click action or another scroll event using in list, last item doesn't delete in flex mobile list.it is repeated again and again.so anyone this problem faced,give me a solution.
i expect your feedback.Thanking You

Hi Alex,
I've searched a lot for that post (on this forum and on google). Not sure if this is the post you were talking about: http://tech.groups.yahoo.com/group/flexcoders/message/161146
I have fixed the setter of the data not to also manage the state (I figured it was inappropriate there)... overrode the getCurrentRendererState, I'm managing the state staight from the data. When I run the following... All sold items show as sold... and normal states show as normal. When I try to hover over the normal state, it dosen't play the hovered state, and when I click to the selected state. These built in states don't work.
override public function set data(value:Object):void {
     super.data = value;
     ticketNumber_ti.text = value.slots_id;
override protected function getCurrentRendererState():String {
     var state:String;
     if (data.date_purchased != null) {
          state = 'sold';
          mouseChildren = false;
          mouseEnabled = false;
     } else {
          state = 'normal';
          mouseChildren = true;
          mouseEnabled = true;
     return state;
On another note, the states only update, once I start scrolling, everything updates... I tried to validateDisplayList() to the List after setting the dataProvider with no luck.
Once I find a solution I will certainly add it to my Blog as I have not found a lot of solutions for this problem.
Any help is grteatly appreciated.

AdvancedDataGrid Item Renderer Problem

I have a problem in AdvancedDataGrid Item Renderer.
The Grid is having dynamic add/remove row functionality and the first column I having an Item Renderer.
I am facing a problem when I add and remove row from the grid. The item Renderer.
is misplaced in different row.
If you click on the node new row will get added. (only by clicking Asset Sale & CDS node, not for other nodes).
Try clicking more than 6 times then do delete row you can see the problem.
Please find the attachment for code sample.
I have been trying this out for quiet some time. But no hope.
Can any one solve this issue?
Thax
Tamil Selvan

Sorry, I forgot to tell the file in the attached zip.
THe file name is: ActionPlanTest.html

ColumnChart - 3D Item Renderer problem

I'm building a 3D column chart and am finding that I need to
draw the columns in a specific order other than the default, which
appears to be by series.
Things go just fine until the z-order depth is greater than
the distance between the series. Once that occurs, the potential
exists for things to go south.
To demonstrate the issue, I've put a few screenshots here:
3D Column Chart
Images
My question: Is there a way to define, or otherwise take over
the drawing order of the ColumnSeriesItems? I want to draw the
columns in the order they appear from left to right, but Flex seems
to want to draw by order of series - first Series1, then Series2,
then Series3, etc.
I'm looking through the Framework source code, but I haven't
found a way around this - yet. Of course, if there's another
approach, like using some clipping method I'm not aware of, etc,
please feel free to clue me in.
Thanks in advance to anyone with useful info.

Thanx for reply.But this is not what i am looking for.I need
to apply different colors for each bars.I am generating charts
dynamically.The item renderer is working fine.But at specific
condition the item renderer shold ne removed from the chart series

Synchronization between datagrid and chart Item

Hi
In my application, I have a datagrid and corresponding bar
chart. there is a toggle button through which I can switch between
chart and data grid.
Now I want to synchronize both.
for example If I select any 3 rows in data grid then it
should selects 3 bars on the chart also.
can any body help me in that?
Thanks
smonika15

Hi,
U need to have a combo box renderer something like:
In the object that u are populating the data provider of the
data grid, add 2 fields:
listOfFields & selectedField.
<mx:HBox horizontalScrollPolicy="off"
verticalScrollPolicy="off"
xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public var itemSelected: Object;
]]>
</mx:Script>
<mx:ComboBox id="combo"
dataProvider="{data.listOfFields}"
selectedItem="{data.selectedField}"
change="itemSelected=combo.selectedItem;"
updateComplete="itemSelected=combo.selectedItem;">
</mx:ComboBox>
</mx:HBox>
Now, loop through the list of objects that u get from
back-end and keep setting the 2 new properties (listOfFields &
selectedField). For setting the value of selectedField, u need to
loop through listOfFields to match the fieldId.
Hope that helps,
Cheree

Problem: FlashPlayer 10.1 XML and HTML-Entity Rendering problem

Hi,
I have some problems using
childNode[0].nodeValue
and HTML Entities since updating my FlashPlayer from version 10.0 to 10.1
First some information about my system:
FlashPlayer: WIN 10,1,53,64
OS: WinXP (32bit)
Browser: Firefox 3.6.6; IE 7.0.5730.13
I am handling XML data which contains for example some HTML Entities like "<" or ">". A XML-Parser reads the nodeValue and puts the text into a HTML enabled textfield. Now FlashPlayer Version 10.1 does not display the text after "&lt".
For example the following text in XML:
<![CDATA[<ul><li>pressure < 250bar</li>
is rendered as "pressure". Debugging the application shows, that after getting the Text with
childNode[0].nodeValue
returns "pressure < 25bar" so HTML textfield interprets the "<" as a HTML Tag.
Possible Workaround: Using
<![CDATA[<ul><li>pressure %30C; 250bar</li>
and replacing it after reading the nodeValue with "<" solves the problem.
Ist there any other solution without changing my XML Contents? Can I tell Flash or my XMLParser that HTML Tags must not be replaced?
Thank's for any idea and help.

Investigate the problem, but did not become easier.
When calling external function used method "<invoke name="function" returntype="xml"><arguments><string>.....</string></arguments></invoke>" flashplayer remove from string value tag "CDATA".
This is as in 10.0 player so and in 10.1.
But after install 10.1 version string exposed decoding. All escape symbols convert to real char data.
Example:
"and WELL-FORMED</b></font> HTML"
=>
"and WELL-FORMED</b></font> HTML"
So as CDATA deleted is abnormal decoding XML data in the AS code.
Who ever can help overcome this unnecessary effect?

DataGrid with Image column rendering problem

Hi,
I'm having trouble in getting images displayed on a datagrid
column. If I scroll down and then scroll up the scrollbar, the
images are rendering fine. The source of the image is Bitmap which
is generated at run time. Any idea how to solve this problem? Any
help is greatly appreciated.
Thanks,
Jeesmon
My component code is pasted below
"Attach Code"
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()" dataProvider="{cardDataProvider}">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import
org.eclipse.higgins.cardselector.filters.CustomDropShadowFilter;
import mx.collections.ArrayCollection;
import mx.controls.Image;
import org.eclipse.higgins.cardselector.icard.Card;
[Bindable]
private var cardDataProvider:ArrayCollection;
private var _cards:Array;
public function get cards():Object {
return this._cards;
public function set cards(value:Object):void {
this._cards = value as Array;
if(this._cards != null && this._cards.length > 0)
buildDataProviderArray();
private function buildDataProviderArray():void {
var dataArray:ArrayCollection = new ArrayCollection();
for(var i:int = 0; i<this._cards.length; i++) {
var card:Card = this._cards
dataArray.addItem(card);
this.cardDataProvider = dataArray;
private function init():void {
this.styleName = "CardsBox";
this.width = 200;
this.rowHeight = 120;
this.headerHeight = 0;
this.liveScrolling = true;
this.filters = [new CustomDropShadowFilter(0x333322, 55,
2).getInstance()];
]]>
</mx:Script>
<mx:columns>
<mx:DataGridColumn sortable="false" editable="false"
resizable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%" paddingLeft="5"
paddingRight="5" paddingTop="5" paddingBottom="0"
verticalGap="0">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function getBitmap(value:*) : DisplayObject
var result:DisplayObject;
var loader:Loader = Loader(Image(value).getChildAt(0));
if(loader.contentLoaderInfo.childAllowsParent)
if(loader.content is Bitmap)
var bitmap:Bitmap = Bitmap(loader.content);
result = new
Bitmap(bitmap.bitmapData,bitmap.pixelSnapping,bitmap.smoothing);
return result;
]]>
</mx:Script>
<mx:Image source="{getBitmap(data.getImage())}"
height="80" width="120" styleName="CardsBoxImage" />
<mx:Label text="{data.getName()}"
styleName="CardsBoxLabel" width="100%" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

I solved the issue by adding creationComplete event handler
for the image in the datagrid column
<mx:Image source="{data.getImage()}" height="80"
width="120" styleName="CardsBoxImage"
creationComplete="event.target.source =
getBitmap(event.target.source)" />

Datefield as Item renderer problem

I am having problems with the datefield while using it in a
renderer. If you click the text area of the datefield to bring up
the datechooser everything works, if you click the datefield icon
the date is not bound properly.
Try out the code below and you will see what I am talking
about. Any idea what im doing wrong?
dateRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="{newDate = data.Date}">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.binding.utils.ChangeWatcher;
import mx.formatters.DateFormatter;
// Define a property for returning the new value to the
cell.
[Bindable]
public var newDate:Date;
private var df:DateFormatter = new DateFormatter();
private function test(event:Event):void {
trace(df.format(dateFieldTI.selectedDate));
newDate= new Date(dateFieldTI.text);
this.dispatchEvent(new
DataGridEvent(DataGridEvent.ITEM_EDIT_END, true, false, 0,
"newDate", -1, null, this));
]]>
</mx:Script>
<mx:DateField id="dateFieldTI"
showToday="false"
selectedDate="{newDate}"
text="{df.format(newDate)}"
click=""
change="test(event)"/>
</mx:VBox>
/////////////////////////////////////////// dateRenderer.mxml
File///////////////////////////////////////////////////////
/////////////////////////////////////////////// Begin
application ///////////////////////////////////////////////////
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
height="700" width="700">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Date: new Date("3/14/2007")},
{Date: new Date("3/14/2007")}]);
[Bindable]
public var displayedDate:String;
private function getDate():void {
displayedDate = initDG[0].Date;
]]>
</mx:Script>
<mx:DataGrid id="myDG"
width="500" height="250"
dataProvider="{initDG}"
variableRowHeight="true"
editable="true">
<mx:columns>
<mx:DataGridColumn dataField="Date"
width="200"
editable="true"
rendererIsEditor="true"
itemRenderer="dateRenderer"
editorDataField="newDate"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="getIt" click="getDate()"/>
<mx:Text text="{displayedDate}"/>
</mx:Application>

Hi Proeliata ,
I am using mx.controls.DateField as itemRenderer in the
DataGridColumn as Below.
<mxataGrid
id="dgDetailsContainer" dataProvider="{alphaGroups}"
variableRowHeight="true"
sortableColumns="true" editable="true" width="100%"
itemEditEnd="editGrid(event)">
<mx:columns>
<mxataGridColumn
headerText="ETA Date" itemRenderer="mx.controls.DateField"
editorDataField="selectedDate"
rendererIsEditor="true"
editable="true" dataField="EtaDate" />
</mx:columns>
</mxataGrid>
While I was submitting the dataGrid values If I try to alert
the EtaDate using the below call
I am getting null value always.
private function submitChanges():void
try{
Alert.show("EtaDate0 is"+alphaGroups[0].EtaDate);
Alert.show("EtaDate1 is"+alphaGroups[1].EtaDate);
commonWebService.submitChanges(alphaGroups);
}catch(err:Error){
Alert.show("Please choose Title and Alpha");
Please help me to re-solve,If any one handled this scenario
please provide me the sample code to update dataProvider.
Back to top
Thanks,
Ravindra

Search UI and KM Property Renderer problem

Hello all,
I've got some problem with Property and property renderer for it. Could anyone help to solve this one?
My property has a list of allowed values, e.g. de,en,ru,es and so on.
The problem is when I integrate my property in the Search UI in order to be able to search by Predefined Properties.
I implemented the interface ISelectionSupported and its method
public boolean isSelectionSupported() {
        return true;
Also I redefined the renderer method renderMetaProperty.
public Component renderMetaProperty(IMetaName metaName, IMetaContext rendererContext)
in order to make the drop-donw-list with allowed values list.
For example, this method
public Component renderMetaProperty(IMetaName metaName, IMetaContext rendererContext) throws WcmException {
IPropertyMap properties = rendererContext.getPropertyMap();
        IProperty currentProperty = null;
        if (properties != null)
            currentProperty = properties.get(new PropertyName(metaName.getNamespace(), metaName.getName()));
        IPropertyRendererProxy pc = rendererContext.getRendererProxy();
        IMetaValue metaValue = null;
        if (currentProperty != null) {
            metaValue = metaName.searchByProperty(currentProperty);
            if (metaValue != null)
                value = metaValue.getValue();
        // Create list values
        DropdownListBox dlb = new DropdownListBox(pc.getUniqueComponentId(metaName, null));
        DefaultListModel lm = new DefaultListModel();
        lm.setSingleSelection(true);
        dlb.setModel(lm);
        // Get allowed property values
        for (IMetaValueListIterator iterator = metaName.allowedValueIterator(rendererContext); iterator.hasNext();) {
            metaValue = iterator.next();
            if (metaValue != null && !"".equals(metaValue.getValue())) {
                loc = new Locale(metaValue.getValue());
                lm.addItem(metaValue.getValue(), loc.getDisplayName());
        dlb.setSelection(value);
        return dlb;
The dropdownlist is dysplayed correctly. But when I press "Search" button the page is refreshed and the value I've just selected in dropdown list is not remained.
I.e. the selected property value is sent on server for searching but after page reloading we get default property value (first value from drop-down-list) and user has to select necessary value over again.
Its needed saving value between page rollbacks. And I think Search component must do it itself and sent this value in my renederer after the page reloading.
But I can't get the selected value in my property renderer, I get null.
Maybe can anyone put some thoughts about this problem?
I'll be very much appreciated for your advices.

Hi Sergei,
As I understood in Properties dialog the property rendering is working.
For rendering in Search dialog, the property renderer has to implement com.sapportals.wcm.control.util.ISelectionSupported interface which has just a method ).
public boolean isSelectionSupported() {
return true;
So easy )
Regards,
Adriana

Item renderer problem

I don't seem to have the correct syntax for adding a check box to a datagrid. Here is what I have:
<cust:MyAdvancedDataGrid
id="dgData"
width="100%" height="85%"
textAlign="center"
fontWeight="normal"
dataProvider="{custVO}"
selectionMode="singleCell"
accessibilityName="Case Composition, DataGrid, use arrow keys to navigate between cells">
<cust:columns>
<mx:AdvancedDataGridColumn
headerText="Select"
rendererIsEditor="true"
width="100">
<mx:itemRenderer>
<fx:Component>
<s:CheckBox selected="false"/>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
This was based on a google search.
What is the correct format?

I had no idea this was such a hard question that no one had done one of these.
Also, if anyone knows why a cut and paste in here produces such a goofy table please let me know.

Datagrid item renderer numberstepper tabIndex

I have a datagrid with a item renderer in it that contains a
numberStepper. There are two columns that have number steppers in
them. If I hit tab when I am in the first number stepper I want it
to tab to the second one. I have tried setting a tabIndex and I
can't get it to tab? Any thoughts?

Here is my Scenario, in my datagrid the second column of the first row (987.93) background color depends upon some condtion. The remaning rows of column B depends upon the column C . If "the column C is OK" it will be green , "NOT OK" red. But the first row's second column color depends upon some other condition. How can i achieve this ?

Datagrid and Inline Item renderer problem

Similar Messages

Maybe you are looking for