Datagrid and Cell Renderer

[Kris Kros]

Hi,

I have a datagrid with a Hyperlink cell renderer. Is there a way to pass the
data from the row to the cell renderer? I am having great difficulty in this.
I have included snippets of the code below.


Any ideas?

Chris


<!-- *** Herer is my DataGrid *** -->

<mx:Label text="Episode Summary" styleName="boldLabel"/>
<mx:DataGrid id="episodeDetails" rowCount="3"
dataProvider="{episodeDetailsResults}" width="900" >
<mx:columns>
<mx:Array>
<mx:DataGridColumn columnName="src_dsc" headerText="Source Type"/>
<mx:DataGridColumn columnName="epi_recvd_dtm" headerText="Received
Date" cellRenderer="as.util.DateFormatCellRenderer" textAlign="center"/>
<mx:DataGridColumn columnName="dout_dsc" headerText="Expectation"/>
<mx:DataGridColumn columnName="epi_close_dtm" headerText="Closed
Date" cellRenderer="as.util.DateFormatCellRenderer" textAlign="center"/>
<mx:DataGridColumn columnName="aout_dsc" headerText="Result"/>
<mx:DataGridColumn columnName="epi_resol_txt" headerText="Resolution"
cellRenderer="as.util.HyperlinkCell"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>


<!-- *** Here is the cell Renderer *** -->

import mx.core.UIComponent;
import mx.controls.Alert;
import mx.containers.TitleWindow;
import mx.managers.PopUpManager;

class as.util.HyperlinkCell extends UIComponent
{
static var symbolName:String = "HyperlinkCell";

var text_txt; //the label to be used for text
var owner; // the row that contains this cell
var listOwner; // the datagrid
private var cellData:Object;




// empty constructor
function HyperlinkCell()
{

}

function createChildren():Void
{
// createLabel is a useful method of UIObject--all components use this
var c = createLabel("text_txt");
// links the style of the label to the
// style of the grid
c.styleName = listOwner;
c.selectable = true;
c.tabEnabled = false;
c.background = false;
c.border = false;
c.multiline = false;
c.wordWrap = false;
c.html = true;
}

function size():Void
{
var c = text_txt;
c._width = __width;
c._height = __height;
}

function getPreferredHeight():Number
{
return 22;
}

function setValue(suggested:String, item:Object, selected:Boolean):Void
{
cellData = suggested;

var t:TextFormat = text_txt.getTextFormat();
var nt:TextFormat = text_txt.getNewTextFormat();
text_txt.htmlText = "<a href='asfunction:onHyperlinkClick'><u>" + suggested
+ "</u></a>";
text_txt.setTextFormat(t);
text_txt.setNewTextFormat(nt);
}

private function onHyperlinkClick(cellText:String)
{
//I want to be able to pass the selected row's data to my pop-up window
'complaintDescription'

//Alert.show("Window: "+ listOwner.selectedItem.epi_resol_txt);
var resolutionWin:Object = new Object();
resolutionWin.title = "Description for Policy Number "+cellData;
resolutionWin.width = 400;
resolutionWin.height = 200;

var titleWindowInstance:Object = TitleWindow(PopUpManager.createPopUp(this,
complaintDescription, false, resolutionWin, false));
titleWindowInstance.centerPopUp(
mx.core.Application.application.CMSVStack.compDeta ils);


}

}

[Jason R. Weiss]

Kris Kros wrote:

> //I want to be able to pass the selected row's data to my pop-up window
> 'complaintDescription'
>
> //Alert.show("Window: "+ listOwner.selectedItem.epi_resol_txt);
> var resolutionWin:Object = new Object();
> resolutionWin.title = "Description for Policy Number "+cellData;
> resolutionWin.width = 400;
> resolutionWin.height = 200;
>
> var titleWindowInstance:Object = TitleWindow(PopUpManager.createPopUp(this,
> complaintDescription, false, resolutionWin, false));
> titleWindowInstance.centerPopUp(
> mx.core.Application.application.CMSVStack.compDeta ils);
>
>
> }
>
> }
>

Extend your resolutionWin and populate it with properties you to pass in
to the popup window. Your popup window should have a 1:1 relationship
to the properties you pass in. Here is an example where I use an
initObj to pass in a username and password to a LoginWindow:

function popup()
{
var initObj = {title:"Login baby", passwordVal:"abc123",
userNameVal:"Jason"};
var popup = mx.managers.PopUpManager.createPopUp(_root,
LoginWindow, false, initObj);
}


