Creating a link based on another column?
I must be missing something really easy...
How do you create a link in one column from the URL that is in another column?
I have tried various methods:
// Convert the text in column 2 to hyperlinks.
/// URLs are in Column 5
var link = new Active.Templates.Link;
link.setAttribute("target", "_new");
// method 1: doesn't work
//link.setAttribute("href", function(i, j){return MyData[i][5]} )
// method 2: doesn't work
//obj.setAttribute("href", function(i, j){return MyData[i][5]} )
// creates the link for the column
obj.setColumnTemplate(link, 2);
Thanks in advance
Frank
October 11,
You just have to provide data/link property:
var link = new Active.Templates.Link;
link.setAttribute("target", "_new");
obj.setColumnTemplate(link, 2);
obj.setProperty("data/link", function(i, j){
if(j==2) return MyData[i][5];
});
Alex (ActiveWidgets)
October 11,
Thank you Alex! It works great!
I will post the full code for reference:
<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
<link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<style>
.active-controls-grid {height: 100%; font: menu;}
.active-column-0 {width: 200px;}
.active-column-1 {width: 80px; text-align: right;}
.active-column-2 {width: 150px;}
.active-column-3 {width: 120px;}
.active-box-image {height: 16px;}
</style>
<script src="../data/files.js"></script>
</head>
<body>
<script>
var obj = new Active.Controls.Grid;
obj.setColumnTemplate(new Active.Templates.Image, 0);
obj.setRowProperty("count", 9);
obj.setColumnProperty("count", 4);
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setDataProperty("image", function(i, j){return myData[i][4]});
obj.setColumnProperty("texts" , ["Name", "Size", "Type", "Date Modified"]);
obj.setColumnHeaderHeight("20px");
obj.setRowHeaderWidth("0px");
obj.getColumnTemplate(0).setAttribute("title", function(){return this.getItemProperty("tooltip")});
obj.defineDataProperty("tooltip", function(i, j){return "Type: " + myData[i][2] + "\nDate Modified: " + myData[i][3] + "\nLink: " + myData[i][5]});
var link = new Active.Templates.Link;
link.setAttribute("target", "_new");
obj.setColumnTemplate(link, 2);
obj.setProperty("data/link", function(i, j){
if(j==2) return myData[i][5];
});
document.write(obj);
</script>
</body>
</html>
Frank
October 11,
Thank you for posting the entire thing . . . however, with all examples I have tried, the hyperlinked text ends up being in the wrong column. To try to illustrate, using the above example, the link is of course undefined. So, I changed the ../data/files.js line with the following just to give me a real link:
<script>var myColumns = ["1","2","3","4"]; var myData = [["11","12","<a href='
http://google.com'>13</a>","14"],["21","22","23","24"],["31","32","33","34"],["11","12","13","14"],["11","12","13","14"],["11","12","13","14"],["11","12","13","14"],["11","12","13","14"],["11","12","13","14"]];</script>
What I end up seeing in the first line is the 11 & 12 in the first two columns as I would expect. I then see an empty column with 13 & 14 in the last column. The 13 is a correct link as I would expect. Your help would be greatly appreciated!
Dyme
March 6,
Never mind, I found how to do it. It seems a little painful, but works.
Dyme
March 7,
Dyme:
It would be great if you could share your findings.
Andreas
March 17,
I am currently planning on posting my findings, but am trying to get some issues resolved with the grid (so far no response from the forum nor e-mail). I really do like it though especially if I can get the issues taken care of.
In any case, basically in drawGrid, I set up the following:
1) obj.setDataText(): if it is a column with links and it contains the <a> tags, return the display text within the <a> tags. Otherwise, I just return the text.
2) obj.setProperty("data/link", ...): if it is a column with links and it contains a link, return the actual link to go to.
That did it for me. It was painful to find out how to do this, but like I said, it works. An easier way may exist, but I just have not found it yet.
Dyme
March 17,
Hey guys, i found a really easy way to do this, based exactly on what Dyme did, i had an array, and since i was doing much of my coding in PHP and Smarty, i did the following in my Smarty template
var MyArray=["<a href='
http://www.google.com'>{* $ratecardDetails[cards].Position *}</a>",
"{* $ratecardDetails[cards].Name *}"];
I found this to work very well especially as i was working with frames.
Roger
October 7,
I've tried the approach posted by Frank, but no luck. Does this work with Active.XML.Table table model?
Todd
December 17,
It is very helpful information. But I could not find it in google....
Chen
March 17,