Generic item renderer for Adv DG Columns?

Hello,
I'm trying to create a generic ItemRenderer for my Adv DG so that so that I can put a toolTip on the cells.
The Adv DG Column object doesn't have a toolTip property so I'm creating my own renderer...
As far as I'm aware I have to create an ItemRenderer that knows the fieldName that it is rendering so I can use {data.myFieldName}. I was hoping there was a property so that I can reference the value generically such as {data.text} but this obvisouly doesn't work...
Is there anyway around this? Can I pass a paramater to the itemRenderer? I'm doing it like this...
advancedDataGridColumn.itemRenderer = new ClassFactory(renderers.ToolTipFieldRenderer);
Alsok, there is a toolTip property of the AdvDG but the columns, what is the AdvDG.toolTip used for? Just a general toolTip? The reason why I need a toolTip is our client has asked to be able to mouse-over the cell to see the full value where the field value is chopped because it's too long for the column...
Hope that makes sense and hope you can help...
Cheers,
Nick

The AdvancedDataGridColumn class has dataTipField and dataTipFunction
properties and these are supported by the default item renderer
(AdvancedDataGridItemRenderer), which is also generic. Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">
  <mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         private var dpADG:ArrayCollection = new ArrayCollection([
      ]]>
    </mx:Script>
    <mx:AdvancedDataGrid
        height="400"
        width="300"
        sortExpertMode="true"
        dataProvider="">
        <mx:columns>
            <mx:AdvancedDataGridColumn
                dataField="Artist"
                dataTipField="Artist"
                showDataTips="true" />
            <mx:AdvancedDataGridColumn
                dataField="Album"
                dataTipField="Album"
                showDataTips="true" />
            <mx:AdvancedDataGridColumn
                dataField="Price"
                dataTipField="Price"
                showDataTips="true" />  
        </mx:columns>
   </mx:AdvancedDataGrid>      
</mx:Application