Notice how LoginWindow has 2 public properties that match the values I'm
passing in through my initialization object. I also can set existing
properties dynamically as well, as I did by changing the title of the
popup window from Logon to Login baby. To populate the fields in my
example I just tied into a creationComplete event for one of the
controls. There's other places you could tie in as well to get your
values populated- this is just a quick example.


LoginWindow.mxml
================

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.macromedia.com/2003/mxml"
title="Logon">

<mx:Script>
<![CDATA[

public var userNameVal : String;
public var passwordVal : String;

function fillData()
{
userId.text = userNameVal;
password.text = passwordVal;
}

]]>
</mx:Script>

<mx:Form>

<mx:FormItem label="UserId" required="true">
<mx:TextInput creationComplete="fillData()" id="userId"
width="150"/>
</mx:FormItem>

<mx:FormItem label="Password" required="true">
<mx:TextInput id="password" width="150"/>
</mx:FormItem>

<mx:FormItem>
<mx:HBox horizontalGap="30">
<mx:Button label="Logon"/>
<mx:Button label="Cancel" click="this.deletePopUp()"/>
</mx:HBox>
</mx:FormItem>

</mx:Form>

</mx:TitleWindow>



HTH,

Jason



--
Jason Weiss
Cynergy Systems, Inc.
Macromedia Flex Alliance Partner
[url]http://www.cynergysystems.com[/url]

Email: [email]jason.weiss@cynergysystems.com[/email]
Office: 866-CYNERGY
Mobile: 1.832.444.2246

[Kris Kros]

Hi Jason,

Thanks for the reply. Your example is very helpful but I am not having
difficulty passing variables from the pop-up function to the actual pop- up
window. My problem is the step before this. Getting the selected row form the
datagrid in to my cell renderer. So in otherwords the flow of data being
passed is:

Datagrid -> cell renderer -> pop-up

You have shown me perfect way to accomplish the second part of this flow. Any
ideas of how i might achieve the first part.

Again just to summarise what i need to do. Each row in the datagrid will have
a cell renderer which is a link. When the user clicks the cell renderer the
data from that row will be passed to the renderer and then passed again to the
pop-up.

Thanks for your reply and help

- Chris

[Kris Kros]

Hi,

Is it possible to pass arguments in the call to a cell renerer.

For example can I call my cell renerer like so:
cellRenderer="as.util.HyperlinkCell(arg1, arg2, arg3)"/>

And if i am allowed to do this, how do i acces these arguments from within the
cell renderer.

Any help is greatly appreciated.

thanks

Chris

[Jason R. Weiss]

The cell renderer's setValue method contains a reference to the data for
the row in the 2nd parameter. In this example, the item contains all of
the data for the row and I reference the "name" object. Just pull out
your data from the row.

function setValue(str:String, item:Object, sel:Boolean) : Void
{
//label._visible = true;

// this property must match the value of the cell's data
property
label.text = item.name;



Now, if you're trying to access other rows, you'll have to get more
creative.

HTH,

Jason


--
Jason Weiss
Cynergy Systems, Inc.
Macromedia Flex Alliance Partner
[url]http://www.cynergysystems.com[/url]

Email: [email]jason.weiss@cynergysystems.com[/email]
Office: 866-CYNERGY
Mobile: 1.832.444.2246

[xiva]

Hi, Kris,
import mx.core.UIComponent;
import mx.controls.Link;
class DataGridLinkRenderer extends UIComponent
{
var link : MovieClip;
var listOwner : MovieClip;
var getCellIndex : Function;
var getDataLabel : Function;

function DataGridLinkRenderer()
{

}

function createChildren(Void) : Void
{
link = createClassObject(Link, "link", 1, {styleName:this,owner:this});

size();
}

function size(Void) : Void
{

link.setSize(layoutWidth, listOwner.rowHeight);
link.x=0;
link.y=0;
}

function setValue(str:String, item:Object, sel:Boolean) : Void
{

link.label=item[getDataLabel()];

}



function getPreferredHeight(Void) : Number
{
return listOwner.rowHeight;
}

function getPreferredWidth(Void) : Number
{
return layoutWidth;
}


}

It seems not possible to pass arguments to the cell renderer. But in the cell
renderer, you may access these parameters as parentDocument.XXX

Hope the above information can help you.

[Kris Kros]

Hi xiva,

Thanks for the above suggestion. It was exactly what i was looking for.
However i just have one question about the code you included. How do I catch
the click event of the button in the datagrid?

For example:
1) In your code you create a class object of type link
link = createClassObject(Link, "link", 1, {styleName:this,owner:this});

