[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
Yes you're right, I am sure I am making it more complicated than it should be. The way I had it, was that in my renderer class (which extends DataGridItemRenderer) depending on the column I would add another (I think it is termed) dropin renderer , one column was rendered with a link button, the other one with the linkbar. But for the life of me I don't understand why I can't add a listener to the linkbar that way. Forget adding a listenener on the linkbar buttons, the only way the row click event for the datagrid would work is if I clicked just outside of the linkbar but still within the cell so I couldn't even use the click event for the datagrid. Clicking on the button on the linkbar itself went nowhere. Maybe it has something to do with putting a renderer within a renderer?? If you can follow what I did, please explain where in the world that mouseclick listener event would go and why I couldn't add the listener the parent renderer class (the one that extended DataGridItemRenderer). I scratched all that and ended up making a separate mxml renderer for that column and instead of a linkbar, I just added a vbox with a repeater for generating hboxes with link buttons in them as in this link http://forums.adobe.com/message/164232#164232. I may have overdid it on that one too but at least the eventlistener works. I really do appreciate the responses. Thanks for everyone's help! --- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote: I thionk you are over thinking this. All you need to do is extend the class you wish to use as your item renderer. In the extended class, either add an event listener or override a handler. In this case, that class is LinkBar. The LinkBar class has a clickHandler method already so you override that method to do what you want. So, an Item Renderer based on LinkBar could look like: package Renderers { import flash.events.MouseEvent; import flash.net.*; import mx.controls.LinkBar; public class LinkBarRenderer extends LinkBar { public function LinkBarRenderer() { super(); } override public function set data(value:Object):void { super.data = value; if(value != null) { var linksArray:Array = data.WebSites.split(,); dataProvider = linksArray; } } override protected function clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest(http://; + event.target.label), '_blank'); } } } HTH Steve --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2000@ wrote: I have put aside the thoughts of making fancy hyperlinks, now I am just trying to understand events in the itemrenderer. I am ashamed to say that even after searching this subject in the forum and googling it, I still find myself struggling. I ended up trying a LinkBar as Tino suggested in the itemrenderer: else if (column.dataField == monitorlocations){ var linksArray:Array = String((data[monitorlocations])).split(\n); var linkbarItemRendererFactory:ClassFactory = new ClassFactory(LinkBar); linkbarItemRendererFactory.properties = {dataProvider:linksArray, direction:vertical,enabled:true }; column.itemRenderer = linkbarItemRendererFactory; column.setStyle(verticalGap,5); column.addEventListener(ItemClickEvent.ITEM_CLICK, linkBarEventHandler); Problem is that it seems like the click event on the button on the linkbar never makes it to the linkBarEventHandler which is a function inside this itemrenderer. I would at least think that this event would fire but setting a breakpoint in this eventhandler fuction, I can tell it never makes it there. The datagrid itemclick event doesn't even get called like it does in the other columns, which I think is a good indication that I can bubble up the linkbar clickItem event, I just can't figure out what I am doing wrong or even how to capture in a debug session what happens on that click event. One post I read says : Re: [flexcoders] Listem to an event sent by a DataGrid ItemRenderer In your item renderer, if you have control over the TimerEvent creation, set the bubbles parameter to true. If you do not, you may want to catch the event in the renderer and re-dispatch a new one with bubbles set to true. This will allow your event to bubble out, up the parental chain until it reaches your application. Then all you need to do is register for the event at the Application level. Can I set the bubbles property to true somehow using the ItemRendererFactory approach I have above? If I can't, theoretically I can dispatch the event from the eventhandler (if I could get it to fire) and then listen for it in the file that my datagrid is created in. Alternative to bubbling up an event, maybe
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
I can understand how Flex could get confused with a renderer inside a renderer (I'm confused). There is no telling where an event would get dispatched to. It probably has something to do with scope. --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2...@... wrote: Yes you're right, I am sure I am making it more complicated than it should be. The way I had it, was that in my renderer class (which extends DataGridItemRenderer) depending on the column I would add another (I think it is termed) dropin renderer , one column was rendered with a link button, the other one with the linkbar. But for the life of me I don't understand why I can't add a listener to the linkbar that way. Forget adding a listenener on the linkbar buttons, the only way the row click event for the datagrid would work is if I clicked just outside of the linkbar but still within the cell so I couldn't even use the click event for the datagrid. Clicking on the button on the linkbar itself went nowhere. Maybe it has something to do with putting a renderer within a renderer?? If you can follow what I did, please explain where in the world that mouseclick listener event would go and why I couldn't add the listener the parent renderer class (the one that extended DataGridItemRenderer). I scratched all that and ended up making a separate mxml renderer for that column and instead of a linkbar, I just added a vbox with a repeater for generating hboxes with link buttons in them as in this link http://forums.adobe.com/message/164232#164232. I may have overdid it on that one too but at least the eventlistener works. I really do appreciate the responses. Thanks for everyone's help! --- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote: I thionk you are over thinking this. All you need to do is extend the class you wish to use as your item renderer. In the extended class, either add an event listener or override a handler. In this case, that class is LinkBar. The LinkBar class has a clickHandler method already so you override that method to do what you want. So, an Item Renderer based on LinkBar could look like: package Renderers { import flash.events.MouseEvent; import flash.net.*; import mx.controls.LinkBar; public class LinkBarRenderer extends LinkBar { public function LinkBarRenderer() { super(); } override public function set data(value:Object):void { super.data = value; if(value != null) { var linksArray:Array = data.WebSites.split(,); dataProvider = linksArray; } } override protected function clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest(http://; + event.target.label), '_blank'); } } } HTH Steve --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2000@ wrote: I have put aside the thoughts of making fancy hyperlinks, now I am just trying to understand events in the itemrenderer. I am ashamed to say that even after searching this subject in the forum and googling it, I still find myself struggling. I ended up trying a LinkBar as Tino suggested in the itemrenderer: else if (column.dataField == monitorlocations){ var linksArray:Array = String((data[monitorlocations])).split(\n); var linkbarItemRendererFactory:ClassFactory = new ClassFactory(LinkBar); linkbarItemRendererFactory.properties = {dataProvider:linksArray, direction:vertical,enabled:true }; column.itemRenderer = linkbarItemRendererFactory; column.setStyle(verticalGap,5); column.addEventListener(ItemClickEvent.ITEM_CLICK, linkBarEventHandler); Problem is that it seems like the click event on the button on the linkbar never makes it to the linkBarEventHandler which is a function inside this itemrenderer. I would at least think that this event would fire but setting a breakpoint in this eventhandler fuction, I can tell it never makes it there. The datagrid itemclick event doesn't even get called like it does in the other columns, which I think is a good indication that I can bubble up the linkbar clickItem event, I just can't figure out what I am doing wrong or even how to capture in a debug session what happens on that click event. One post I read says : Re: [flexcoders] Listem to an event sent by a DataGrid ItemRenderer In your item renderer, if you have control over the TimerEvent creation, set the bubbles parameter to true. If you do not, you may want to catch the event in the renderer and re-dispatch a new one with bubbles set to true. This will allow your event to bubble out, up the parental chain until it reaches your application. Then all
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
I thionk you are over thinking this. All you need to do is extend the class you wish to use as your item renderer. In the extended class, either add an event listener or override a handler. In this case, that class is LinkBar. The LinkBar class has a clickHandler method already so you override that method to do what you want. So, an Item Renderer based on LinkBar could look like: package Renderers { import flash.events.MouseEvent; import flash.net.*; import mx.controls.LinkBar; public class LinkBarRenderer extends LinkBar { public function LinkBarRenderer() { super(); } override public function set data(value:Object):void { super.data = value; if(value != null) { var linksArray:Array = data.WebSites.split(,); dataProvider = linksArray; } } override protected function clickHandler(event:MouseEvent):void { navigateToURL(new URLRequest(http://; + event.target.label), '_blank'); } } } HTH Steve --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2...@... wrote: I have put aside the thoughts of making fancy hyperlinks, now I am just trying to understand events in the itemrenderer. I am ashamed to say that even after searching this subject in the forum and googling it, I still find myself struggling. I ended up trying a LinkBar as Tino suggested in the itemrenderer: else if (column.dataField == monitorlocations){ var linksArray:Array = String((data[monitorlocations])).split(\n); var linkbarItemRendererFactory:ClassFactory = new ClassFactory(LinkBar); linkbarItemRendererFactory.properties = {dataProvider:linksArray, direction:vertical,enabled:true }; column.itemRenderer = linkbarItemRendererFactory; column.setStyle(verticalGap,5); column.addEventListener(ItemClickEvent.ITEM_CLICK, linkBarEventHandler); Problem is that it seems like the click event on the button on the linkbar never makes it to the linkBarEventHandler which is a function inside this itemrenderer. I would at least think that this event would fire but setting a breakpoint in this eventhandler fuction, I can tell it never makes it there. The datagrid itemclick event doesn't even get called like it does in the other columns, which I think is a good indication that I can bubble up the linkbar clickItem event, I just can't figure out what I am doing wrong or even how to capture in a debug session what happens on that click event. One post I read says : Re: [flexcoders] Listem to an event sent by a DataGrid ItemRenderer In your item renderer, if you have control over the TimerEvent creation, set the bubbles parameter to true. If you do not, you may want to catch the event in the renderer and re-dispatch a new one with bubbles set to true. This will allow your event to bubble out, up the parental chain until it reaches your application. Then all you need to do is register for the event at the Application level. Can I set the bubbles property to true somehow using the ItemRendererFactory approach I have above? If I can't, theoretically I can dispatch the event from the eventhandler (if I could get it to fire) and then listen for it in the file that my datagrid is created in. Alternative to bubbling up an event, maybe somehow I can add an eventlistener that calls a function using owner.document.myFunction? --- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote: As far as I know the code is open source but you could add a comment at his blog (http://www.jabbypanda.com/blog/?p=28). You will either have to disable the datagrids click event handler on that specific column or figure out a way to put each link in its own column. --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2000@ wrote: Actually I am not so sure how this will work in a datagrid. One datagrid cell would have multiple hyperlink buttons. Right now the click event for the datagrid behaves differently depending on which column you click. In another column I have one link button per row. But for this one, I would have several link buttons in one row's cell. Do I do nothing on the datagrid's click event and then the listerner events for the links would take over? Haven't tried anything yet, just thinking about how to approach it. Thanks! --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2000@ wrote: Oh wow, this looks great! Thank you! This looks like what I want to do, just curious, how do I cite it if I use it/ modified version of it?? I can add a link to his website and blog in the code? --- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote: Here is a quick and dirty example using the hyperlink component from jabbypanda (http://jabbypanda.com/labs/hyperLink/srcview/index.html): ?xml version=1.0 encoding=utf-8?
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
I have put aside the thoughts of making fancy hyperlinks, now I am just trying to understand events in the itemrenderer. I am ashamed to say that even after searching this subject in the forum and googling it, I still find myself struggling. I ended up trying a LinkBar as Tino suggested in the itemrenderer: else if (column.dataField == monitorlocations){ var linksArray:Array = String((data[monitorlocations])).split(\n); var linkbarItemRendererFactory:ClassFactory = new ClassFactory(LinkBar); linkbarItemRendererFactory.properties = {dataProvider:linksArray, direction:vertical,enabled:true }; column.itemRenderer = linkbarItemRendererFactory; column.setStyle(verticalGap,5); column.addEventListener(ItemClickEvent.ITEM_CLICK, linkBarEventHandler); Problem is that it seems like the click event on the button on the linkbar never makes it to the linkBarEventHandler which is a function inside this itemrenderer. I would at least think that this event would fire but setting a breakpoint in this eventhandler fuction, I can tell it never makes it there. The datagrid itemclick event doesn't even get called like it does in the other columns, which I think is a good indication that I can bubble up the linkbar clickItem event, I just can't figure out what I am doing wrong or even how to capture in a debug session what happens on that click event. One post I read says : Re: [flexcoders] Listem to an event sent by a DataGrid ItemRenderer In your item renderer, if you have control over the TimerEvent creation, set the bubbles parameter to true. If you do not, you may want to catch the event in the renderer and re-dispatch a new one with bubbles set to true. This will allow your event to bubble out, up the parental chain until it reaches your application. Then all you need to do is register for the event at the Application level. Can I set the bubbles property to true somehow using the ItemRendererFactory approach I have above? If I can't, theoretically I can dispatch the event from the eventhandler (if I could get it to fire) and then listen for it in the file that my datagrid is created in. Alternative to bubbling up an event, maybe somehow I can add an eventlistener that calls a function using owner.document.myFunction? --- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote: As far as I know the code is open source but you could add a comment at his blog (http://www.jabbypanda.com/blog/?p=28). You will either have to disable the datagrids click event handler on that specific column or figure out a way to put each link in its own column. --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2000@ wrote: Actually I am not so sure how this will work in a datagrid. One datagrid cell would have multiple hyperlink buttons. Right now the click event for the datagrid behaves differently depending on which column you click. In another column I have one link button per row. But for this one, I would have several link buttons in one row's cell. Do I do nothing on the datagrid's click event and then the listerner events for the links would take over? Haven't tried anything yet, just thinking about how to approach it. Thanks! --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2000@ wrote: Oh wow, this looks great! Thank you! This looks like what I want to do, just curious, how do I cite it if I use it/ modified version of it?? I can add a link to his website and blog in the code? --- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote: Here is a quick and dirty example using the hyperlink component from jabbypanda (http://jabbypanda.com/labs/hyperLink/srcview/index.html): ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute width=700 mx:Script ![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var initDG:ArrayCollection = new ArrayCollection([ {Company: 'Apple Computer', WebSites: 'www.apple.com,store.apple.com,developer.apple.com'}, {Company: 'Google', WebSites: 'www.google.com,code.google.com,mail.google.com'} ]); ]] /mx:Script mx:DataGrid id=myGrid dataProvider={initDG} rowCount={initDG.length} mx:columns mx:DataGridColumn width=120 dataField=Company editable=false/ mx:DataGridColumn width=500 dataField=WebSites itemRenderer=Renderers.LinksRenderer/ /mx:columns /mx:DataGrid /mx:Application LinksRenderer.as: package Renderers { import flash.net.*; import htmltext.controls.HyperLink; import htmltext.controls.events.HyperlinkEvent; import mx.containers.HBox; public class LinksRenderer extends
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
--- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2...@... wrote: I have put aside the thoughts of making fancy hyperlinks, now I am just trying to understand events in the itemrenderer. I am ashamed to say that even after searching this subject in the forum and googling it, I still find myself struggling. I ended up trying a LinkBar as Tino suggested in the itemrenderer: else if (column.dataField == monitorlocations){ var linksArray:Array = String((data[monitorlocations])).split(\n); var linkbarItemRendererFactory:ClassFactory = new ClassFactory(LinkBar); linkbarItemRendererFactory.properties = {dataProvider:linksArray, direction:vertical,enabled:true }; column.itemRenderer = linkbarItemRendererFactory; column.setStyle(verticalGap,5); column.addEventListener(ItemClickEvent.ITEM_CLICK, linkBarEventHandler); Problem is that it seems like the click event on the button on the linkbar never makes it to the linkBarEventHandler which is a function inside this itemrenderer. I would at least think that this event would fire but setting a breakpoint in this eventhandler fuction, I can tell it never makes it there. The datagrid itemclick event doesn't even get called like it does in the other columns, which I think is a good indication that I can bubble up the linkbar clickItem event, I just can't figure out what I am doing wrong or even how to capture in a debug session what happens on that click event. If the linkBarEventHandler is a function inside the item renderer, I would expect you to get a compile error, since the function would be defined in a scope that the parent does not have access to, especially since when the factory is defined, no instances of it exist. If you want to have an event handler in the itemRenderer, attach the event listener inside the item renderer, either in MXML or in AS. The itemClick event of NavBar does not bubble, so the only place you can listen for it is inside the itemRenderer. This is a separate and distinct event from the ListBase itemClick, which will give you information about the entire object that is represented in the DataGrid row. You could potentially catch the NavBar itemClick in your renderer and create your own bubbling event that describes what happened. You could also just listen for a mouse click anywhere on the DataGrid and check the target property to see if the LinkBar is in some way a parent of whatever was clicked. HTH; Amy
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
As far as I know the code is open source but you could add a comment at his blog (http://www.jabbypanda.com/blog/?p=28). You will either have to disable the datagrids click event handler on that specific column or figure out a way to put each link in its own column. --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2...@... wrote: Actually I am not so sure how this will work in a datagrid. One datagrid cell would have multiple hyperlink buttons. Right now the click event for the datagrid behaves differently depending on which column you click. In another column I have one link button per row. But for this one, I would have several link buttons in one row's cell. Do I do nothing on the datagrid's click event and then the listerner events for the links would take over? Haven't tried anything yet, just thinking about how to approach it. Thanks! --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2000@ wrote: Oh wow, this looks great! Thank you! This looks like what I want to do, just curious, how do I cite it if I use it/ modified version of it?? I can add a link to his website and blog in the code? --- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote: Here is a quick and dirty example using the hyperlink component from jabbypanda (http://jabbypanda.com/labs/hyperLink/srcview/index.html): ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute width=700 mx:Script ![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var initDG:ArrayCollection = new ArrayCollection([ {Company: 'Apple Computer', WebSites: 'www.apple.com,store.apple.com,developer.apple.com'}, {Company: 'Google', WebSites: 'www.google.com,code.google.com,mail.google.com'} ]); ]] /mx:Script mx:DataGrid id=myGrid dataProvider={initDG} rowCount={initDG.length} mx:columns mx:DataGridColumn width=120 dataField=Company editable=false/ mx:DataGridColumn width=500 dataField=WebSites itemRenderer=Renderers.LinksRenderer/ /mx:columns /mx:DataGrid /mx:Application LinksRenderer.as: package Renderers { import flash.net.*; import htmltext.controls.HyperLink; import htmltext.controls.events.HyperlinkEvent; import mx.containers.HBox; public class LinksRenderer extends HBox { private var link1:HyperLink = new HyperLink(); private var link2:HyperLink = new HyperLink(); private var link3:HyperLink = new HyperLink(); public function LinksRenderer() { super(); } override public function set data(value:Object):void { super.data = value; if(value != null) { var linksArray:Array = data.WebSites.split(,); link1.linkText = linksArray[0]; link1.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); link2.linkText = linksArray[1]; link2.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); link3.linkText = linksArray[2]; link3.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); addChild(link1); addChild(link2); addChild(link3); } } private function hyperLinkClicked(event:HyperlinkEvent):void { navigateToURL(new URLRequest(http://; + event.target.linkText), '_blank'); } } } --- In flexcoders@yahoogroups.com, Tino Dai oberoc@ wrote: Have you looked at the class LinkBar? I think that would be a good way to return a multiple buttons in a cell of a datagrid. http://livedocs.adobe.com/flex/3/langref/mx/controls/LinkBar.html -Tino On Wed, Jan 13, 2010 at 10:11 AM, aramsdell2000 aramsdell2000@: OK, that's the problem. I don't know how to add multiple link buttons through action script. And here goes my feeble attempt at explaining what I did so that it makes sense: This is how I am now populating the column with multiple hyperlinks, using the itemrenderer approach from Alex's Flex Closet HTML in an Item Renderer on this website: http://blogs.adobe.com/aharui/item_renderers/ var params:Array = (data[column.dataField]).split(, ); var urls:String = ; for (var i:Number=0; i params.length; i++) { ... urls += a href='http://webaddress?charname=; + params[i] + amp;someid= + station +
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
Oh wow, this looks great! Thank you! This looks like what I want to do, just curious, how do I cite it if I use it/ modified version of it?? I can add a link to his website and blog in the code? --- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote: Here is a quick and dirty example using the hyperlink component from jabbypanda (http://jabbypanda.com/labs/hyperLink/srcview/index.html): ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute width=700 mx:Script ![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var initDG:ArrayCollection = new ArrayCollection([ {Company: 'Apple Computer', WebSites: 'www.apple.com,store.apple.com,developer.apple.com'}, {Company: 'Google', WebSites: 'www.google.com,code.google.com,mail.google.com'} ]); ]] /mx:Script mx:DataGrid id=myGrid dataProvider={initDG} rowCount={initDG.length} mx:columns mx:DataGridColumn width=120 dataField=Company editable=false/ mx:DataGridColumn width=500 dataField=WebSites itemRenderer=Renderers.LinksRenderer/ /mx:columns /mx:DataGrid /mx:Application LinksRenderer.as: package Renderers { import flash.net.*; import htmltext.controls.HyperLink; import htmltext.controls.events.HyperlinkEvent; import mx.containers.HBox; public class LinksRenderer extends HBox { private var link1:HyperLink = new HyperLink(); private var link2:HyperLink = new HyperLink(); private var link3:HyperLink = new HyperLink(); public function LinksRenderer() { super(); } override public function set data(value:Object):void { super.data = value; if(value != null) { var linksArray:Array = data.WebSites.split(,); link1.linkText = linksArray[0]; link1.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); link2.linkText = linksArray[1]; link2.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); link3.linkText = linksArray[2]; link3.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); addChild(link1); addChild(link2); addChild(link3); } } private function hyperLinkClicked(event:HyperlinkEvent):void { navigateToURL(new URLRequest(http://; + event.target.linkText), '_blank'); } } } --- In flexcoders@yahoogroups.com, Tino Dai oberoc@ wrote: Have you looked at the class LinkBar? I think that would be a good way to return a multiple buttons in a cell of a datagrid. http://livedocs.adobe.com/flex/3/langref/mx/controls/LinkBar.html -Tino On Wed, Jan 13, 2010 at 10:11 AM, aramsdell2000 aramsdell2...@...: OK, that's the problem. I don't know how to add multiple link buttons through action script. And here goes my feeble attempt at explaining what I did so that it makes sense: This is how I am now populating the column with multiple hyperlinks, using the itemrenderer approach from Alex's Flex Closet HTML in an Item Renderer on this website: http://blogs.adobe.com/aharui/item_renderers/ var params:Array = (data[column.dataField]).split(, ); var urls:String = ; for (var i:Number=0; i params.length; i++) { ... urls += a href='http://webaddress?charname=; + params[i] + amp;someid= + station + amp;anotherid= + org + ' target='_blank' + params[i] + /a, ; } ... cdataTag = urls; . htmlText = cdataTag; but only a right click works to open a new window. I would like it to work with just clicking on the text like a normal HTML href. So what I wanted to do was have each string be a link button (except i don't really like the fact that it looks like a button). I have been experimenting with using a single linkbutton in a datagridcolumn for something similar: else if (column.dataField == details){ var linkItemRendererFactory:ClassFactory = new ClassFactory(LinkButton); var someid:String = data[someid]; var anotherid:String = data[anotherid]; var queryExpr:String = SomeParameterId= + someid + AnotherParameterId= + anotherid + restofurl; //this line isn't quite working either but I hope you get the idea.. //linkItemRendererFactory.properties = {label:data[column.dataField],click:callGetDetailsWebService( + queryExpr + );}; linkItemRendererFactory.properties = {label:data[column.dataField]}; column.itemRenderer = linkItemRendererFactory; I am not sure how to expand the above code to
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
Actually I am not so sure how this will work in a datagrid. One datagrid cell would have multiple hyperlink buttons. Right now the click event for the datagrid behaves differently depending on which column you click. In another column I have one link button per row. But for this one, I would have several link buttons in one row's cell. Do I do nothing on the datagrid's click event and then the listerner events for the links would take over? Haven't tried anything yet, just thinking about how to approach it. Thanks! --- In flexcoders@yahoogroups.com, aramsdell2000 aramsdell2...@... wrote: Oh wow, this looks great! Thank you! This looks like what I want to do, just curious, how do I cite it if I use it/ modified version of it?? I can add a link to his website and blog in the code? --- In flexcoders@yahoogroups.com, valdhor valdhorlists@ wrote: Here is a quick and dirty example using the hyperlink component from jabbypanda (http://jabbypanda.com/labs/hyperLink/srcview/index.html): ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute width=700 mx:Script ![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var initDG:ArrayCollection = new ArrayCollection([ {Company: 'Apple Computer', WebSites: 'www.apple.com,store.apple.com,developer.apple.com'}, {Company: 'Google', WebSites: 'www.google.com,code.google.com,mail.google.com'} ]); ]] /mx:Script mx:DataGrid id=myGrid dataProvider={initDG} rowCount={initDG.length} mx:columns mx:DataGridColumn width=120 dataField=Company editable=false/ mx:DataGridColumn width=500 dataField=WebSites itemRenderer=Renderers.LinksRenderer/ /mx:columns /mx:DataGrid /mx:Application LinksRenderer.as: package Renderers { import flash.net.*; import htmltext.controls.HyperLink; import htmltext.controls.events.HyperlinkEvent; import mx.containers.HBox; public class LinksRenderer extends HBox { private var link1:HyperLink = new HyperLink(); private var link2:HyperLink = new HyperLink(); private var link3:HyperLink = new HyperLink(); public function LinksRenderer() { super(); } override public function set data(value:Object):void { super.data = value; if(value != null) { var linksArray:Array = data.WebSites.split(,); link1.linkText = linksArray[0]; link1.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); link2.linkText = linksArray[1]; link2.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); link3.linkText = linksArray[2]; link3.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); addChild(link1); addChild(link2); addChild(link3); } } private function hyperLinkClicked(event:HyperlinkEvent):void { navigateToURL(new URLRequest(http://; + event.target.linkText), '_blank'); } } } --- In flexcoders@yahoogroups.com, Tino Dai oberoc@ wrote: Have you looked at the class LinkBar? I think that would be a good way to return a multiple buttons in a cell of a datagrid. http://livedocs.adobe.com/flex/3/langref/mx/controls/LinkBar.html -Tino On Wed, Jan 13, 2010 at 10:11 AM, aramsdell2000 aramsdell2000@: OK, that's the problem. I don't know how to add multiple link buttons through action script. And here goes my feeble attempt at explaining what I did so that it makes sense: This is how I am now populating the column with multiple hyperlinks, using the itemrenderer approach from Alex's Flex Closet HTML in an Item Renderer on this website: http://blogs.adobe.com/aharui/item_renderers/ var params:Array = (data[column.dataField]).split(, ); var urls:String = ; for (var i:Number=0; i params.length; i++) { ... urls += a href='http://webaddress?charname=; + params[i] + amp;someid= + station + amp;anotherid= + org + ' target='_blank' + params[i] + /a, ; } ... cdataTag = urls; . htmlText = cdataTag; but only a right click works to open a new window. I would like it to work with just clicking on the text like a normal HTML href. So what I wanted to do was have each string be a link button (except i don't really like the fact that it looks like a button). I have been experimenting with using a single
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
Here is a quick and dirty example using the hyperlink component from jabbypanda (http://jabbypanda.com/labs/hyperLink/srcview/index.html): ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute width=700 mx:Script ![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var initDG:ArrayCollection = new ArrayCollection([ {Company: 'Apple Computer', WebSites: 'www.apple.com,store.apple.com,developer.apple.com'}, {Company: 'Google', WebSites: 'www.google.com,code.google.com,mail.google.com'} ]); ]] /mx:Script mx:DataGrid id=myGrid dataProvider={initDG} rowCount={initDG.length} mx:columns mx:DataGridColumn width=120 dataField=Company editable=false/ mx:DataGridColumn width=500 dataField=WebSites itemRenderer=Renderers.LinksRenderer/ /mx:columns /mx:DataGrid /mx:Application LinksRenderer.as: package Renderers { import flash.net.*; import htmltext.controls.HyperLink; import htmltext.controls.events.HyperlinkEvent; import mx.containers.HBox; public class LinksRenderer extends HBox { private var link1:HyperLink = new HyperLink(); private var link2:HyperLink = new HyperLink(); private var link3:HyperLink = new HyperLink(); public function LinksRenderer() { super(); } override public function set data(value:Object):void { super.data = value; if(value != null) { var linksArray:Array = data.WebSites.split(,); link1.linkText = linksArray[0]; link1.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); link2.linkText = linksArray[1]; link2.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); link3.linkText = linksArray[2]; link3.addEventListener(HyperlinkEvent.HYPERLINK_CLICK, hyperLinkClicked); addChild(link1); addChild(link2); addChild(link3); } } private function hyperLinkClicked(event:HyperlinkEvent):void { navigateToURL(new URLRequest(http://; + event.target.linkText), '_blank'); } } } --- In flexcoders@yahoogroups.com, Tino Dai obe...@... wrote: Have you looked at the class LinkBar? I think that would be a good way to return a multiple buttons in a cell of a datagrid. http://livedocs.adobe.com/flex/3/langref/mx/controls/LinkBar.html -Tino On Wed, Jan 13, 2010 at 10:11 AM, aramsdell2000 aramsdell2...@...wrote: OK, that's the problem. I don't know how to add multiple link buttons through action script. And here goes my feeble attempt at explaining what I did so that it makes sense: This is how I am now populating the column with multiple hyperlinks, using the itemrenderer approach from Alex's Flex Closet HTML in an Item Renderer on this website: http://blogs.adobe.com/aharui/item_renderers/ var params:Array = (data[column.dataField]).split(, ); var urls:String = ; for (var i:Number=0; i params.length; i++) { ... urls += a href='http://webaddress?charname=; + params[i] + amp;someid= + station + amp;anotherid= + org + ' target='_blank' + params[i] + /a, ; } ... cdataTag = urls; . htmlText = cdataTag; but only a right click works to open a new window. I would like it to work with just clicking on the text like a normal HTML href. So what I wanted to do was have each string be a link button (except i don't really like the fact that it looks like a button). I have been experimenting with using a single linkbutton in a datagridcolumn for something similar: else if (column.dataField == details){ var linkItemRendererFactory:ClassFactory = new ClassFactory(LinkButton); var someid:String = data[someid]; var anotherid:String = data[anotherid]; var queryExpr:String = SomeParameterId= + someid + AnotherParameterId= + anotherid + restofurl; //this line isn't quite working either but I hope you get the idea.. //linkItemRendererFactory.properties = {label:data[column.dataField],click:callGetDetailsWebService( + queryExpr + );}; linkItemRendererFactory.properties = {label:data[column.dataField]}; column.itemRenderer = linkItemRendererFactory; I am not sure how to expand the above code to add multiple buttons. Instead of using an inline? renderer, do I have to make a new link button class and extend it or can I somehow write it into the custom CustomDataGridItemRenderer class I have now that extends DataGridItemRenderer. Hopefully that makes sense! Thanks! Amy --- In flexcoders@yahoogroups.com flexcoders%40yahoogroups.com, Tino Dai oberoc@ wrote: Some code
Re: [flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
Have you looked at the class LinkBar? I think that would be a good way to return a multiple buttons in a cell of a datagrid. http://livedocs.adobe.com/flex/3/langref/mx/controls/LinkBar.html -Tino On Wed, Jan 13, 2010 at 10:11 AM, aramsdell2000 aramsdell2...@yahoo.comwrote: OK, that's the problem. I don't know how to add multiple link buttons through action script. And here goes my feeble attempt at explaining what I did so that it makes sense: This is how I am now populating the column with multiple hyperlinks, using the itemrenderer approach from Alex's Flex Closet HTML in an Item Renderer on this website: http://blogs.adobe.com/aharui/item_renderers/ var params:Array = (data[column.dataField]).split(, ); var urls:String = ; for (var i:Number=0; i params.length; i++) { ... urls += a href='http://webaddress?charname=; + params[i] + amp;someid= + station + amp;anotherid= + org + ' target='_blank' + params[i] + /a, ; } ... cdataTag = urls; . htmlText = cdataTag; but only a right click works to open a new window. I would like it to work with just clicking on the text like a normal HTML href. So what I wanted to do was have each string be a link button (except i don't really like the fact that it looks like a button). I have been experimenting with using a single linkbutton in a datagridcolumn for something similar: else if (column.dataField == details){ var linkItemRendererFactory:ClassFactory = new ClassFactory(LinkButton); var someid:String = data[someid]; var anotherid:String = data[anotherid]; var queryExpr:String = SomeParameterId= + someid + AnotherParameterId= + anotherid + restofurl; //this line isn't quite working either but I hope you get the idea.. //linkItemRendererFactory.properties = {label:data[column.dataField],click:callGetDetailsWebService( + queryExpr + );}; linkItemRendererFactory.properties = {label:data[column.dataField]}; column.itemRenderer = linkItemRendererFactory; I am not sure how to expand the above code to add multiple buttons. Instead of using an inline? renderer, do I have to make a new link button class and extend it or can I somehow write it into the custom CustomDataGridItemRenderer class I have now that extends DataGridItemRenderer. Hopefully that makes sense! Thanks! Amy --- In flexcoders@yahoogroups.com flexcoders%40yahoogroups.com, Tino Dai obe...@... wrote: Some code would help On Tue, Jan 12, 2010 at 8:36 PM, aramsdell2000 amy.ramsd...@...wrote: I have a datagrid column that for each row, has several text values each with its own hyperlink. Ex: the data in the datafield looks like: Atext, Btext, Ctext. As it is now, I was able to add href anchor tags but they only open in a new window with the right mouse click. The datagrid item click event takes over the left mouse click and I am not sure how to prevent that. So I thought I would add multiple link buttons in the datagrid column instead. My question is how to add these multiple buttons using an itemrenderer in actionscript. If I was adding just one I would assume it would be datagrdcol.itemrenderer = new ClassFactory(LinkButton) and then you just set the properties of the link button. But how do you do it if there are multiple buttons for the data in the datafield. Do you extend the LinkButton or list data in a customitemrenderer class? How?
[flexcoders] Re: Datagrid itemrenderer for adding multiple linkbuttons in same gridcolumn
OK, that's the problem. I don't know how to add multiple link buttons through action script. And here goes my feeble attempt at explaining what I did so that it makes sense: This is how I am now populating the column with multiple hyperlinks, using the itemrenderer approach from Alex's Flex Closet HTML in an Item Renderer on this website: http://blogs.adobe.com/aharui/item_renderers/ var params:Array = (data[column.dataField]).split(, ); var urls:String = ; for (var i:Number=0; i params.length; i++) { ... urls += a href='http://webaddress?charname=; + params[i] + amp;someid= + station + amp;anotherid= + org + ' target='_blank' + params[i] + /a, ; } ... cdataTag = urls; . htmlText = cdataTag; but only a right click works to open a new window. I would like it to work with just clicking on the text like a normal HTML href. So what I wanted to do was have each string be a link button (except i don't really like the fact that it looks like a button). I have been experimenting with using a single linkbutton in a datagridcolumn for something similar: else if (column.dataField == details){ var linkItemRendererFactory:ClassFactory = new ClassFactory(LinkButton); var someid:String = data[someid]; var anotherid:String = data[anotherid]; var queryExpr:String = SomeParameterId= + someid + AnotherParameterId= + anotherid + restofurl; //this line isn't quite working either but I hope you get the idea.. //linkItemRendererFactory.properties = {label:data[column.dataField],click:callGetDetailsWebService( + queryExpr + );}; linkItemRendererFactory.properties = {label:data[column.dataField]}; column.itemRenderer = linkItemRendererFactory; I am not sure how to expand the above code to add multiple buttons. Instead of using an inline? renderer, do I have to make a new link button class and extend it or can I somehow write it into the custom CustomDataGridItemRenderer class I have now that extends DataGridItemRenderer. Hopefully that makes sense! Thanks! Amy --- In flexcoders@yahoogroups.com, Tino Dai obe...@... wrote: Some code would help On Tue, Jan 12, 2010 at 8:36 PM, aramsdell2000 amy.ramsd...@...wrote: I have a datagrid column that for each row, has several text values each with its own hyperlink. Ex: the data in the datafield looks like: Atext, Btext, Ctext. As it is now, I was able to add href anchor tags but they only open in a new window with the right mouse click. The datagrid item click event takes over the left mouse click and I am not sure how to prevent that. So I thought I would add multiple link buttons in the datagrid column instead. My question is how to add these multiple buttons using an itemrenderer in actionscript. If I was adding just one I would assume it would be datagrdcol.itemrenderer = new ClassFactory(LinkButton) and then you just set the properties of the link button. But how do you do it if there are multiple buttons for the data in the datafield. Do you extend the LinkButton or list data in a customitemrenderer class? How?