Button as itemrenderer in datagridcolum

hi there,
i have a datagridcolumn that uses an itemrenderer to place a
button inside the column.
my problem is that when i try and add a simple
click="Alert.show('test')" to the button, i get the error "Access
of undefined property Alert.
however, i do import the alert class further up in the doc.
in fact, even if i create my own function in the file that has the
datagrid and button, it won't recognise it.
this problem is 2 fold... i can't even test if it works
compiled as if i run my apps with any errors in them it does not
refresh the swf and i only sit staring at my old versions and
cannot my changes.
this even happens when, if i have included my as files in my
main template mxml file and then try to call functions in them from
components... i get my errors under "problems" in flex 3 builder.
but i know that once compiled it'll have access to those functions
(or at least i assume it will), but cannot test it because it
doesn't recompile the swf.
anyway, i'd like to know how to either force it to rerender
the swf regardless, or at the very least how to get my button in
the itemrenderer to see the classes that i've imported and the
functions that i create.
thanks a mil',
nikki
here's my code for that specific component:

Item renderers run within their own scope.
Try:
click="outerDocument.Alert.show('test')"
No you can not ever compile a swf with errors. It would do
you no good anyway.
Tracy

Similar Messages

  • How to insert button(or other control) in row of  Datagrid

    Hi Friends,
    i create button with in datagrid but the button it can't display of datagrid ..If i any mistake the below coding please any one help to me..
    coding Is:
    <mx:DataGrid id="grd1"  x="41" y="203" width="159">
    <mx:columns>
       <mx:DataGridColumn headerText="Button" >
        <mx:itemRenderer>
         <fx:Component>
          <mx:HBox>
             <s:Button name="OK"  id="btn_ok"/>
          </mx:HBox>
         </fx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Cancel button" >
        <mx:itemRenderer>
         <fx:Component>
          <mx:HBox>
             <s:Button name="Cancel"  id="btn_cancel"/>
          </mx:HBox>
         </fx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:columns>
    </mx:DataGrid>
    Thanks,
    Magesh R.

    There are few mistakes in your code. The one with red color are mistakes.
    <mx:DataGrid id="grd1"  x="41" y="203" width="159">
    <mx:columns>
       <mx:DataGridColumn headerText="Button" >
        <mx:itemRenderer>
         <fx:Component>
          <mx:HBox>
             <s:Button name="OK"  id="btn_ok"/>
          </mx:HBox>
         </fx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn headerText="Cancel button" >
        <mx:itemRenderer>
         <fx:Component>
          <mx:HBox>
             <s:Button name="Cancel"  id="btn_cancel"/>
          </mx:HBox>
         </fx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:columns>
    </mx:DataGrid>
    instead of fx type mx. even for s:button use mx:button
    you should have a closing tag fro columns </mx:columns>
    you sould not use name property for button unless it is your custome property. use label instead of name.
    I am sending you sample MXML code as attachment after correcting your code. Just go through it. try to execute.

  • Advice: Best way to do this?

    I have a data grid with some basic user data in it and the last column contains a checkbox as item renderer.
    Let's say there are 10 rows, and I deselect the checkbox for each row. At that point I need to disable a certain button.
    What is the best practice method for this?
    Also, the data sets that I will be populating the grid with, via PHP/XML can return thousands of rows. What is a safe number of rows for the data grid, so I can set some pagination method?
    Thanks for any help.

    Here's a little example, I used a button as ItemRenderer but you can use whatever you want.
    You added a listener for the itemEditEnd event but that don't get fired if you click on an object in your itemRenderer.
    Make sure your event bubbles, as the previous post mentioned:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
        <mx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
                [Bindable]
                private var dp:ArrayCollection;
                private function init():void
                    var arr:Array = ["one", "two", "three"];
                    dp = new ArrayCollection();
                    dp.source = arr;
                    dg.addEventListener("myEvent", handleDGClick);
                private function handleDGClick(evt:Event):void
                    output.text = "Clicked!";
            ]]>
        </mx:Script>
        <mx:DataGrid id="dg" x="10" y="10" dataProvider="{dp}" variableRowHeight="true">
            <mx:columns>
                <mx:DataGridColumn headerText="Column 1">
                    <mx:itemRenderer>
                        <mx:Component>
                                <mx:Button label="Click me" click="dispatchEvent(new Event('myEvent', true))"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="Column 2" dataField="data"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:Label id="output"/>
    </mx:Application>

  • Onclick for the itemrenderer button control

    Hi,
    I have a XML as the datasource. Here is the portion of my
    XML
    &lt;action1&gt;
    &lt;action2&gt;
    &lt;action_number&gt;1&lt;/action_number&gt;
    &lt;action_description&gt;Action
    Desc&lt;/action_description&gt;
    &lt;action_column column_number=&quot;1&quot;
    column_value=&quot;1&quot; /&gt;
    &lt;action_column column_number=&quot;2&quot;
    column_value=&quot;2&quot; /&gt;
    &lt;action_column column_number=&quot;3&quot;
    column_value=&quot;3&quot; /&gt;
    &lt;/action2&gt;
    &lt;action2&gt;
    Here is my Label function for accessing the attributes of the
    action_column
    public function LabelFunc(item:Object,
    column:DataGridColumn): String
    return
    item.action_column.(@column_number==column.dataField).@column_value;
    Now I changed the datagrid column to display the content in
    the column in a button using
    &lt;mx:DataGridColumn dataField=&quot;4&quot;
    labelFunction=&quot;LabelFuncAction&quot;
    itemRenderer=&quot;mx.controls.Button&quot;/&gt;
    How do I use the click event for the button to toggle b/w yes
    and no?

    Do you mean it's firing when you click Edit?. I've replicated your code as below and it worked, try to remove the OnRowCommand run a build and then add the it again:
    protected void Page_Load(object sender, EventArgs e)
    BindGridwithDummy();
    protected void GridMainCat_RowCommand(object sender, GridViewCommandEventArgs e)
    string catID = e.CommandArgument.ToString();
    if (e.CommandName == "Edt" && e.CommandArgument != null)
    if (e.CommandName == "Dlt")
    private void BindGridwithDummy()
    DataTable dt = new DataTable();
    DataRow dr;
    dt.Columns.Add(new System.Data.DataColumn("Test", typeof(String)));
    dr = dt.NewRow();
    dr[0] = "A dummy Data"; //Adds the Dummy Data in the Row
    dt.Rows.Add(dr);
    // Show the DataTable values in the GridView
    GridView1.DataSource = dt;
    GridView1.DataBind();
    <asp:GridView ID="GridView1" runat="server" OnRowCommand="GridMainCat_RowCommand">
    <Columns>
    <asp:BoundField DataField="Test" />
    <asp:TemplateField>
    <HeaderTemplate>
    Button</HeaderTemplate>
    <ItemTemplate>
    <asp:LinkButton Style="padding: 4px;" ID="lnkDel" CommandName="Dlt" runat="server"
    CausesValidation="false" Text="Delete" CommandArgument="1" OnClientClick="javascript:return('Are you sure, do you want to delete Record??')"></asp:LinkButton><br />
    <asp:LinkButton ID="lnkEdit" runat="server" Text="Edit" CausesValidation="false"
    CommandName="Edt" CommandArgument="2" Style="padding: 4px;"></asp:LinkButton>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>

  • Flex 4.1 Best way to make button in Custom ItemRenderer to call function in parent

    When I push the button in the ItemRenderer I would like to call a function that is in the parent that contains the List with the ItemRenderer. Also that function should be able to get the data of that ItemRenderer.
    So at the moment I see only as a solution a custom event with the data of the ItemRenderer.
    Is it possible if for example I set a MouseEvent listener on the list and detect if that button is clicked on to call that function - I managed to do that so far as you probably figured, but now I can't get in which item was that button so I can get it's data. Going parent parent parent of that button to reach the renderer to get it's data seems kinda not the best solution.
    Any ideas ?

    Another Approach would be to pass the parent application as parameter to the item.
    ItemRenderer:
    <?xml version="1.0" encoding="utf-8"?>
    <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx"
                        autoDrawBackground="true">
         <fx:Script>
              <![CDATA[
                   [Bindable] public var _parent:ParentCall;  // or just _parent:*
              ]]>
         </fx:Script>
         <s:Label text="{data}"/>
         <s:Button x="117" y="1" label="Trigger Parent Function" click="{_parent.doit()}"/>
    </s:ItemRenderer>
    mainApplication:
    <?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" minWidth="955" minHeight="600"
                      creationComplete="application1_creationCompleteHandler(event)"
                      >
         <fx:Script>
              <![CDATA[
                   import mx.controls.Alert;
                   import mx.events.FlexEvent;
                   [Bindable] private var itemRendererFactory:ClassFactory;
                   protected function application1_creationCompleteHandler(event:FlexEvent):void
                        itemRendererFactory = new ClassFactory(mytem);
                        itemRendererFactory.properties = { _parent:this};
                        list.itemRenderer = itemRendererFactory;
                   public function doit():void
                        Alert.show('yeah!');
              ]]>
         </fx:Script>
         <s:List id='list'  >
              <s:dataProvider>
              <s:ArrayCollection>
                   <fx:String>item 1</fx:String>
                   <fx:String>item 1</fx:String>
              </s:ArrayCollection>
              </s:dataProvider>
         </s:List>
    </s:Application>

  • Missing text in itemrenderer button.

    I've upgraded from Flex2 to Flex3, and while it's working
    much better for me overall I still have one problem that I can't
    figure out.
    In some of my datagrids, I have a column that displays a
    button (the button is used for removing it's row from the
    dataprovider), however in Flex3 the text that's supposed to show up
    on the button does not appear (it's just an X, but it will be
    confusing for people who use the program to not have it show up.)
    Anyone know where I missed something here?

    Per the docs, the default paddingLeft for a button is 10, so
    maybe your "X" is just pushed off to the right.
    Set the paddingLeft, and right, for that matter = 0
    Tracy

  • Using a custom itemrenderer in datagrid to update value in the same row but different column/cell

    Here's what I have so far.  I have one datagrid (dg1) with enable drag and another datagrid (dg2) with dropenabled.  Column3 (col3) of dg2 also has a custom intemrenderer that's just a hslider.
    When an item from dg1 is dropped on dg2, a custom popup appears that asks you to use the slider in the popup to set a stress level.  Click ok and dg2 is populated with dg1's item as well as the value you selected from the popup window.  I was also setting a sliderTemp variable that was bound to the itemrender slider to set it but that's obviously causing issues as well where all the itemrenderer sliders will change to the latest value and I don't want that.
    What is needed from this setup is when you click ok from the popup window, the value you choose from the slider goes into dg2 (that's working) AND the intemrenderer slider needs to be set to that value as well.  Then, if you used the intemrenderer slider you can change the numeric value in the adjacent column (col2).   I just dont know how to hook up the itemrenderer slider to correspond with that numeric value (thatds be in col2 on that row);
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                        xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*" backgroundColor="#FFFFFF" creationComplete="init(event)"
                        xmlns:components="components.*" xmlns:local="*">
         <mx:Script>
              <![CDATA[
                   import mx.binding.utils.ChangeWatcher;
                   import mx.collections.ArrayCollection;
                   import mx.controls.Alert;
                   import mx.controls.TextInput;
                   import mx.core.DragSource;
                   import mx.core.IUIComponent;
                   import mx.events.CloseEvent;
                   import mx.events.DataGridEvent;
                   import mx.events.DragEvent;
                   import mx.events.FlexEvent;
                   import mx.events.ListEvent;
                   import mx.events.SliderEvent;
                   import mx.events.SliderEventClickTarget;
                   import mx.managers.DragManager;
                   import mx.managers.PopUpManager;
                   import mx.utils.ObjectUtil;
                   [Bindable]private var myDP1:ArrayCollection;
                   [Bindable]private var myDP2:ArrayCollection;
                   [Bindable]public var temp:String;
                   [Bindable]public var slideTemp:Number;
                   private var win:Dialog;     
                   protected function init(event:FlexEvent):void{
                        myDP1 = new ArrayCollection([{col1:'Separation from friends and family due to deployment'},{col1:'Combat'},{col1:'Divorce'},{col1:'Marriage'},
                             {col1:'Loss of job'},{col1:'Death of a comrade'},{col1:'Retirement'},{col1:'Pregnancey'},
                             {col1:'Becoming a parent'},{col1:'Injury from an attack'},{col1:'Death of a loved one'},{col1:'Marital separation'},
                             {col1:'Unwanted sexual experience'},{col1:'Other personal injury or illness'}])
                        myDP2 = new ArrayCollection()
                   protected function button1_clickHandler(event:MouseEvent):void
                        event.preventDefault();
                        if(txt.text != "")
                             Alert.yesLabel = "ok";                    
                             Alert.show("", "Enter Stress Level", 3, this,txtClickHandler);
                   private function image_dragEnter(evt:DragEvent):void {
                        var obj:IUIComponent = IUIComponent(evt.currentTarget);
                        DragManager.acceptDragDrop(obj);
                   private function image_dragDrop(evt:DragEvent):void {
                        var item:Object = dg2.selectedItem;                    
                        var idx:int = myDP2.getItemIndex(item);
                        myDP2.removeItemAt(idx);
                   protected function dg1_changeHandler(event:ListEvent):void
                        temp=event.itemRenderer.data.col1;     
                   protected function dg2_dragDropHandler(event:DragEvent):void
                        event.preventDefault();                         
                        dg2.hideDropFeedback(event as DragEvent)
                        var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                        win.btn.addEventListener(MouseEvent.CLICK, addIt);
                        PopUpManager.centerPopUp(win);                              
                        win.mySlide.addEventListener(Event.CHANGE, slideIt);
                   private function txtClickHandler(event:CloseEvent):void {
                        trace("alert");
                        if (event.detail==Alert.YES){
                             myDP2.addItem({label:temp});
                   private function addIt(event:MouseEvent):void{                    
                        myDP2.addItem({col1:temp, col2:slideTemp})
                   private function slideIt(event:SliderEvent):void{                    
                        slideTemp = event.target.value;               
              ]]>
         </mx:Script>
                   <mx:Panel x="10" y="10" width="906" height="481" layout="absolute">
                        <mx:Image x="812" y="367" source="assets/woofie.png" width="64" height="64" dragDrop="image_dragDrop(event);" dragEnter="image_dragEnter(event);"/>
                        <mx:DataGrid x="14" y="81" width="307" height="251" dragEnabled="true" id="dg1" dataProvider="{myDP1}" wordWrap="true" variableRowHeight="true" change="dg1_changeHandler(event)">
                             <mx:columns>
                                  <mx:DataGridColumn headerText="Examples of Life Events" dataField="col1"/>
                             </mx:columns>
                        </mx:DataGrid>
                        <mx:DataGrid x="329" y="81" height="351" width="475" dragEnabled="true" dropEnabled="true" id="dg2"
                                        wordWrap="true" variableRowHeight="true" dataProvider="{myDP2}" editable="true"
                                        dragDrop="dg2_dragDropHandler(event)"  rowHeight="50" verticalGridLines="false" horizontalGridLines="true" >
                             <mx:columns>
                                  <mx:DataGridColumn headerText="Stressor" dataField="col1" width="300" wordWrap="true" editable="false">
                                  </mx:DataGridColumn>
                                  <mx:DataGridColumn headerText="Stress Level" dataField="col2" width="82" editable="false"/>
                                  <mx:DataGridColumn headerText="Indicator" dataField="col3" width="175" paddingLeft="0" paddingRight="0" wordWrap="true" editable="false">
                                       <mx:itemRenderer>
                                            <mx:Component>
                                                 <components:Compslide/>
                                            </mx:Component>
                                       </mx:itemRenderer>
                                  </mx:DataGridColumn>
                             </mx:columns>
                        </mx:DataGrid>                    
                        <mx:Text x="14" y="10" text="The first category of underlying stressors is called Life Events. The list includes both positive and negative changes that individuals experience. Both can be stressful. For example, becoming a parent is usually viewed as a positive thing, but it also involves many new responsibilities that can cause stress. " width="581" height="73" fontSize="12"/>
                        <mx:TextInput x="10" y="380" width="311" id="txt"/>
                        <mx:Text x="10" y="335" text="Add events to your list that are not represented in the example list.  Type and click &quot;Add to List&quot;&#xa;" width="311" height="51" fontSize="12"/>
                        <mx:Button x="234" y="410" label="Add to List" click="button1_clickHandler(event)"/>
                   </mx:Panel>     
    </mx:Application>

    how do i go about doing that?  do i put a change event function in the itemrenderer?  and how would i eventually reference data.col2?

  • Link button in data grid

    hi
    Can anyone tell me why the click action is not working when
    the link button is placed in datagrid.
    <mx:DataGridColumn dataField="edit" headerText="">
    <mx:itemRenderer>
    <mx:Component>
    <mx:LinkButton label="edit" click = "click1();">
    </mx:LinkButton>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    even if button is placed in the datagrid it is not working.

    When you use the <mx:Component> tag you create a new
    scope. Its as if all of the content of the <mx:Component>
    were in another file. If you used a separate file for your renderer
    you wouldn't expect click() function to be recognized, right?
    You can modify your renderer like this to make it work:
    <mx:LinkButton label="edit" click =
    "outerDocument.click1();">
    Another option is to take advantage of the bubbling feature
    of the click event. Instead of putting the click handler on the
    LinkButton, put it on the DataGrid itself. Any click on the
    DataGrid will then trigger the event handler.
    The drawback to that is that EVERY click will call the event
    handler - either the LinkButton's click on a click on the header.
    Your event handler just has to examine the event data to determine
    what control originated the event.
    In this case, using outerDocument.click() is far easier, but
    you might need the bubbling property of the event at some point in
    the future.

  • Radio Button binding to XML

    Based on the examples
    here
    and
    here
    I have a datagrid which uses an XML object as its dataprovider. The
    xml goes like this:
    <questions>
    <question>
    <prompt>What are your heroes?</prompt>
    <answers>
    <answer>
    <correct>true</correct>
    <text>Luther Higgs</text>
    </answer>
    <answer>
    <correct>false</correct>
    <text>Barney Fife</text>
    </answer>
    </answers>
    </question>
    </questions>
    Well formed (if a bit confusing) xml. In my datagrid I have
    two columns. The second column binds to
    questions.question.answers.answer.text and works just fine. The
    datagrid's editable property is set to true, and I'm able to click
    on the second colum and type and it saves the answer back into the
    xml object just fine. The problem lies in my first column. The mxml
    looks like this:
    <mx:DataGridColumn headerText="Correct">
    <mx:itemRenderer>
    <mx:Component>
    <mx:VBox horizontalAlign="center">
    <mx:RadioButton id="myRadioButton"
    buttonMode="true" useHandCursor="true"
    group="{outerDocument.myRadioButtonGroup}"
    selected="{data.correct}"/>
    </mx:VBox>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    The problem is that the radio buttons' selected properties
    aren't bound to the xml, that is the one that is true doesn't
    display as selected. If I set the datagridcolumn's editable
    property to false, clicking on the radio button doesn't affect the
    xml at all either. If I leave the editable property of the
    datagridcolumn as the inherited default of true (based on the
    parent datagrid's editable property) when I click on the radio
    button the default itemEditor appears (a text input box) which
    contains the following text:
    </answer>
    and when I leave the editor (click outside or hit enter) the
    xml then looks like this:
    <answers>
    <answer>
    <correct>true</correct>
    <text>Luther Higgs</text>
    </answer>
    <answer>
    <correct>false</correct>
    <text>Barney Fife</text>
    <null>&lt;answer&gt;
    &lt;correct&gt;false&lt;/correct&gt;
    &lt;text&gt;Barney Fife&lt;/text&gt;
    &lt;/answer&gt;</null>
    </answer>
    </answers>
    I have seen controls that don't have the xml path written
    correctly display the entire xml node rather than just the
    contained data, but I can think of no reason anything should Ever
    reference just the closing tag. To me this looks like a bug in the
    data bindings between the radio button and the xml object.
    Just to clear the air to avoid suggestions that will work but
    not meet the design requirements, what I need is a datagrid that
    has a radio button group (only one correct answer out of the group)
    in the first column and strings in the second column which need to
    be editable. I suppose I could write some hairy event listener code
    and manually hack things together, but aside from avoiding that
    headache, I'd love to use data bindings for what they were intended
    for - I just need to know why it doesn't appear to be working
    right. Much thanks in advance for any and all help.

    Searching the LiveDocs revealed the answer. Under the topic
    "Using an E4X expression in an <mx:Binding> tag" I found that
    if instead of
    <mx:RadioButton id="myRadioButton"
    buttonMode="true" useHandCursor="true"
    group="{outerDocument.myRadioButtonGroup}"
    selected="{data.correct}"/>
    I have
    <mx:RadioButton id="myRadioButton"
    buttonMode="true" useHandCursor="true"
    group="{outerDocument.myRadioButtonGroup}"/>
    <mx:Binding source="myRadioButton.selected"
    destination="data.correct" />
    It works just perfectly.
    Apparently binding between XML and the selected property of a
    radio button (which is of type boolean) needs the <mx:Binding
    /> rather than the in-tag curly brace notation.
    P.S. The link on livedocs is here:
    http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=databinding_091_05.html#177459

  • Problem in accessing the itemRenderer dynamically

    Hi,
         In my application i am using two AdvanceddataGrids. i am showing one datagrid at a time based on the user selection. I have provided the buttons to switch between the grids. These two datagrids are getting the data from XML. By default the data will be available for the first datagrid in XML. Once the user selects the second grid, i am using the HTTPService to fetch the data for that particular grid. (This HTTPService will pass this grid's id as QueryString to the same XML page, and the .Net will read these parameters to fetch the required data from the DB and will print the data in the XML format in the same page).
         Here, for the first datagrid, i have used the itemRenderer to show some images (in the datagrid) based on the data available in XML. And i have followed the same for the second grid also.
         But the probelm is, whenever the application starts runnning (on Creation complete of the application), i am not able to view the images for the first datagrid, since the data for the second datagrid is not available (i have defined the itemRenderer for the second dataGrid based on XML data).
         I have stored the itemRenderers for each datagrid as a separate component. Is there any way to add this itemRenderer component during the run time. (While the user clicks the button to view the second datagrid)?
         "(Second datagrid's) coloumnid.itemRenderer = mycomponent.mxml"  (I have tried this code to access during selection of second datagrid. But it didn't work).
         Could someone help me on this?

    When you say:
    But the probelm is, whenever the application starts runnning (on Creation complete of the application), i am not able to view the images for the first datagrid, since the data for the second datagrid is not available (i have defined the itemRenderer for the second dataGrid based on XML data).
    I don't understand. Why would the images in the first datagrid not be availabe because the data for the second grid is not available?
    If certain data needs to be loaded for creationComplete, then ensure it is loaded.
    Perhaps you can clarify these points as your scenario is not clear.

  • Problem overloading "set data" function on Button DataGrid Renderer

    Hi all, I'm hoping this is something simple.
    I have a class that extends mx.controls.Button and implements mx.core.IDataRenderer.  I need to set the button icon whenever the Data property is set from the DataGrid.  My problem is that my overloaded set/get Data function are never called (I've stepped through the code in debug).  Instead the set/get functions in Container.as (Flex 3.4 SDK) get called.
    Here's the basics code:
    exportButtonRenderer.as
    package controls
        import flash.events.Event;
        import flash.events.MouseEvent;
        import mx.controls.Button;   
        import mx.core.IDataRenderer;
        import mx.controls.dataGridClasses.DataGridListData;   
        import mx.controls.listClasses.BaseListData;
        import mx.events.FlexEvent;
        import mx.controls.Alert;
        import model.descriptors.compDescriptor;
        import events.exportClickedEvent;   
        public class exportButtonRenderer extends Button implements IDataRenderer   
            //    embed your icons
            [Embed(source='/assets/icons/export.png')]
            [Bindable]
            public static var imageExport:Class;
            [Embed(source='/assets/icons/blank.png')]
            [Bindable]
            public static var imageBlank:Class;
            public function exportButtonRenderer()
                super();
            private var _listData:DataGridListData;
            override public function get listData():BaseListData
                return _listData;
            override public function set listData(value:BaseListData):void
                _listData = DataGridListData(value);
            private var _data:Object;       
            override public function get data():Object
                return _data;
            override public function set data(value:Object):void
                _data = value;
            override protected function clickHandler(event:MouseEvent):void
                super.clickHandler(event);   
    Now I know I'm using the Flexlib TreeGrid and not a standard DataGrid but when I trace through all the code all code firing the set/get functions is coming from the DataGrid anyway.
    Here's the my Grid def in my main app mxml:
    Header 1
    <flexlib:TreeGrid
            id="MKTXGrid"
            dragEnabled="false" sortableColumns="false" showRoot="false"
            disclosureClosedIcon="@Embed(source='/assets/icons/arrow_right.png')"
            disclosureOpenIcon="@Embed(source='/assets/icons/arrow_down.png')"
            folderOpenIcon="@Embed(source='/assets/icons/psd.png')"
            folderClosedIcon="@Embed(source='/assets/icons/psd.png')"       
            click="MKTXGrid_clickHandler(event)"
             doubleClickEnabled="true" doubleClick="MKTXGrid_doubleClickHandler(event)" left="0" right="0" top="0" bottom="16">
        <flexlib:columns>
                <flexlib:TreeGridColumn dataField="Name" headerText = "Name" minWidth="200" width="200" editable="true"/>
                <mx:DataGridColumn dataField="ExportName" headerText = "Export Name"/>
                <mx:DataGridColumn dataField="Export" headerText = "Export" width="50" minWidth="20" resizable="false">
                 <mx:itemRenderer>
                    <mx:Component>
                        <mx:Box horizontalAlign="center" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                            <controls:exportButtonRenderer label="Export" icon="@Embed(source='assets/icons/export.png')" width="12" height="12" useHandCursor="true">                        
                                <controls:click>
                                    <![CDATA[
                                        import events.exportClickedEvent;
                                        var e:exportClickedEvent = new exportClickedEvent();
                                        e.itemData = data;
                                        dispatchEvent(e);
                                    ]]>
                                </controls:click>
                            </controls:exportButtonRenderer>
                        </mx:Box>
                    </mx:Component>
                </mx:itemRenderer>
                </mx:DataGridColumn>
            </flexlib:columns>
        </flexlib:TreeGrid>
    Nothing too special going on.
    I know this can be done, I've seen examples in the SDK:
    http://opensource.adobe.com/svn/opensource/durango/trunk/ExternalFlexTools/com/dougmccune/ containers/accordionClasses/AccordionHeader.as
    By the way I've stepped through the code of the TreeGridItemRenderer class in Flexlib which works correctly and the class def starts like this:
    TreeGridItemRenderer.as
    import flash.display.DisplayObject;
    import flash.display.InteractiveObject;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flexlib.controls.TreeGrid;
    import mx.controls.Image;
    import mx.controls.dataGridClasses.DataGridListData;
    import mx.controls.listClasses.BaseListData;
    import mx.controls.listClasses.IDropInListItemRenderer;
    import mx.controls.listClasses.IListItemRenderer;
    import mx.core.IDataRenderer;
    import mx.core.IFlexDisplayObject;
    import mx.core.IToolTip;
    import mx.core.SpriteAsset;
    import mx.core.UIComponent;
    import mx.core.UITextField;
    import mx.events.FlexEvent;
    import mx.events.ToolTipEvent;
    import mx.events.TreeEvent;
    import mx.managers.ILayoutManagerClient;
    import mx.styles.IStyleClient;
    public class TreeGridItemRenderer extends UIComponent
                                      implements IDataRenderer,
                                                   IDropInListItemRenderer,
                                                 ILayoutManagerClient,
                                                   IListItemRenderer
    Any help would be great!

    That's because you put your component in a Box.  The DataGrid is setting the Box's .data property and no code is setting the one on your component.  You shouldn't really need Box.  You can override updateDisplayList to center your Button instead.
    Alex Harui
    Flex SDK Developer
    Adobe Systems Inc.
    Blog: http://blogs.adobe.com/aharui

  • Problem with getting specific canvas's to display within a viewstack based on button's clicked within a tilelist

    In a new application I'm creating I've managed to set it up so that a user can add up to 5 'user profile buttons' by clicking an 'add item' button and remove each one by clicking an 'remove item' when they are selected.
    That part works fine, however once each button is clicked it should bring up a specific canvas view within the viewstack relevant to that particular button i.e. when a user clicks the 'New Profile 1' button the 'New Profile 1' Canvas view should then be displayed in the viewstack, when they click 'New Profile 2' it should display 'New Profile 2' canvas in the viewstack etc but I am having trouble linking each specific button to 1 specific Viewstack canvas.
    The problem is if, for example, I click the 'New Profile 2' button the 'New Profile 2' canvas IS displayed in the viewstack however if I then delete the selected 'New Profile 2' button the 'New Profile 3' button slides left into it's place but now clicking on New Profile 3 brings up the new profile 2 canvas whereas it should actually bring up the new profile 3 canvas at all times.
    Eventually these canvas's will be personal areas for specific users so it is important that each button in the tilelist links to that specific user but it is also important that a user can add/delete each button at all times.
    I've already had the first part of this problem (which was linking the tilelist to the viewstack) more or less answered but I clicked Correct answer rather than helpful answer in my previous thread. My mistake, sorry. Is ther a better way to do this application. Heres my code so far:-
    <?xml version="1.0" encoding="utf-8"?>
     <mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#545351, #E3DFDF]">
    <mx:Script>
    <![CDATA[
    import mx.managers.*; 
    private var _dragManager:DragManager; 
    private var _historyManager:HistoryManager; 
    private var _popupManager:PopUpManager; 
    import flash.net.navigateToURL; 
    import flash.net.URLRequest; 
    import flash.net.URLVariables;  
    import mx.events.ListEvent;  
    import mx.controls.Button; 
    import mx.collections.*; 
    import mx.controls.Alert;]]>
    </mx:Script>
    <mx:Script>
    <![CDATA[
    import mx.effects.easing.Elastic; 
    import mx.collections.ArrayCollection; 
    Bindable] 
    private var myDP:ArrayCollection = new ArrayCollection();
    private var dpArr:Array = [{label:"New Profile 1", data:View1},{label:"New Profile 2", data:View2}, {label:"New Profile 3", data:View3},{label:"New Profile 4", data:View4}, {label:"New Profile 5", data:View5}]; 
    private var addedIndices:ArrayCollection = new ArrayCollection(); 
    private function deleteItem():void { 
    if(myDP.length > 0){ 
    for each(var i:int in tlist0.selectedIndices)myDP.removeItemAt(i);
    private function addItem():void { 
    if(myDP.length < dpArr.length && addedIndices.length < dpArr.length){ 
    for(var a:uint = 0; a < dpArr.length; a++){ 
    if(!addedIndices.contains(a) && !myDP.contains(dpArr[a])){myDP.addItemAt(dpArr[a],myDP.length);
    break;}
    private function tileList_itemClick(event:ListEvent):void { 
    private function showAlert(event:ListEvent):void{ Alert.show(
    "You clicked button #"+event.currentTarget.selectedItem.data);}
    ]]>
    </mx:Script>
    <mx:Sequence id="itemsChangeEffect1">
    <mx:Blur blurYTo="12" blurXTo="12" duration="300" perElementOffset="150" filter="removeItem"/>
    <mx:Parallel>
    <mx:Move duration="750" easingFunction="{Elastic.easeOut}" perElementOffset="20"/>
    <mx:RemoveItemAction startDelay="400" filter="removeItem"/>
    <mx:AddItemAction startDelay="400" filter="addItem"/>
    <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/>
    </mx:Parallel>
    </mx:Sequence>
    <mx:Canvas width="1168" height="716" backgroundColor="#0219FB" horizontalCenter="0" verticalCenter="0" borderColor="#000000" borderStyle="solid" borderThickness="1" cornerRadius="20" backgroundAlpha="0.8">
    <mx:Canvas id="UserArea" left="10" x="0" y="49" width="670" height="594" backgroundColor="#000000" cornerRadius="20" borderStyle="solid">
    <mx:TileList id="tlist0" itemClick="myViewStack.selectedIndex=tlist0.selectedIndex" itemRenderer="mx.controls.Button" top="10" left="10" right="10" color="#FFFFFF" height="50" width="100%" fontSize="12" fontStyle="bold" columnCount="5" rowCount="2" direction="horizontal" dataProvider="{myDP}" itemsChangeEffect="{itemsChangeEffect1}" backgroundColor="#000000" fontWeight="bold" borderStyle="none"/>
    <mx:Canvas x="63" y="129" width="200" height="200" fontSize="36" borderColor="#FFFFFF" id="Canvas1" visible="false">
    <mx:Label x="27" y="25" text="Profile 1"/>
    </mx:Canvas>
    <mx:ViewStack x="115" y="88" id="myViewStack" width="382" height="317" backgroundColor="#F90C0C">
    <mx:Canvas id="View1" label="View 1" width="100%" height="100%" backgroundColor="#0FDDE5">
    <mx:Label x="10" y="10" text="NEW PROFILE 1" fontWeight="bold" fontSize="15"/>
    </mx:Canvas>
    <mx:Canvas id="View2" label="View 2" width="100%" height="100%" backgroundColor="#A90BCB">
    <mx:Label x="10" y="10" text="NEW PROFILE 2" fontWeight="bold" fontSize="15"/>
    </mx:Canvas>
    <mx:Canvas id="View3" label="View 3" width="100%" height="100%" backgroundColor="#E6E413">
    <mx:Label x="10" y="10" text="NEW PROFILE 3" fontWeight="bold" fontSize="15"/>
    </mx:Canvas>
    <mx:Canvas id="View4" label="View 4" width="100%" height="100%" backgroundColor="#F4A40A">
    <mx:Label x="10" y="10" text="NEW PROFILE 4" fontWeight="bold" fontSize="15"/>
    </mx:Canvas>
    <mx:Canvas id="View5" label="View 5" width="100%" height="100%" backgroundColor="#0D1DFA">
    <mx:Label x="10" y="10" text="NEW PROFILE 5" fontWeight="bold" fontSize="15" color="#FFFFFF"/>
    </mx:Canvas>
    </mx:ViewStack>
    </mx:Canvas>
    <mx:Button label="Remove item" click="deleteItem();" color="0x323232" x="96" y="10"/>
    <mx:Button label="Add item" click="addItem();" color="0x323232" x="10" y="10"/>
    </mx:Canvas>
     </mx:Application>

    Hi
    Try this if it works..
    1. In MultiProvider identify those key figure from both the InfoProvider ( DSOs)
    2. In BEx create KF1 . Restrict with 0INFOPROV = DSO1 ( Billing) , hide it
    3. Create KF2 . Restrict with 0INFOPROV = Cube ( condition cube) , hide it
    3. Create a Fomula Key Figure 3 with the definition
    KF3 =  KF1 + KF2* ( KF1==0)
    If KF1 is zero, then KF1 == 0  will be true and it will return value 1.  So, basically you would get
    KF3 = 0 + KF2 *1 = KF2
    When KF1 is non-zero, expression KF1== 0 will be false and gives a value 0. Let;s say KF1 =5 , then
    KF3 = 5 + KF2 * 0 = 5
    Now show KF3 in the report
    Regards
    Anindya

  • Items in Tree control move around when data is submitted using custom ItemRenderer

    I'm working on a Tree control with an XMLListCollection as
    its dataProvider.
    The dataProvider has information looking like this :
    quote:
    <?xml version='1.0' encoding='utf-8'?>
    <INFO>
    <FIELD label="STR_USER_NAME"
    type="text"
    value=""
    >
    </FIELD>
    <FIELD label="STR_USER_EMAIL"
    type="text"
    value=""
    >
    </FIELD>
    <FIELD label="STR_OPTIONAL"
    type="branch"
    value="0"
    >
    <FIELD label="STR_USER_ADDRESS"
    type="text"
    value=""
    >
    </FIELD>
    <FIELD label="STR_USER_POSTAL_CODE"
    type="text"
    value=""
    >
    </FIELD>
    </FIELD>
    </INFO>
    So in the Tree control I'd like the information to show up
    with a label and
    an
    editable textbox for each item :
    [Label] [textbox]
    To do this I made a tree like this :
    quote:
    <mx:Tree id="userTree"
    editable="true"
    rendererIsEditor="true"
    editorDataField="curVal"
    itemRenderer="{new ClassFactory(ItemRendererUser)}"
    itemEditEnd="e_ProcessData(event);"
    dataDescriptor="{new DataDescriptorUsers()}"
    showRoot="false"
    verticalScrollPolicy="{ScrollPolicy.AUTO}"
    />
    where the e_ProcessData() function looks like this (I used
    http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/js/html/wwhelp.htm?href=c
    elleditor_073_16.html#202105 as a guide) :
    quote:
    public function e_ProcessData(event:ListEvent):void
    event.preventDefault();
    userTree.editedItemRenderer.data.@value =
    ItemRendererUsers(event.currentTarget.itemEditorInstance).curVal;
    userTree.destroyItemEditor();
    userTree.dataProvider.notifyItemUpdate(userTree.editedItemRenderer);
    } // END OF e_ProcessData()
    I attached the rest of the files because they're a little
    bit longer.
    When I run the program, the data shows up fine when it is
    initialized the
    very
    first time, and I made a test button that just dumps the
    contents of the
    dataProvider in a trace statement to verify that the data has
    been set
    properly.
    The problem I've run into is whenever the textfield is
    edited, the item
    that
    I've selected jumps around the list.
    For example, if I edit the item "STR_USER_NAME" after I
    finish the edit, it
    will move from the very first position in the Tree to the
    bottom of the
    Tree.
    I traced the contents of the dataProvider and the
    dataProvider structure
    stays
    the same, with the "STR_USER_NAME" at the top, but if I look
    at the flex app
    in
    the web browser, its position is at the bottom of the Tree.
    This happens for every other item I try to edit... I read in
    the
    documentation
    that the ItemRenderers are recycled, so it means I should be
    checking to
    make
    sure the initial states are covered, but I'm not sure how
    this affects my
    application.
    Can anyone help me out with this ? Its very confusing - I've
    tried making
    an
    ItemRenderer using pure actionscript, mxml and the
    combination you see in
    this
    example and I always end up with the same behaviour - So I
    must be missing
    something critical...
    // ItemRendererUsers.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="
    http://www.adobe.com/2006/mxml"
    verticalScrollPolicy="{ScrollPolicy.OFF}"
    horizontalScrollPolicy="{ScrollPolicy.OFF}"
    creationComplete="initItemRendererUsers();"
    >
    From my FAQ:
    Q: I've created a custom itemRenderer component to use in a
    List
    based component (Datagrid, TileList, HorizontalList, etc.).
    When my List
    first displays, everything looks fine, but when I scroll it
    or change the
    dataProvider, some of the itemRenderers show values or
    formatting that
    aren't right. How do I fix this?
    A: List-based components don't draw a renderer for every item
    in the
    dataProvider. Instead, they create enough to display what is
    on screen now,
    plus one or two more waiting in the wings. This means they
    recycle the
    renderers rather than creating new ones when you change
    dataProvider or
    scroll up and down. When you use a creationComplete event to
    set up the
    itemRenderer, that event doesn't happen again when the
    renderer is used for
    a different set of data. The solution to this is to override
    the set data
    protected function that most components have.
    For more information, check out the following resources:
    http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html?devcon=f1
    http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html
    Please note, I post this FAQ weekly, and you can find a
    permanent copy of it
    here
    http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf

    "peterh8234" <[email protected]> wrote in
    message
    news:gaqttd$kft$[email protected]..
    > Yes - the set and get functions are listed down below.
    But the quirky
    > behaviour
    > is the same regardless of whether I override the set and
    get functions or
    > not.
    >
    > I noticed there was another variable called listData -
    should I be using
    > that
    > one or the data variable to read and write to the
    dataProvider ?
    >
    > // _data
    > [Bindable] public var _data:Object;
    > [Bindable("dataChange")]
    > //
    > override public function get data():Object
    > {
    > trace('[ItemRendererDefault.GET data()] called for {' +
    > _data.attribute("label") + '}.');
    > return _data;
    > } // END OF get data()
    >
    > //
    > override public function set data(value:Object):void
    > {
    > _data.@value = inputText.text;
    > trace('[ItemRendererDefault.SET data()] called for {' +
    > _data.attribute("label") + '}.');
    >
    > invalidateProperties();
    > } // END OF set data()
    Your set data needs to set a flag that gets picked up in
    commitProperties()
    and does your thing that you were doing before in
    creationComplete. You
    should see examples of this in the links I posted. Instead of
    this:
    _data.@value = inputText.text;
    you should look at implementing IDropInListItemRenderer,
    which will allow
    you to dynamically determine which field to look at, instead
    of hardcoding
    it. You also might wind up overwriting the stored value with
    a null value
    when the List passes the stored value in. I'd encourage you
    to really go
    through those links I posted and make sure you understand
    what they're
    saying. The itemRenderer life cycle is one of the hardest
    things to
    understand, but once you understand it, it makes many things
    in Flex much
    easier. It's worth investing the time.

  • Trying to assign an XML attribute value to a button label

    I have a Flex app (developed in FLEX 2) that reads from
    multiple XML files and populates datagrids with element values.
    What I'm trying to do now, is to create a second column with a
    button, enabling users to view archived versions for each current
    report.
    My problem is: I can't get the <mx:Button> label to
    accept the attribute "name". I've tried atleast 10 - 20 different
    syntax.
    My XML file looks like this:
    <metrics>
    <report name="test">
    <link>test Report 10/28/2008</link>
    <url>test-10_28_2008.zip</url>
    <status>active</status>
    </report>
    </metrics>
    The mxml looks like this:
    <mx:Button buttonMode="true" useHandCursor="true"
    click="handleClick()" label="{data.@name}" width="80">
    <mx:Script>
    <![CDATA[
    public function handleClick():void{
    var url:URLRequest = new
    URLRequest([L=http://new.test.com/pages/r_archive_apps/"+data.link+".html");[/L]]http://n ew.test.com/pages/r_archive_apps/"+data.link+".html");[/L][/L]
    navigateToURL(url,"_blank");
    ]]>
    </mx:Script>
    </mx:Button>
    When I try to label a button with an element it works fine.
    Some of the other sytax I've used are:
    - label="{data.report.@name}"
    - label="{data.report.(@name=='test')}"
    - label="{data.report.(@name='test')}"
    - label="{data.@name}"
    - label="{data.metrics.report.@name}"
    - label="{data.metrics.report.(@name=='test')}"
    - label="{data.metrics.report.(@name='test')}"

    quote:
    Originally posted by:
    rtalton
    Can you post some code so we can see how you are using the
    button? I think you may be using the button within a datagrid
    itemRenderer, which might make a difference.
    You're right, the button is in a datagrid itemRenderer. I've
    pasted more dataGrid code below - thanks again.
    <mx:DataGrid id="dgCatalog" dataProvider="{_xlcCatalog}"
    rowCount="4" editable="false" sortableColumns="false"
    left="148" top="65" bottom="42" borderStyle="solid"
    alternatingItemColors="[#ecf8ff, #ffffff]"
    themeColor="#ffff80" alpha="1.0" cornerRadius="0"
    dropShadowEnabled="true" dropShadowColor="#000000" width="549"
    creationCompleteEffect="{glow3}">
    <mx:columns>
    <mx:Array>
    <mx:DataGridColumn editable="false" headerText="Daily -
    Report Names" dataField="link" textAlign="left" width="200">
    <mx:itemRenderer>
    <mx:Component>
    <mx:LinkButton click="handleClick()" label="{data.link}"
    >
    <mx:Script>
    <![CDATA[
    public function handleClick():void{
    var url:URLRequest = new URLRequest("
    http://test.new.com/test/"+data.url);
    navigateToURL(url,"_blank");
    ]]>
    </mx:Script>
    </mx:LinkButton>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn editable="false" headerText="Daily -
    Report Archives" dataField="link" textAlign="left" width="80">
    <mx:itemRenderer>
    <mx:Component>
    <mx:Button buttonMode="true" useHandCursor="true"
    click="handleClick()" label="{data.report.@name}" width="80">
    <mx:Script>
    <![CDATA[
    public function handleClick():void{
    var url:URLRequest = new URLRequest("
    http://test.new.com/pages/test_apps/"+data.link+".html");
    navigateToURL(url,"_blank");
    ]]>
    </mx:Script>
    </mx:Button>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    <!--mx:DataGridColumn headerText="URL" dataField="url"
    width="350"/>
    <mx:DataGridColumn headerText="Status" dataField="status"
    width="70"/-->
    </mx:Array>
    </mx:columns>
    </mx:DataGrid>

  • Different ItemRenderer's in the same column of a datagrid

    I am using actionscript to read some XML input and dynamically add data into the datagrid.
    Currently I am reading the first row and depending on the data type of the coulmn i am creating the column to be a IntemRenderer of Image, or Link button.
    Now is there anyway of adding some rows to be LinkButton ItemRenderes and some to be Image ItemRenderers, in the same column?
    Any examples are also appreciated

    You can try overriding createColumnItemRenderer
    Alex Harui
    Flex SDK Developer
    Adobe Systems Inc.
    Blog: http://blogs.adobe.com/aharui

Maybe you are looking for