This is great and makes the data in the datagrid a link.

2) My question is how do i attach a click event to this. i.e. I have a
onHyperlinkClick() function in the cell renderer which i need to call only when
the link in the datagrid is clicked. I tried using
link.label.click="onHyperlinkClick()"; but this does not work. This is the
final step i am missing. The code is below

Have you any thoughts or suggestions?

Thanks again for help

Chris





import mx.core.UIComponent;
import mx.core.UIObject;
import mx.controls.Alert;
import mx.containers.TitleWindow;
import mx.managers.PopUpManager;
import mx.controls.Link;
import mx.controls.Button;

class as.util.HyperlinkCell extends UIComponent
{
var link : MovieClip;
var listOwner : MovieClip;
var getCellIndex : Function;
var getDataLabel : Function;

// empty constructor
function HyperlinkCell()
{

}

function createChildren(Void) : Void
{
link = createClassObject(Link, "link", 1, {styleName:this,owner:this});
link.id = "crBtn";

size();
}

function size(Void) : Void
{
link.setSize(layoutWidth, listOwner.rowHeight);
link.x=0;
link.y=0;
}

function getPreferredHeight(Void) : Number
{
return listOwner.rowHeight;
}

function getPreferredWidth(Void) : Number
{
return layoutWidth;
}

function setValue(str:String, item:Object, sel:Boolean) : Void
{

link.label=item[getDataLabel()];

//This does not work to assign a click event to the label
//link.label.click="onHyperlinkClick()";


}

private function onHyperlinkClick() //cellText:String
{
//I want to be able to pass the selected row's parameters to my pop-up
window 'complaintDescription'
Alert.show("Window Inside cell Renderer: "+ link.label);

/*var resolutionWin:Object = new Object();
resolutionWin.title = "Description for Policy Number: "+rowData;
resolutionWin.width = 400;
resolutionWin.height = 200;
resolutionWin.rowData;


var titleWindowInstance:Object = TitleWindow(PopUpManager.createPopUp(this,
complaintDescription, false, resolutionWin, false));
titleWindowInstance.centerPopUp(
mx.core.Application.application.CMSVStack.compDeta ils);
*/

}

}

[Jason R. Weiss]

Kris Kros wrote:

> 2) My question is how do i attach a click event to this. i.e. I have a
> onHyperlinkClick() function in the cell renderer which i need to call only when
> the link in the datagrid is clicked. I tried using
> link.label.click="onHyperlinkClick()"; but this does not work. This is the
> final step i am missing. The code is below
>

Use the addEventListener method:

link.addEventListener("click", this);

....


function click()
{
//do your work here
}


HTH,

Jason

--
Jason Weiss
Cynergy Systems, Inc.
Macromedia Flex Alliance Partner
[url]http://www.cynergysystems.com[/url]

Email: [email]jason.weiss@cynergysystems.com[/email]
Office: 866-CYNERGY
Mobile: 1.832.444.2246

[Kris Kros]

Hi jason,

Thanks for your swift reply. Where would i put the addEventListener method in
the cell renderer. If i put it in the createChildren function, if wont work and
if i put it in the setValue function , it executes all the time without the
user having to click on the link! Should I create a new/seperate function for
it?

Thank for you help

Chris

[Jason R. Weiss]

Kris Kros wrote:

> Hi jason,
>
> Thanks for your swift reply. Where would i put the addEventListener method in
> the cell renderer. If i put it in the createChildren function, if wont work and
> if i put it in the setValue function , it executes all the time without the
> user having to click on the link! Should I create a new/seperate function for
> it?
>
> Thank for you help
>
> Chris
>

Yep- just drop that bad boy function down toward the bottom of your
class definition. Think of it this way- if the functions of the class
were displayed in a treeview, then setValue would be a peer node to your
event listener method.

HTH,

Jason

--
Jason Weiss
Cynergy Systems, Inc.
Macromedia Flex Alliance Partner
[url]http://www.cynergysystems.com[/url]

Email: [email]jason.weiss@cynergysystems.com[/email]
Office: 866-CYNERGY
Mobile: 1.832.444.2246

[Jean-hulk Hauntrey]

Hello Chris and Jason,

Superb thread, I need exactly to do this.. before monday. I've had many problems trying to implement hyperlinks in a datagrid column.. I'm getting half of the code here, Chris, did you manage to make hyperlinks active in the end ? would you mind sharing your code ? that would be of great help...
I think it's nowhere properly explained on the internet. I've researched the topic for a few days now.

thank you so much for your help

JH