Similar Messages

  • Two item renderer for one datagrid column?

    hi
    i have one doubt
    can we use two item renderer for one datagrid column
    any possibilities
    why i am asking this because
    during drag and drop i need one itemrenderer and during application initialization i need another itemrenderer
    any possibilities
    karthik.k

    Hi,
    I think your requirement can be completed by using ViewStack you can pass selected index to it according to requirement.
    See:
    <itemRenederer ...
         <viewstack selectedIndex = 0 ...>
              <vBox id="vBox1" >
                        Your 1st itemrenderer will come here....
              </vBox>
              <vBox id="vBox2" >
                        Your 2nd itemrenderer will come here....
              </vBox>
         </viewStack>
    </itemRenederer>
    You have to just toggle selectedIndex.
    Thanks

  • Item renderer for specific rows

    I need to have a checkbox item renderer for a spark datagrid column. I am using the following to get an item renderer into column:
    var checkBoxRenderer:ClassFactory = new ClassFactory(GridCheckBoxItemRenderer);
    column.itemRenderer = checkBoxRenderer;
    My question is if I need to show a checkbox for specific rows can I do that without going into GridCheckBoxItemRenderer's source code?
    Thanks

    Hi Zolotoj ,
    Please go through following links :
    http://stackoverflow.com/questions/1952940/show-itemrenderer-in-specific-datagrid-rows-oth ers-empty
    http://www.flexer.info/2009/01/09/different-rows-in-datagrid-programmatically-added-itemre nderers-classfactory-and-ifactory/
    It will provide you some idea to how to proceed further for this problem.
    Thanks and Regards,
    Vibhuti Gosavi | [email protected] | www.infocepts.com

  • Item Renderer for DataGrid

    I have a button component as a Item renderer in the column of
    the datagrid .
    I am not able to access the Itemrenderer component(which I
    declared in other mxml file in the datagrid)
    This is the data grid where I have the Itemrenderer:
    <mx:DataGrid id="dgCondition1"
    variableRowHeight="true" width="100%" height="150"
    verticalScrollPolicy="auto" editable="true"
    dataProvider="{initDataGrid_Create}" >
    <mx:columns>
    <mx:DataGridColumn headerText="" dataField="conditi"
    />
    <mx:DataGridColumn headerText="Condition"
    dataField="syntax" width="300" />
    <mx:DataGridColumn headerText="1" dataField="value"
    width="80" editable="false" itemRenderer="buttonRenderer"/>
    <mx:DataGridColumn dataField="value" headerText="2"
    itemRenderer="buttonRenderer" />
    I created a new mxml component for this button component
    .(buttonRenderer.mxml)
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="
    http://www.adobe.com/2006/mxml"
    width="400" height="300">
    <mx:Script source="..TableDataGridBtn.as" />
    <mx:Button id="col1" label="" width="75"
    click="getDetail(event,col1)" />
    </mx:VBox>
    The Problem is I am not able to access the buttonRenderer in
    the datagrid itemRenderer tag .
    It says "Access of Undefined Property buttonRenderer".

    "nash99" <[email protected]> wrote in
    message
    news:g7alc5$nkd$[email protected]..
    > So
    > Is it that I can Use this ItemRenderer tag in the
    Application Tags only
    > Is there any other way I can use them in mxml components
    because I am
    > using
    > the same button in 16 datagrid columns , I dont wan't to
    make the code
    > look
    > redundant.
    http://www.adobe.com/livedocs/flex/3/html/help.html?content=intro_3.html

  • Multi-Use Item Renderer for DataGrid Column

    I have a dataGrid where the first column of the grid displays
    an icon for the 'type' of item in the row. I created a custom
    itemRenderer component which I reference in its own namespace, and
    everything works great. Since this is a pretty common concept, I'd
    thought that I'd be able to re-use that itemRenderer throughout the
    application, but everytime I try to call the itemRenderer in
    another dataGrid, I get 2 errors saying "the inlineComponent could
    not be found" and then because of that "Access of undefined
    property".
    It doesn't make sense for an itemRenderer to be only good for
    one use, so I'm obviously missing some fundamental issue. Can
    someone enlighten me?

    Hah, found it. It is an mxml example, and implements
    IDropInListItemRenderer. It for an image renderer, but you will be
    able to see what to do.
    Tracy
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="
    http://www.adobe.com/2006/mxml"
    horizontalAlign="center" verticalAlign="middle"
    width="16" height="16"
    implements="mx.controls.listClasses.IDropInListItemRenderer"
    >
    <mx:Script><![CDATA[
    import mx.controls.listClasses.IDropInListItemRenderer;
    import mx.controls.listClasses.BaseListData;
    import mx.controls.dataGridClasses.DataGridListData;
    import mx.controls.DataGrid;
    [Bindable]
    private var source:String;
    private var _listData:BaseListData;
    public function get listData():BaseListData
    return _listData;
    public function set listData(value:BaseListData):void
    _listData = value;
    invalidateProperties();
    override protected function commitProperties():void
    super.commitProperties();
    if (_listData is DataGridListData)
    var dgld:DataGridListData = _listData as DataGridListData;
    source =
    data[DataGrid(dgld.owner).columns[dgld.columnIndex].dataField];
    ]]></mx:Script>
    <mx:Image source="{source}"/>
    </mx:VBox>

  • Item Renderer for Advance DataGrid

    On AdvancedDataGrid, can we  display one of the column as Text and when the user clicks on the text it should turns into a combo box.
    When the user clicks on any where else it should turn into text back.
    Please help me to implement this.

    Off the top of my head it's probably something like:
    <mx:DataGrid id="dg1" width="100%" height="100%">
    <mx:columns>
    <mx:DataGridColumn dataField="Example">
    <mx:itemEditor>
    <mx:Component>
    <mx:ComboBox>
    <mx:String>1</mx:String>
    <mx:String>2</mx:String>
    <mx:String>3</mx:String>
    </mx:ComboBox>
    </mx:Component>
    </mx:itemEditor>
    </mx:DataGridColumn>
    </mx:columns>
    </mx:DataGrid>
    edit:
    Just checked, Subeesh's example: http://blog.flexmonkeypatches.com/2008/02/18/simple-datagrid-combobox-as-item-editor-examp le/ has got a very good example on it. Pretty much exactly what you asked

  • How to dispatch custom events from an item renderer used for Datagrid Column

    Hi,
    I am using an Item Renderer for a Data Grid Column and in that mxml, I am dispatching a custom event with data.
    But the main mxml which has the DataGrid is not able to resolve the event. How can I solve this?
    Thanks

    Hi,
    This is the constructor for Event.
    public function Event(type:String, bubbles:Boolean  = false, cancelable:Boolean  = false)
    When you created your custom event after extending from Event, for the parent container receives the event, the bubbles property must be set to true.
    Please check if you have done so. That should solve the problem. Let me know if it doesn't.
    Nishad

  • Using a canvas for item renderer

    I have an array collection of objects. The class has a
    function getDisplayObject which returns a canvas with all of the
    components I need in it. I'd like to use that canvas directly as a
    custom renderer for a combo box. How can I set the returned canvas
    as the item renderer? I've made custom renderers, but not with a
    canvas itself. I think I need to call getDisplayObject inside of
    the item renderer for each object, but am not sure how. Thanks.
    (Below is what I've tried, but this only adds the first one out of
    an array of 5... hmm...)

    Hi Usernnnnnn,
    I know an applciation that's using such kind of tree.
    It's published in the Oracle magazine, may 2006. And is named: Build a menu framework. You can dowload the application:
    http://oracle.com/technology/oramag/oracle/06-may/o36apex.zip
    The menu looks like you have described.
    Leo

  • Spark datagrid item renderer - adjust height

    I am using a textinput as an item renderer for DataGrid:
    <s:GridColumn dataField="Comment" headerText="Comment"
                                                                                      itemRenderer="DataGridRenderer">
    </s:GridColumn>
    // Renderer
    <?xml version="1.0" encoding="utf-8"?>
    <s:GridItemRenderer 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:gridEditorClasses="spark.components.gridEditorClasses.*"
                                              xmlns:ns="library://commons.stoneriver.com"
                                    >
              <fx:Script>
                        <![CDATA[
                                  override public function prepare(hasBeenRecycled:Boolean):void
                                            super.prepare(hasBeenRecycled);
                                            if (data)
                                                      if(data.FormCode == "")
                                                                Comment.text = data[column.dataField];
                                                                Comment.setStyle("backgroundColor", 0xFFFFFF);
                                                      else
                                                                Comment.text = "";
                                                                Comment.setStyle("backgroundColor", 0xB1CCF0);
                        ]]>
              </fx:Script>
              <!--- The renderer's visual component.          -->
              <s:TextInput id="Comment" width="100%" borderVisible="false" fontSize="{column.grid.dataGrid.getStyle('fontSize')}"/>
    </s:GridItemRenderer>
    How can I adjust a height of this renderer to fill the whole cell? Right now it comes out with a smaller height than a row height.
    Thanks

    I actually got word wrapping working with RichEditableText . But now when I specify height=100% all rows have the same extremely large height.

  • Data provider problem in custom item renderer

    I have a complex, custom item renderer for a list. I add
    items that I extracted from an xml to the data provider using the
    IList interface. But when displaying the list, the items are all
    screwed up. Each rendered item has some parts which are initialized
    as different components depending on the values from the xml. This
    initialization is called in the item renderer for the
    creationComplete event.
    The weird thing is that when I output the dataProvider to
    check its values, some of the items have internal uids sometimes
    and sometimes they don't. If I output the dataProvider right after
    I add the items to it, none of them get internal uids. But from the
    initialize method, some of them do and some don't.
    To make things weirder, sometimes, as I scroll up and down
    the list, the dynamic components get all switched up. I'm either
    having a problem with internal uids or with the creation policies
    for lists. Or it's probably some simpler mistake I have yet to see.
    Anyone have any idea where the problem could lie? Any help is
    greatly appreciated.

    Any successful render must:
    1) override the set data property of the component
    Further, best practice is to store any data you need in the
    override set data(), and call invalidateProperties(). Then do the
    actual work in an override commitProperties() function.
    The framework is smart about when to call commitProperties
    efficiently. set data() gets called much more often.
    Tracy

  • Range component in custom item renderer

    Hi,
    I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
    If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
    Thanks.
    Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
    Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
    FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
              at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
              at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
              at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
              at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
              at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
    *** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
              at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
              at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
              at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
              at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
              at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
              at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
              at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
              at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
              at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
              at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

    Hi,
    I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
    If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
    Thanks.
    Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
    Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
    FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
              at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
              at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
              at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
              at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
              at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
    *** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
              at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
              at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
              at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
              at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
              at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
              at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
              at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
              at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
              at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
              at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

  • Drag and Drop in Item Renderer

    I created an item renderer for use in a TileList. This item
    renderer shows a thumbnail, name, and a few buttons. I want to
    enable drag but only for the image. I know it is easy to enable
    drag for Tile List items as a whole, but how do I do that for just
    part of an item, which was rendered using my custom item renderer?
    Thanks for any help!

    Have you tried to turn off drag for TileList and enable it
    only for the thumbnail? It should work.
    ATTA

  • Page Item / Source / Format Mask  -  Table Column Numeric

    Form page to maintain a table row, the item is for a numeric column. Selected/Entered the format mask "999G999G999G999G990D00" for the Page Item / Source. I was under the impression that this would result in the page item being formatted with the mask when navigating out of the item. I can enter non-numeric values and navigate out with no error being raised/reported ... is this expected behaviour?
    Thanks

    APEX was touted at being a MS Access application killer and a RAD tool. If the user is presented with having to understand the complexities of session state variables, page item variables, etc. then a lot of developers/users will be switched off. APEX was supposed to appeal to the masses as the pipes and plumbing coding behind having a web application front end on an Oracle database backend was being hidden. The converse seems to apply when implementing functionality like a format mask being applied both on entry and display of several page items. So I may be able to implement the required format validation using Javascript but if I have to apply this functionality to more than one page item in now way does APEX lend itself to RAD, e.g. In Oracle Forms you could select multiple Block/Items and then change a property to apply to all the selected items.

  • Progress bar - Item renderer

    Hi all,
    I have a item renderer for a list control. Each item contain
    progress bar, which is static, initialized with data from DB.
    For example:
    Item #1 Usage: 74%
    Item #2 Usage: 32%
    etc.
    This is how it looks like:
    <mx:Script>
    <![CDATA[
    private function init_progress_bar():void
    progressBar.setProgress(data.usage, 100);
    ]]>
    </mx:Script>
    <mx:ProgressBar id="progressBar"
    mode="manual"
    labelPlacement="center"
    label="Usage %3%%"
    fontSize="9"
    barColor="haloBlue"
    trackColors="[white, haloSilver]"
    trackHeight="10"
    width="20%"
    initialize="init_progress_bar();"/>
    This is working fine if I use click event instead of
    initialize. But, I need this set up automatically with out any
    clicks or something like that.
    Does anyone see what is problem here?
    Btw. If I use explicit value in init function, that`s working
    fine as well.
    I.e.
    progressBar.setProgress(25, 100); // working
    progressBar.setProgress(data.usage, 100); // doesn`t working
    (only on click event)
    Thnx

    Hi,
    That is because during initialization data property is not
    set. Please try the sample below as item renderer.
    Hope this helps.

  • How to make a item renderer have a custom and rounded corners background

    Hi,
    I'm using custom item renderer for items of list. However,
    there is still one thing I haven't made yet. I can't put a
    background with a custom color and with rounded corners.
    How can I do that?
    It seems that all the options I try don't work.
    Can someone give me a tip here?
    Thanks,
    Nuno

    "sinosoidal" <[email protected]> wrote in
    message
    news:gese3u$63n$[email protected]..
    > Hi,
    >
    > I'm using custom item renderer for items of list.
    However, there is still
    > one
    > thing I haven't made yet. I can't put a background with
    a custom color and
    > with
    > rounded corners.
    >
    > How can I do that?
    >
    > It seems that all the options I try don't work.
    >
    > Can someone give me a tip here?
    Check out my extended TileList:
    http://flexdiary.blogspot.com/2008/08/tilelist-with-stylefunction.html
    You might want to swipe the itemRenderer from this example
    and modify it:
    http://flexdiary.blogspot.com/2008/09/groupingcollection-example-featuring.html

Maybe you are looking for