If you look at the rendered HTML, you'll see the problem: Your getReport call looks like this:
getReport(XYZ);
I'm guessing you want quotes around that, so:
return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';
...which renders:
getReport('XYZ');
Live example
Somewhat more esoteric, but when you output an onclick attribute as part of HTML source, it is of course an HTML attribute, which means you can use character entities. So you could use the " entity:
return '<a href="javascript:void(0);" onclick="getReport("'+type+'"); return false;"></a>';
Live example
I point this out not because I recommend it (I don't), but because it's useful to remember what's really going on in an onclick attribute. This is one of the reasons I would strongly recommend using a proper event handler (e.g., via addEventListener / attachEvent, or even just assigning to the a element's onclick property once it's been instantiated) instead.
It's important to note that this way of doing it is also very sensitive to the content of record.data['name']. For instance, consider what happens if instead of XYZ it's Tom's. The output of the first option above would be
getReport('Tom's');
...which is obviously a problem. Similarly, if there's a backslash in the text, it will be treated as an escape character on the result, etc., etc. — a bit of a minefield.
If you can possibly change your renderLink so it returns an actual instantiated a element rather than a string, that's what I'd do:
function createLink(value, meta, record)
{
var type = record.data['name']; // Grab value as of when we were called
var link = document.createElement('a');
link.href = "javascript:void(0);";
link.onclick = function() { // Or even better, addEventListener / attachEvent
getReport(type);
return false;
};
return link;
}
That creates the link and a closure that accesses type without turning it into text and back again. (Don't worry if you're unfamiliar with closures, closures are not complicated.)
Live example
