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
<action1>
<action2>
<action_number>1</action_number>
<action_description>Action
Desc</action_description>
<action_column column_number="1"
column_value="1" />
<action_column column_number="2"
column_value="2" />
<action_column column_number="3"
column_value="3" />
</action2>
<action2>
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
<mx:DataGridColumn dataField="4"
labelFunction="LabelFuncAction"
itemRenderer="mx.controls.Button"/>
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 -
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 "Add to List"
" 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?
-
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. -
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><answer>
<correct>false</correct>
<text>Barney Fife</text>
</answer></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 -
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 appreciatedYou can try overriding createColumnItemRenderer
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui
Maybe you are looking for
-
One of the main reasons I purchased the iMac was to transition from my PC video editor to FCP. Now three issues have come up suggesting I have made a bad purchase. 1. The iMac is set up to run on a FAT32 hard drive, yet I have just read that the FAT3
-
New G/L with PCA reports URGENT
Hi All, I would like to use the advantage of New G/L reporting for Profit center Distribution(FAGLGA31) and Assessment (FAGLGA11),As in my company we have PCA is the integrated part of New G/L and the the regular reports in PCA are decativated so I n
-
PSE 11 - MacOX 10.7.5 -MORE-Printer and Profiles Not Working Correctly
Changed Profiles after printing many prints.. this time the first print was dark/black muddy as on my previous discussion... follow up prints fine.... see early discussion about 12 hours ago
-
HT1212 my i pad is not working. totally stop. plz help me
my i pad is nor working. totally stop. nothing powder off. nothing any thing
-
File sent by email is not opening.
To whom it may concern, I am running on Adobe Reader XI. I have a friend who sent me three .pdf files only one of the files works. It gives me a message that the file is not supported or corrupted Why? What is the solution to the problem? Sincerely,